Markdown Integration

Mermaid Studio provides complete language support for Mermaid diagrams embedded in Markdown files. This is especially useful for README files, documentation, and wikis.

Using Mermaid in Markdown

To add a Mermaid diagram to a Markdown file, use a fenced code block with the mermaid language identifier:

```mermaid
flowchart TD
    A[Start] --> B[Process]
    B --> C[End]
```

Mermaid Studio recognizes these blocks and provides full editor support.

Features in Markdown

Inside Mermaid code blocks, you get the same features as in standalone Mermaid files:

Syntax highlighting: Keywords, nodes, and edges are color-coded
Code completion: Suggestions for diagram types, keywords, and node references
Error detection: Syntax errors are highlighted inline
Navigation: Click on node references to jump to their definitions

Preview in Markdown

When you open the Markdown preview panel, your Mermaid diagrams render as actual diagrams instead of code blocks. You can toggle between viewing the rendered diagram and the source code.

To open the Markdown preview:

Open a .md file
Click the split-view or preview icon in the editor toolbar
Or use View > Tool Windows > Markdown Preview

Supported Diagram Types

All Mermaid diagram types work in Markdown code blocks:

Flowcharts
Sequence diagrams
Class diagrams
State diagrams
Entity-relationship diagrams
Pie charts
Mindmaps
Timeline diagrams
And all other Mermaid diagram types

Tips

README files: Add architecture diagrams, flowcharts, or sequence diagrams to make your project documentation clearer
Wiki pages: Embed diagrams directly in your wiki without needing external image files
Technical docs: Keep diagrams in sync with your code by editing them directly in your IDE

Language Identifier

You can use either mermaid or mmd as the language identifier for your code blocks:

```mermaid
pie title Votes
    "A" : 40
    "B" : 30
    "C" : 30
```

```mmd
pie title Votes
    "A" : 40
    "B" : 30
    "C" : 30
```

Both work identically.