Code and Diagrams

Syntax coloring

Fence a code block with three backticks and a language tag:

```swift
struct Greeter {
    let name: String
    func greet() -> String { "Hello, \(name)!" }
}
```

renders with syntax colors, in 35+ languages via highlight.js, offline, following light and dark mode:

struct Greeter {
    let name: String
    func greet() -> String { "Hello, \(name)!" }
}

The same works for python, ruby, bash, json, and friends:

def fib(n: int) -> int:
    return n if n < 2 else fib(n - 1) + fib(n - 2)

for f in *.md; do wc -w "$f"; done   # word counts

A block without a language tag stays uncolored. PeepMD does not guess the language:

plain text stays plain

Mermaid diagrams

Tag the fence mermaid instead of a language and it renders as a diagram, drawn by a bundled engine with no network involved. The five types below each appear with the Markdown that produced them.

Flowchart

Boxes and arrows. graph LR runs left to right, graph TD top down.

```mermaid
graph LR
    A[Tag a fence] -->|mermaid| B{Renders?}
    B -->|yes| C[Diagram]
```

graph LR
    A[Tag a fence] -->|mermaid| B{Renders?}
    B -->|yes| C[Diagram]

Sequence

Who said what to whom, in order.

```mermaid
sequenceDiagram
    participant Y as You
    participant P as PeepMD
    Y->>P: a mermaid block
    P-->>Y: a rendered diagram
```

sequenceDiagram
    participant Y as You
    participant P as PeepMD
    Y->>P: a mermaid block
    P-->>Y: a rendered diagram

Class

Types and their relationships, for documenting a design.

```mermaid
classDiagram
    class Document {
        +String text
        +render()
    }
    class Style {
        +String name
    }
    Document --> Style : rendered with
```

classDiagram
    class Document {
        +String text
        +render()
    }
    class Style {
        +String name
    }
    Document --> Style : rendered with

State

What a thing does and what moves it between states.

```mermaid
stateDiagram-v2
    [*] --> Watching : document opened
    Watching --> Rendering : file changed
    Rendering --> Watching : preview updated
```

stateDiagram-v2
    [*] --> Watching : document opened
    Watching --> Rendering : file changed
    Rendering --> Watching : preview updated

Pie

Proportions, with the numbers written plainly.

```mermaid
pie title Styles that ship
    "Built-in" : 12
    "Your own" : 3
```

pie title Styles that ship
    "Built-in" : 12
    "Your own" : 3

The rest of the mermaid family (Gantt charts, entity relationships, user journeys, and more) works the same way: tag the fence mermaid and write the diagram. The full syntax is documented at mermaid.js.org.

---

Previous: Markdown Syntax · Contents · Next: Math