Markdown with Mermaid diagrams, rendered locally

Flowcharts and diagrams live inside your notes — drawn on your device.

A diagram usually starts as an afterthought: the doc is written, then the flowchart gets pasted into a separate drawing tool or screenshotted from a renderer website. In Typehall the diagram stays where the thinking is. Write a fenced block tagged mermaid inside any Markdown note and Preview draws it — locally, offline after the first cached visit, with the source text preserved exactly. To learn the syntax step by step, see the Mermaid diagrams lesson.

## Deploy checklist

```mermaid
flowchart TD
  A[Draft] --> B[Review]
  B --> C[Ship]
```

- [ ] Confirm the source still reads when the diagram fails

Preview and split view

Diagrams render in the note's Preview and in the read-only split-view pane, so a plan can sit beside its diagram while you edit. Multiple diagrams in one note each render independently. The surrounding Markdown — headings, tables, highlighted code, math, checklists, links — renders exactly as it would without the diagram.

Local rendering, source preserved

Rendering runs entirely in your browser with a bundled library — no diagram server, no external requests.
Your Markdown source is never rewritten: saving, reopening, history, backup, restore, and .md export keep the fence byte-identical.
Invalid syntax shows the source block with a short notice instead of breaking the preview.
Only mermaid fences become diagrams; every other fence stays plain highlighted code.

Offline and exports

After one successful online visit caches the app, diagrams render with no connection. Exporting the note as .html inlines the rendered diagram as SVG, so the file is self-contained; .md export keeps the portable fence. Details are on Offline notepad and Exporting notes.

When Typehall fits

This is for notes that happen to contain diagrams — plans, runbooks, decision docs, AI-generated drafts with flowcharts — not a drawing app. There is no standalone diagram editor, no shape palette, and no new toolbar: the fence syntax is the whole interface. If the diagram is the deliverable and needs pixel-level design, a dedicated tool serves that better. If the diagram is part of a larger document, keeping the source and surrounding notes together can be more practical.

Questions

How do I add a diagram to a note?

In a Markdown note, write a fenced block tagged mermaid (triple backticks plus the word mermaid) with flowchart, sequence, or other diagram syntax inside. Preview renders it as a diagram; the source text stays exactly as typed.

Does the diagram leave my browser?

No. Diagrams render with a local library bundled with the app — no rendering server, no CDN, no external requests. After the first visit caches the app, diagrams render offline too.

What if my diagram syntax is wrong?

Preview keeps the readable source block with a short notice instead of crashing. Fix the syntax and the diagram renders on the next keystroke.

Open the notepad and try a mermaid fence in a Markdown note. The AI Markdown workflow shows where generated diagrams get reviewed.