Mermaid Diagrams

Diagrams that live inside your markdown

Write flowcharts, sequence diagrams, class diagrams, and more using Mermaid syntax. They render live in the preview panel and export cleanly to PDF.

Supported diagram types

Flowcharts

Map out processes, decision trees, and workflows with directional nodes and edges.

Sequence Diagrams

Visualize interactions between systems, APIs, or components over time.

Class Diagrams

Document object-oriented structures with classes, relationships, and methods.

Quick example

Add a Mermaid code block to your markdown:

```mermaid
graph TD
    A[Write Markdown] --> B[Add Mermaid Block]
    B --> C{Preview}
    C --> D[Export PDF]
    C --> E[Keep Writing]
```

The diagram renders automatically in the live preview panel.

Visual documentation without leaving your editor

Technical writing often needs diagrams — architecture overviews, API flows, state machines, data models. Normally this means switching to a separate diagramming tool, exporting an image, and embedding it in your document. With Glyphmark, you write the diagram in the same file as your text using Mermaid syntax and it renders alongside your content.

Live rendering as you type

Mermaid diagrams update in real time in the preview panel. As you add nodes and connections, the diagram redraws immediately. This makes it easy to iterate on complex flowcharts or sequence diagrams without waiting for a compile step.

Perfect for technical documentation

If you're writing technical documentation, Mermaid diagrams let you embed architecture diagrams, API flow charts, and database schemas directly in your markdown. The diagrams stay version-controllable as plain text, so they work perfectly with Git-based documentation workflows.

Diagrams in your PDFs

When you export to PDF, Mermaid diagrams are rendered as high-quality visuals embedded in the document. Share your documentation with non-technical stakeholders and they'll see clean, professional diagrams — not raw code blocks. This makes Glyphmark ideal for meeting notes and project documentation that include visual elements.

Frequently Asked Questions

What Mermaid diagram types are supported?+
Glyphmark supports all standard Mermaid diagram types including flowcharts, sequence diagrams, class diagrams, state diagrams, entity relationship diagrams, Gantt charts, pie charts, and more. Any valid Mermaid syntax will render in the preview.
How do I create a Mermaid diagram?+
Create a fenced code block with the language set to 'mermaid'. Write your diagram syntax inside the block, and it will render automatically in the preview panel. For example: ```mermaid\ngraph TD\nA --> B\n```
Do diagrams render in real time?+
Yes. As you type Mermaid syntax, the diagram updates live in the preview panel. You can see your flowcharts and sequence diagrams take shape as you build them.
Are diagrams included in PDF exports?+
Yes. When you export to PDF, Mermaid diagrams are rendered as images and embedded in the document. They appear exactly as they do in the preview panel.
Do I need to install anything for Mermaid support?+
No. Mermaid support is built into Glyphmark. There's nothing to install, configure, or enable. Just start writing Mermaid syntax in a code block and it works.