mindmaply

Render Mermaid flowcharts and Markdown outlines as beautiful, Whimsical-quality SVG mind maps.

You write standard Mermaid flowchart syntax — or just Markdown headings and bullets — and mindmaply applies an opinionated visual layer: a curated color palette, clean typography, and two polished layout engines (orthogonal and curved).

Try it live at mindmaply.app · Syntax docs

Example

This Markdown outline:

# Trip Planning
## Destination
### Research
- Compare flight prices across at least three airlines before committing to a departure date.
## Budget
### Daily costs
- Track accommodation, food, and local transport separately so overruns are easy to spot.

renders to this mind map (long labels auto-wrap, deeper levels scale down, every node gets a card):

The image above is generated by mindmaply-core itself — click it to open the same document in the live editor.

What's in this repo

A pnpm monorepo with a clean split between the rendering engine and the web app:

Path	What it is
packages/core	mindmaply-core — the framework-agnostic rendering engine (npm-publishable, not yet published). Parser → tree → layout → SVG. One runtime dependency (d3-hierarchy). No DOM, no React.
apps/editor	The web app at mindmaply.app — a React frontend (landing page, live editor, and docs) that consumes mindmaply-core. Format switching (Mermaid ⇄ Markdown), sharing, zoom/pan.

The engine knows nothing about the app; the app depends on the engine via the workspace. You can use mindmaply-core standalone in any JS/TS project.

Use the library

mindmaply-core isn't on npm yet — build it from this repo and consume it via the workspace (or a local file:/pnpm link):

pnpm install && pnpm --filter mindmaply-core build

import { render, renderMarkdown } from 'mindmaply-core'

const svg = render(`flowchart LR
  root((Topic)):::root --> A[Idea A]:::b1
  root --> B[Idea B]:::b2
  classDef root fill:#FFFFFF,stroke:#1E293B,stroke-width:1.5px
  classDef b1   fill:#4B96E633,stroke:#4B96E6,stroke-width:2px
  classDef b2   fill:#B355D033,stroke:#B355D0,stroke-width:2px`)

// or from a Markdown outline
const svg2 = renderMarkdown(`# Topic
- Idea A
- Idea B`)

Full API in the core package README.

Develop

Requirements: Node ≥ 18, pnpm 9.

pnpm install
pnpm dev      # editor app at http://localhost:5173
pnpm test     # core + editor test suites
pnpm build    # production build of the editor

Contributing

Contributions are very welcome — see CONTRIBUTING.md for the workflow (TDD, Conventional Commits, changesets for releases) and look for good first issue labels.

License

MIT