A lightweight, dependency-free Mindmap library for the browser.
npm install kakidashMindmap Typescript / Javascript Library.
"Dash through your thoughts"
Kakidash's mission is to maximize output speed.
It is designed to capture every fleeing thought and vast idea without bottlenecks.
Master the shortcuts and expand your mind map at the speed of thought.
- Mindmap Creation: Add nodes, manipulate siblings and child nodes.
- Layouts: Standard (Standard/Both), Left aligned (Left), Right aligned (Right).
- Styling:
- Font size adjustment.
- Bold (Bold), Italic (Italic).
- Color changes via palette (Style Editor).
- Icon Settings: Add/Remove flat icons via Command Palette (m key).
- Interaction:
- Drag and drop for node movement and reordering.
- Keyboard shortcuts for rapid operation.
- Zoom, Pan (Screen navigation).
- Image Support: Paste images from the clipboard.
- Auto Link: Automatically detects URLs in node text and converts them to clickable links.
- Import/Export: Save and load data in JSON format (including focus state).
- For Developers:
- TypeScript support.
- Read-only mode.
- Event system.
``bash`
pnpm add kakidash
Prepare a container element (e.g., div) to display kakidash.width
Important: You MUST specify and height for the container via CSS.
`html`
#### A. NPM Project (Vite / Webpack etc.)
`bash`
pnpm add kakidash
`typescript
import { Kakidash } from 'kakidash';
// Get container
const container = document.getElementById('mindmap-container');
// Instantiate
// Instantiate with optional configuration
const kakidash = new Kakidash(container, {
maxNodeWidth: 200, // Optional: Maximum width for nodes
customStyles: { // Optional: Initial custom styles
rootNode: { border: '2px solid red' }
}
});
// Add initial data or nodes if needed
kakidash.addNode(kakidash.getRootId(), 'Hello World');
`
#### B. Browser Direct Import (Script Tag / CDN)
Use the built umd file. The library will be exposed under the global variable window.kakidash.
`html
`
You can define custom styles using updateGlobalStyles. These settings are persisted and applied whenever the theme is 'custom'.
`javascript
// 1. Apply custom styles (Can be done anytime)
// These settings are saved internally.
kakidash.updateGlobalStyles({
// Root node style
rootNode: {
border: '4px solid gold',
background: '#ffeeee',
color: '#333' // Font color
},
// Child nodes style
childNode: {
border: '2px dashed blue',
background: 'white',
color: '#555' // Font color
},
// Connection line color
connection: {
color: 'orange'
},
// Entire canvas background
canvas: {
background: '#fafafa' // Use 'transparent' for transparency
}
});
// 2. Activate the custom theme to see your changes
kakidash.setTheme('custom');
`
All values accept standard CSS strings.
| Object | Property | Description | Example |
| --- | --- | --- | --- |
| rootNode, childNode | border | Node border | '2px solid red', 'none' |background
| | | Node background | '#ffffff', 'rgba(0,0,0,0.5)', 'transparent' |color
| | | Text color | '#333', 'black' |connection
| | color | Connection line color | '#ccc', 'orange' |canvas
| | background | Canvas background | '#f0f0f0', 'transparent' |
- new Kakidash(container: HTMLElement, options?: KakidashOptions): Creates a new instance.
- options.shortcuts: Custom keyboard shortcuts.options.maxNodeWidth
- : Maximum width for text nodes (pixels).options.customStyles
- : Initial custom styles.kakidash.addNode(parentId, topic)
- : Adds a new child node to the specified parent node.kakidash.getData()
- : Retrieves current mindmap data as a JSON object.kakidash.loadData(data)
- : Loads JSON data and renders the mindmap.kakidash.updateGlobalStyles(styles)
- : Updates global styles (only active when theme is 'custom').kakidash.updateLayout(mode)
- : Changes layout mode ('Standard', 'Left', 'Right').kakidash.setReadOnly(boolean)
- : Toggles read-only mode.kakidash.setMaxNodeWidth(width: number)
- : Sets main node width (-1 for unlimited).kakidash.getMaxNodeWidth()
- : Gets current max node width.kakidash.undo()
- : Undo the last change.kakidash.redo()
- : Redo the last undone change.kakidash.toggleFold(nodeId)
- : Toggle fold state of a node.kakidash.getSelectedNodeId()
- : Get the ID of the currently selected node.kakidash.updateNode(nodeId, { topic?, style?, icon? })
- : Updates a node property. icon accepts an icon ID (e.g., 'check').kakidash.on(event, listener)
- : Register an event listener.kakidash.off(event, listener)
- : Remove an event listener.
| Event Name | Payload | Description |
| --- | --- | --- |
| node:select | string \| null | Fired when a node is selected. |node:add
| | { id: string; topic: string } | Fired when a new node is added. |node:remove
| | string | Fired when a node is removed. |node:update
| | { id: string; topic?: string; icon?: string } | Fired when a node is updated. |node:move
| | { nodeId: string; newParentId: string; position?: string } | Fired when a node is moved. |model:load
| | MindMapData | Fired when data is loaded. |model:change
| | void | Fired when the data model changes. |
`typescript`
kakidash.on('node:select', (nodeId) => {
console.log('Selected:', nodeId);
});
You can customize keyboard shortcuts by passing an option to the constructor.
`typescript`
const kakidash = new Kakidash(container, {
shortcuts: {
// Override 'addChild' to Ctrl+N
addChild: [{ key: 'n', ctrlKey: true }],
}
});
Here is the complete default configuration. You can partially override these keys.
`json`
{
"navUp": [
{ "key": "ArrowUp" },
{ "key": "k" }
],
"navDown": [
{ "key": "ArrowDown" },
{ "key": "j" }
],
"navLeft": [
{ "key": "ArrowLeft" },
{ "key": "h" }
],
"navRight": [
{ "key": "ArrowRight" },
{ "key": "l" }
],
"addChild": [
{ "key": "Tab" },
{ "key": "a" }
],
"insertParent": [
{ "key": "Tab", "shiftKey": true },
{ "key": "a", "shiftKey": true }
],
"addSibling": [{ "key": "Enter" }],
"addSiblingBefore": [{ "key": "Enter", "shiftKey": true }],
"deleteNode": [
{ "key": "Delete" },
{ "key": "Backspace" }
],
"beginEdit": [
{ "key": "i" },
{ "key": " " },
{ "key": "F2" }
],
"copy": [
{ "key": "c", "ctrlKey": true },
{ "key": "c", "metaKey": true }
],
"paste": [
{ "key": "v", "ctrlKey": true },
{ "key": "v", "metaKey": true }
],
"cut": [
{ "key": "x", "ctrlKey": true },
{ "key": "x", "metaKey": true }
],
"undo": [
{ "key": "z", "ctrlKey": true },
{ "key": "z", "metaKey": true }
],
"redo": [
{ "key": "Z", "ctrlKey": true, "shiftKey": true },
{ "key": "Z", "metaKey": true, "shiftKey": true },
{ "key": "y", "ctrlKey": true },
{ "key": "y", "metaKey": true }
],
"bold": [{ "key": "b", "shiftKey": true }],
"italic": [{ "key": "i", "shiftKey": true }],
"increaseFontSize": [
{ "key": ">", "shiftKey": true },
{ "key": "." }
],
"decreaseFontSize": [
{ "key": "<", "shiftKey": true },
{ "key": "," }
],
"zoomIn": [{ "key": "[" }],
"zoomOut": [{ "key": "]" }],
"resetZoom": [{ "key": ":" }],
"toggleFold": [{ "key": "f" }],
"selectColor1": [{ "key": "1" }],
"selectColor2": [{ "key": "2" }],
"selectColor3": [{ "key": "3" }],
"selectColor4": [{ "key": "4" }],
"selectColor5": [{ "key": "5" }],
"selectColor6": [{ "key": "6" }],
"selectColor7": [{ "key": "7" }],
"openCommandPalette": [{ "key": "m" }]
}
| Command Palette (Search / Icons) |
| Arrow Keys | Navigate between nodes |
| h / j / k / l | Navigate between nodes (Vim-style) |
| F2 / DblClick / Space / i | Start editing node (Space triggers zoom if image) |
| Enter | Add sibling node (below) |
| Shift + Enter | Add sibling node (above) |
| Tab / a | Add child node |
| Shift + Tab / Shift + a | Insert parent node |
| Delete / Backspace | Delete node |
| Ctrl/Cmd + z | Undo |
| Ctrl/Cmd + Shift + z / Ctrl + y | Redo |
| Ctrl/Cmd + C | Copy |
| Ctrl/Cmd + X | Cut |
| Ctrl/Cmd + V | Paste (Images supported) |
| Drag (Canvas) | Pan screen |
| Wheel | Vertical scroll (Pan) |
| Shift + Wheel | Horizontal scroll (Pan) |
| Ctrl/Cmd + Wheel | Zoom in/out |
| [ | Canvas Zoom In |
| ] | Canvas Zoom Out |
| : | Reset Zoom |
| Click +/- / f | Toggle node folding |$3
| Key | Description |
| --- | --- |
| Enter | Confirm edit |
| Shift + Enter | New line |
| Esc | Cancel edit |$3
| Key | Description |
| --- | --- |
| Shift + b | Toggle Bold |
| Shift + i | Toggle Italic |
| Shift + . (>) / . | Increase font size |
| Shift + , (<) / , | Decrease font size |
| Shift + ArrowLeft / Right | Adjust node width |
| 1 - 7 | Change node color (Palette order) |Architecture
For details on the software architecture and internal module dependencies, please refer to:
- Software Architecture Design
Development
$3
`bash
pnpm install
`$3
`bash
pnpm dev
`$3
`bash
pnpm typecheck
or with turbo
pnpm turbo typecheck
`$3
`bash
pnpm build
or with turbo
pnpm turbo build
`$3
`bash
pnpm test
or with turbo
pnpm turbo test
`$3
`bash
pnpm test:e2e
or with turbo
pnpm turbo run test:e2e
`$3
`bash
pnpm lint
or with turbo
pnpm turbo lint
`$3
Generate API documentation using TypeDoc:
`bash
pnpm docs
`The documentation will be generated in
docs/ directory.$3
Run type checking, build, tests, linting, and documentation generation in parallel:
`bash
pnpm turbo:ci
``