How to Render Mermaid Diagrams, Flowcharts & Math in Markdown

Published on July 22, 2026 • 6 min read

Markdown is the gold standard for developer documentation, READMEs, and technical blog posts. By embedding Mermaid.js diagrams and KaTeX math equations directly inside standard markdown code blocks, technical documentation stays version-controlled, searchable, and visually engaging without relying on static PNG or SVG image exports.

Markdown Studio: Try writing live Markdown with instant Mermaid diagram preview and KaTeX math rendering in JSON OS Markdown Studio.

Supported Mermaid Diagram Types

1. Flowcharts (graph TD / graph LR)

```mermaid
graph TD
  A[Client Request] --> B{Valid Payload?}
  B -- Yes --> C[Database Save]
  B -- No --> D[Return 400 Error]
```

2. Sequence Diagrams (sequenceDiagram)

```mermaid
sequenceDiagram
  autonumber
  Client->>Server: POST /api/v1/auth
  Server-->>Client: 200 OK { token }
```

3. Mindmaps (mindmap)

```mermaid
mindmap
  root((System Architecture))
    Frontend
      Svelte 5
      CodeMirror 6
    Backend
      Cloudflare Workers
```

LaTeX Math Formatting with KaTeX

Render mathematical formulas inline using single dollar signs $E = mc^2$ or block math using double dollar signs $$ ... $$:

$$
\frac{-b \pm \sqrt{b^2 - 4ac}}{2a}
$$

Conclusion

Combining Markdown with inline Mermaid diagrams and KaTeX formulas turns text documents into interactive visual architecture specifications. Start writing today in JSON OS Markdown Studio.