Diagrams from indented text

In this lesson you will learn to write a flowchart in a fenced mermaid block, how Typehall renders it, and what happens when the diagram syntax is wrong.

Syntax

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

The fence tag mermaid switches the block from code to diagram. Inside, flowchart TD means top-down; A[Draft] is a node with the label Draft; --> is a directed edge. The same fences support sequence diagrams, class diagrams, and more — flowchart covers most note-taking needs.

How Typehall renders it

• Preview and Split view draw the diagram from the block; the source text stays exactly as typed and round-trips byte-identically through save, reload, backup, and .md export.
• Rendering is local — a bundled library draws the SVG on your device, with no rendering server and no external requests. After the first visit caches the app, diagrams render offline too.
• HTML export embeds the drawn SVG, so the diagram travels with the file and stays self-contained.

When syntax is wrong

A broken diagram never breaks the note. Preview keeps the readable source block with a short notice, and the next keystroke re-renders. The usual culprits: an unclosed bracket (A[Draft), arrows pointing at undefined nodes, and reserved words used as node ids. Fix the text — the drawing follows.

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

Add one node after Ship — an Archive step — and connect it.

This lesson taught the syntax; the tool-side reference with export and offline details lives at Mermaid Markdown editor. Next, equations: LaTeX math.