Mermaid to Typst

Mermaid to Typst takes a flowchart written as a few lines of Mermaid and writes it as a fletcher diagram. Fletcher is a Typst package for drawing diagrams with nodes and arrows. Labels, shapes, and arrows stay in the source, where you can edit them.

Best use

Use it for research workflows, method diagrams, decision trees, and other flowcharts where the connections matter more than the artwork.

To draw a diagram by hand, or adjust a converted one on a canvas, use the diagram composer. For a LaTeX document, use Mermaid to LaTeX.

Convert a flowchart

1. Open Mermaid to Typst, or run /mermaid-to-typst.
2. Paste Mermaid source, or choose Load example.
3. Choose Convert.
4. Read the note under the result. It says whether you got editable fletcher code or a rendered image.
5. Copy or save diagram.typ. When the result includes an image, Save ZIP keeps the image with the source.

Example:

flowchart LR
  question[Research question] --> search[Search literature]
  search --> decide{Enough evidence?}
  decide -->|Yes| write[Write synthesis]
  decide -.->|No| search

A flowchart or graph that runs TD, TB, LR, BT, or RL, with labels, edge labels, dashed or thick links, and common node shapes, becomes fletcher code. The result starts with the #import line for fletcher, followed by a #diagram call with one node per box and one edge per arrow.

Fletcher versions

The import line names a fletcher version that runs on your Typst. With a Typst project open, Oleafly picks it from that project’s Typst version: fletcher 0.5.8 for Typst 0.13 and later, 0.5.5 for Typst 0.12, and 0.5.1 for older releases. With no Typst project open, you get 0.5.8.

Typst downloads fletcher from Typst Universe the first time a document using it compiles. After that it works offline.

When Oleafly renders an image instead

Some Mermaid syntax has no safe fletcher mapping: other diagram types such as sequence diagrams, subgraphs, style and classDef lines, and chained links such as a --> b --> c. Then Oleafly draws the diagram on your device, saves it as assets/diagram.png, and returns a short #figure that shows that image. The relationships stay visible, but the image isn’t editable as code.

Conversion runs on your device. Mermaid input is limited to 50,000 characters. Compile the result at its final width and check label wrapping, crossings, and arrow direction.