Draw flowcharts and diagrams with mermaid.js in Markdown code blocks.
This repository holds two things: the Inkdrop plugin, and the host-agnostic rendering package it is built on.
| Package | Published as | What it is |
|---|---|---|
packages/plugin |
mermaid (ipm) |
The Inkdrop plugin — settings, the full-screen viewer, and the wiring that hands the app's button, theme and print mode to the renderer |
packages/mermaid |
@inkdropapp/mermaid (npm) |
The renderer — themed diagrams, pan/zoom and the hover toolbar, as React components that import no Inkdrop API |
The split exists because the renderer is useful outside the desktop app: the website demo and the mobile web editor previously each carried their own port of it. Everything host-specific arrives as a prop, so one implementation serves all three.
ipm install mermaidSee the plugin README for usage and settings, or the Inkdrop docs for how plugins are installed.
npm install @inkdropapp/mermaidSee the package README for the API, the required stylesheets, and the peer dependencies.
Requires pnpm.
pnpm install
pnpm build # builds both packages, in dependency order
pnpm dev # watch mode
pnpm typecheck
pnpm lint
pnpm formatlint and format are configured once at the root (oxlint and
oxfmt) and cover both packages.
To develop against a live Inkdrop, build and symlink the plugin directory:
pnpm build
ipm link packages/plugin- The plugin bundles
@inkdropapp/mermaidrather than depending on it at runtime. The published plugin has to be self-contained: ipm installs it from the registry and its tarball excludesnode_modules. packages/plugin/styles/mermaid.cssis generated at build time (copied from the renderer package byscripts/copy-styles.mjs) and is gitignored. Edit the source inpackages/mermaid/styles/. The plugin's ownstyles/fullscreen.cssis hand-written.- Mermaid is loaded lazily. It is roughly 3.4 MB, so it lives in its own chunk that is only fetched once a diagram actually appears — worth re-checking the chunk sizes after touching imports or the build config.
Two independent artifacts, and order matters — publish the renderer first if a plugin release depends on renderer changes, since the plugin bundles it at build time.
pnpm --filter @inkdropapp/mermaid publish # npm
ipm publish packages/plugin # Inkdrop plugin registryMIT