Mermaid Diagram Demo

This post demonstrates the difference between rendering Mermaid diagrams and showing the raw code.

Raw Code (will NOT render)

Use text as the language identifier to show the code:

graph TD
    A[Start] --> B[Process]
    B --> C{Decision}
    C -->|Yes| D[Action]
    C -->|No| E[End]

Rendered Diagram (WILL render)

Use mermaid as the language identifier to render the diagram:

graph TD
    A[Start] --> B[Process]
    B --> C{Decision}
    C -->|Yes| D[Action]
    C -->|No| E[End]

Another Example: Sequence Diagram

Raw code:

sequenceDiagram
    Alice->>Bob: Hello Bob!
    Bob-->>Alice: Hi Alice!

Rendered:

sequenceDiagram
    Alice->>Bob: Hello Bob!
    Bob-->>Alice: Hi Alice!

Summary