mdmap

Markdown → mindmap editor, packaged for Cloudron.

Single-user web app. Write .md files in a split editor and watch them render as a live, zoomable, pannable visual mindmap. Export the diagram as SVG, PNG, or JPG to your image gallery.

Features

• Markdown source for mindmap — each top-level # Heading becomes a top-level mindmap node; ##/###/… render as children. Multiple # items in one file produce a multi-root forest (top-level siblings are not connected).
• Three view modes — Edit (markdown only), Split (editor left, mindmap right), Preview (mindmap only). The splitter in Split mode is draggable (default 30/70, persists).
• Left sidebar — lists all .md files plus exported images, with + new and per-item delete.
• Per-node colors via metadata — add - bgcolor: and - fgcolor: lines immediately under a heading to style it. Add - corner: round for rounded nodes, - line: dots for dotted parent edges; bgcolor, fgcolor, corner, line, and linkcolor cascade from parent to child when a node doesn't override. Add - note: free text for a hover tooltip (shown via an i badge on the node; does not cascade). Top-level defaults derive from a rotating depth-based palette.
• Cross-links between any nodes on any branch/level — on any heading write - base: Heading and - link: Heading together with optional - linkcolor: color. A sparse-dotted bezier (rhythm 1 7, visually distinct from hierarchy dots) renders from the link node to the base node with a small arrow pointing at the base. Write pairs on both sides to draw arrows both ways. Rendered in all exported formats.
• Per-root layout — write - layout: square under a level-1 # heading to render that root balanced (root centered, children split roughly 50/50 left/right; odd children get the extra on the right). Declare nothing or - layout: default for the standard left→right tree. Per-root, so you can mix styles in one file. Honoured only on level === 1; silently ignored on sub-headings.
• Tapered edges with styles — L1 → L2 edges are thickest, each subsequent level thins out. Edges use the child node's accent color and respect the child's line style (solid/dots).
• Pan & zoom canvas — drag background to pan, scroll wheel to zoom around the cursor, double-click anywhere to zoom in 1.4× at that point. Floating zoom controls (+, −, fit) live top-right of the canvas.
• Keyboard zoom: + / = / numpad + zoom in; - / numpad - zoom out; Esc closes menus/modals including the in-app help; ⌘/Ctrl + S saves; ⌘/Ctrl + E/L/P switches Edit/Split/Preview.
• Image export — SVG, PNG, or JPG saved into your app's images folder and listed instantly in the sidebar. Exports render the full diagram at native resolution (no on-screen pan/zoom letterboxing). corner, line, layout, and cross-links including arrows and linkcolor appear in all formats; notes are intentionally hidden in exports since they are a hover-only UI feature.
• Autosaved preferences — last-used view mode, last-opened file, and split-pane ratio are stored in SQLite and restored on next visit.
• In-app help — the ? button to the right of Export opens a metadata reference modal, independent of the bundled welcome.md sample file.
• Cloudron auth — uses the proxyAuth addon; Cloudron handles login, the app trusts the session.

Example markdown

# Project
- layout: square
- bgcolor: blue
- fgcolor: white

## Module 1
- bgcolor: orange
- fgcolor: white
- note: owned by Jane

### task 1
### task 2

## Module 2
- bgcolor: green
- fgcolor: white
- base: Module 1
- link: task 2
- linkcolor: yellow

### task 1
### task 2

Metadata reference

Metadata is declared as a short list directly beneath the heading it styles. Each line has the form - key: value. Values currently supported:

key	applies to	value examples	cascades
bgcolor	heading node fill	any CSS color: #1f6feb, rgb(…) hsl(…), named color	yes
fgcolor	heading node text	any CSS color; default inherited from above	yes
corner	heading node rect	square (default) or round	yes
line	parent edge style	solid (default), dots, or dashed	yes
note	hover tooltip	free-form text; renders as i badge + hover tooltip	no
base	cross-link target	exact heading text of the arrow destination node	no
link	cross-link source	exact heading text of the arrow source node (pair with base)	no
linkcolor	cross-link colour	any CSS color; default muted blue	yes
layout	top-level layout	default (LTR tree) or square (balanced). Honoured on # level only	no

Unknown keys are preserved in the source but ignored at render time. bgcolor, fgcolor, corner, line, and linkcolor cascade down — a child without its own value uses its parent's. note, base, link, and layout do not cascade — they apply only to the heading they are declared on. Root nodes without metadata fall back to a palette keyed by level.

corner, line, layout, and cross-links (including arrows + linkcolor) are preserved in all exported image formats (SVG, PNG, JPG). note tooltips are deliberately hidden in exports.

Keyboard shortcuts

Shortcut	Action
⌘/Ctrl + S	Save current .md
⌘/Ctrl + E	Switch to Edit mode
⌘/Ctrl + L	Switch to Split mode
⌘/Ctrl + P	Switch to Preview mode
+ / = / numpad +	Zoom in (around the canvas viewport center)
- / numpad −	Zoom out (around the canvas viewport center)
Double-click canvas	Zoom in 1.4× around the clicked point
Esc	Close export menu, help modal, or new-file modal
Drag splitter	Resize split pane (15–55% editor)

Package layout

Dockerfile            — cloudron/base:5.1.0, uses the base image's prebuilt Node 24.19.0
                        (PATH-pinned to /usr/local/node-24.19.0/bin), native build deps
                        for better-sqlite3, ne editor
start.sh              — init dirs, first-run copy defaults/md, stamp .initialized +
                        app_version, chown, exec gosu cloudron node server.js
server.js             — Express server on 0.0.0.0:3000, static public/ + 4 API routes
routes/files.js       — list/create/rename/read/update/delete markdown in /app/data/md
routes/images.js      — list/delete/serve /app/data/images
routes/settings.js    — SQLite-backed user settings (mode, file, split ratio)
routes/export.js      — accept POST of SVG/PNG/JPG and write to /app/data/images
utils/db.js           — SQLite settings table helpers
utils/md-parser.js    — heading hierarchy + metadata parser (bgcolor/fgcolor/corner/line/
                        linkcolor cascade; note/base/link/layout do not cascade)
public/               — dark-mode single-page app
  index.html          — header / toolbar / sidebar / three panes / new-file modal /
                        metadata help modal
  css/style.css       — design tokens, 82%-luminance muted text (no `dim` keyword),
                        split splitter, mindmap styles, cross edge defaults
  js/app.js           — editor sync, SVG mindmap renderer, LTR + balanced square layout,
                        pan/double-click/key zoom, split-drag, keyboard shortcuts, export,
                        help modal, cross-links
defaults/md/          — sample content for first run (safe to delete after install)

License

See LICENSE.