anteriovieira / Vue Mindmap
Licence: mit
VueMindmap is a vue component for mindnode maps
Stars: ✭ 457
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Vue Mindmap
Liandi
📕 一款桌面端的 Markdown 块级引用和双向链接笔记应用,支持 Windows、Mac 和 Linux。A desktop Markdown Block-Reference and Bidirectional-Link note-taking application, supports Windows, Mac and Linux.
Stars: ✭ 354 (-22.54%)
Mutual labels: mindmap
Dtree
A library for visualizing data trees with multiple parents, such as family trees. Built on top of D3.
Stars: ✭ 308 (-32.6%)
Mutual labels: d3
Heimer
Heimer is a simple cross-platform mind map, diagram, and note-taking tool written in Qt.
Stars: ✭ 380 (-16.85%)
Mutual labels: mindmap
Carbon Charts
📊 📈⠀Robust dataviz framework implemented using D3 & typescript
Stars: ✭ 287 (-37.2%)
Mutual labels: d3
Mozaik
Mozaïk is a tool based on nodejs / react / redux / nivo / d3 to easily craft beautiful dashboards
Stars: ✭ 3,546 (+675.93%)
Mutual labels: d3
Blink Mind Desktop
Cross-platform full-featured mind mapping and outline app based on electron.
Stars: ✭ 352 (-22.98%)
Mutual labels: mindmap
Flask jsondash
🐍 📊 📈 Build complex dashboards without any front-end code. Use your own endpoints. JSON config only. Ready to go.
Stars: ✭ 3,215 (+603.5%)
Mutual labels: d3
Rumble Charts
React components for building composable and flexible charts
Stars: ✭ 293 (-35.89%)
Mutual labels: d3
Britecharts
Client-side reusable Charting Library based on D3.js v5 that allows easy and intuitive use of charts and components that can be composed together creating amazing visualizations.
Stars: ✭ 3,688 (+707%)
Mutual labels: d3
VueMindmap
VueMindmap is a vue component for mindnode maps inspired by react-mindmap.
Live demo built on top of the awesome codesandbox.
Installation
npm install --save vue-mindmap
Usage
Bundler (Webpack, Rollup)
import Vue from 'vue'
import VueMindmap from 'vue-mindmap'
// You need a specific loader for CSS files like https://github.com/webpack/css-loader
import 'vue-mindmap/dist/vue-mindmap.css'
Vue.use(VueMindmap)
<template>
<mindmap
:nodes="nodes"
:connections="connections"
:editable="true"
/>
</template>
<script>
export default {
name: 'MyMindmap',
data() {
return {
nodes: [...],
connections: [...]
}
}
}
</script>
Browser
<!-- Include after Vue -->
<!-- Local files -->
<link rel="stylesheet" href="vue-mindmap/dist/vue-mindmap.css"></link>
<script src="vue-mindmap/dist/vue-mindmap.js"></script>
<!-- From CDN -->
<link rel="stylesheet" href="https://unpkg.com/vue-mindmap/dist/vue-mindmap.css"></link>
<script src="https://unpkg.com/vue-mindmap"></script>
Props
Prop | Type | Default | Description |
---|---|---|---|
nodes | Array | [ ] | Array of objects used to render nodes. |
connections | Array | [ ] | Array of objects used to render connections. |
subnodes | Array | [ ] | Array of objects used to render subnodes. |
editable | Boolean | false | Enable editor mode, which allows to move around nodes. |
nodes
Array of objects used to render nodes. Below an example of the node structure.
{
"text": "python",
"url": "http://www.wikiwand.com/en/Python_(programming_language)",
"fx": -13.916222252976013,
"fy": -659.1641376795345,
"category": "wiki",
"note": ""
}
The possible attributes are:
- text: title of the node
- url: url contained in the node
- fx and fy: coordinates (if not present they'll be generated)
- category: category used to generate an emoji
- note: note that will be visible on hover
connections
Array of objects used to render connections. Below an example of the connection structure.
{
"source": "python",
"target": "basics",
"curve": {
"x": -43.5535,
"y": 299.545
}
}
The possible attributes are:
- source: title of the node where the connection starts
- target: title of the node where the connection ends
- curve.x and curve.y: coordinates of the control point of a quadratic bezier curve (if not specified the connection will be straight)
subnodes
Array of objects used to render subnodes. The structure is the same as for nodes with two additional attributes:
- parent: title of the parent node
- color: used for the margin color, needs to be a valid CSS color
Styling
Here's a list of all CSS classes for styling:
-
.mindmap-svg: main
svg
element containing the map; -
.mindmap-node:
foreignObject
element representing a node; -
.mindmap-node--editable:
foreignObject
element representing a node in editor mode; -
.mindmap-subnode-group-text:
foreignObject
element containing all subnodes of a given node; -
.mindmap-subnode-text:
div
element containing a subnode; -
.mindmap-connection:
path
element for each connection; -
.mindmap-emoji:
img
tag for emoji
Development
Launch visual tests
npm run dev
Launch Karma with coverage
npm run dev:coverage
Build
Bundle the js and css of to the dist
folder:
npm run build
License
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].