Skip to content

Mermaid Diagrams

Write diagrams in markdown. Inkwell renders them live in the preview pane. No plugins, no configuration, no external tools. Works fully offline.

Supported diagram types

Inkwell ships with Mermaid v11, which supports a wide range of diagram types. All of them work out of the box:

  • Flowcharts (graph TD, graph LR, etc.) for process and decision diagrams
  • Sequence diagrams (sequenceDiagram) for API flows, protocols, and interactions
  • Gantt charts (gantt) for project timelines
  • Class diagrams (classDiagram) for object-oriented design
  • State diagrams (stateDiagram-v2) for state machines and lifecycles
  • Entity relationship diagrams (erDiagram) for database schemas
  • User journey diagrams (journey) for UX flows
  • Pie charts (pie) for simple data visualization
  • Mind maps (mindmap) for brainstorming and note structures
  • Timeline diagrams (timeline) for chronological events
  • Git graphs (gitGraph) for branching visualizations
  • C4 diagrams (C4Context) for system architecture

Anything Mermaid v11 supports works in Inkwell. If Mermaid can render it, Inkwell can preview and export it.

Usage

Wrap your diagram in a fenced code block with the mermaid language tag:

markdown
```mermaid
graph TD
    A[Start Writing] --> B{Licensed?}
    B -->|Yes| C[Export PDF]
    B -->|Yes| D[Export HTML]
    B -->|No| E[Keep Writing]
    C --> F[Done]
    D --> F
```

The diagram renders automatically in the preview pane as you type. There's nothing to enable, no plugins to install, no language to configure. Save the file and the diagram is part of your document.

In exports

Mermaid diagrams are captured as SVGs in both HTML and PDF exports. What you see in the preview is what ships in the final output. Diagrams scale cleanly at any zoom level because they're vector, not raster.

Frequently asked questions

Does it work offline?

Yes. Inkwell bundles the Mermaid renderer. No network calls, no CDN fetches. You can use it on a plane, in an airgapped environment, or anywhere you don't have internet. Your diagrams render locally and stay on your machine.

Which version of Mermaid does Inkwell use?

Inkwell currently bundles Mermaid v11, which is the latest major version. Upgrades roll out with Inkwell releases.

Can I export a diagram as its own file?

Not directly. Diagrams are part of your markdown document and get included in your HTML or PDF export. If you need a standalone SVG, the HTML export preserves the SVG inline so you can extract it from there.

Does Mermaid support dark themes?

Yes. Inkwell's Mermaid renderer follows your editor theme. When you're in Midnight theme, diagrams render with dark backgrounds. When you're in Editorial, they render with light backgrounds. The theme carries through to exports.

Why not a diagram editor instead?

Because your diagram is part of your writing. A text-based diagram lives in your markdown file, version controls cleanly, and can't get separated from the document. A visual diagram editor adds friction every time you want to tweak a flowchart.

What if Mermaid can't render my diagram?

You'll see an error in the preview pane with a line number. Fix the syntax and the diagram re-renders. Inkwell doesn't break or crash on malformed diagrams. The rest of your document keeps rendering normally.

  • LaTeX Math — for equations and mathematical notation
  • Exports — PDF and HTML export with diagrams preserved
  • Custom Themes — theme your editor and your diagrams together