Mermaid Rendering Test

Mermaid Rendering Robust Test

This document tests Mermaid rendering across different diagram types, layout sizes, labels, edge styles, subgraphs, long text, special characters, and regular syntax-highlighted code blocks.

1. Simple Flowchart

flowchart LR
    A[Markdown Source] --> B[Parser]
    B --> C[Mermaid Renderer]
    C --> D[SVG Output]
    D --> E[Browser]

2. Top-to-Bottom Flowchart

flowchart TD
    START([Start]) --> CHECK{Valid input?}

    CHECK -->|Yes| PROCESS[Process content]
    CHECK -->|No| ERROR[Show error]

    PROCESS --> DONE([Done])
    ERROR --> DONE

3. Flowchart With Different Node Shapes

flowchart LR
    A([Rounded])
    B[Rectangle]
    C{Decision}
    D[(Database)]
    E[[Subroutine]]
    F>Asymmetric]

    A --> B --> C
    C -->|True| D
    C -->|False| E
    E --> F

4. Labels and Edge Styles

flowchart LR
    A[Client] -->|HTTP request| B[API]
    B -.->|Optional call| C[Cache]
    B ==>|Primary path| D[Database]
    C --> D
    D -->|Response| B
    B --> A

5. Subgraphs

flowchart LR
    USER[User]

    subgraph FRONTEND[Frontend]
        PAGE[Page]
        VIEW[View Layer]
        STATE[State]
    end

    subgraph BACKEND[Backend]
        API[API]
        SERVICE[Service]
        DB[(Database)]
    end

    USER --> PAGE
    PAGE --> VIEW
    VIEW --> STATE
    STATE --> API
    API --> SERVICE
    SERVICE --> DB

6. Nested Subgraphs

flowchart TD
    subgraph SYSTEM[Application]
        subgraph UI[UI Layer]
            PAGE[Page]
            COMPONENT[Component]
        end

        subgraph DATA[Data Layer]
            API[API Client]
            CACHE[Cache]
        end
    end

    PAGE --> COMPONENT
    COMPONENT --> API
    API --> CACHE

7. Long Labels

This checks whether long node text overflows, wraps correctly, or breaks the article layout.

flowchart LR
    A["A node containing a relatively long descriptive label for layout testing"]
    B["Another node with more text to check wrapping and responsive behavior"]
    C["Final destination with an intentionally verbose description"]

    A --> B --> C

8. Special Characters

flowchart TD
    A["GET /api/users?id=123"]
    B["Status: 200 OK"]
    C["Value: x < 10"]
    D["Email: [email protected]"]
    E["Expression: a + b = c"]

    A --> B
    B --> C
    C --> D
    D --> E

9. Sequence Diagram

sequenceDiagram
    participant U as User
    participant W as Web App
    participant A as API
    participant D as Database

    U->>W: Open page
    W->>A: Request data
    A->>D: Query records
    D-->>A: Return records
    A-->>W: JSON response
    W-->>U: Render page

10. Sequence Diagram With Conditions

sequenceDiagram
    participant C as Client
    participant S as Server

    C->>S: Request resource

    alt Resource exists
        S-->>C: 200 OK
    else Resource missing
        S-->>C: 404 Not Found
    end

11. Class Diagram

classDiagram
    class BlogPost {
        +string title
        +string description
        +string content
        +string[] tags
        +render()
    }

    class Renderer {
        +parse()
        +renderMermaid()
        +highlightCode()
    }

    class Cache {
        +get()
        +set()
        +clear()
    }

    BlogPost --> Renderer
    Renderer --> Cache

12. State Diagram

stateDiagram-v2
    [*] --> Idle
    Idle --> Loading
    Loading --> Success
    Loading --> Error
    Error --> Loading
    Success --> Idle

13. Entity Relationship Diagram

erDiagram
    USER ||--o{ POST : writes
    POST ||--o{ COMMENT : has
    USER ||--o{ COMMENT : creates

    USER {
        int id
        string name
        string email
    }

    POST {
        int id
        string title
        string content
    }

    COMMENT {
        int id
        string content
    }

14. Git Graph

gitGraph
    commit
    commit

    branch feature
    checkout feature
    commit
    commit

    checkout main
    commit

    merge feature
    commit

15. Pie Chart

pie showData
    title Example Distribution
    "Frontend" : 35
    "Backend" : 30
    "Testing" : 20
    "Documentation" : 15

16. Large Horizontal Diagram

This diagram is intentionally wide and is useful for testing horizontal overflow, zoom, pan, and fit-to-screen behavior.

flowchart LR
    A[Source]
    B[Parser]
    C[Validator]
    D[Transformer]
    E[Renderer]
    F[Optimizer]
    G[Serializer]
    H[Cache]
    I[Network]
    J[Browser]
    K[DOM]
    L[SVG]
    M[Interaction Layer]
    N[Zoom]
    O[Pan]
    P[Fullscreen]

    A --> B --> C --> D --> E --> F --> G --> H --> I --> J --> K --> L --> M
    M --> N
    M --> O
    M --> P

17. Large Vertical Diagram

flowchart TD
    A[Input]
    B[Parse]
    C[Normalize]
    D[Validate]
    E[Transform]
    F[Render]
    G[Generate SVG]
    H[Insert Into DOM]
    I[Initialize Interaction]
    J[Ready]

    A --> B --> C --> D --> E --> F --> G --> H --> I --> J

18. Dense Diagram

This checks whether Mermaid remains readable when many connections exist.

flowchart TD
    A --> B
    A --> C
    A --> D

    B --> E
    B --> F

    C --> F
    C --> G

    D --> G
    D --> H

    E --> I
    F --> I
    F --> J
    G --> J
    G --> K
    H --> K

    I --> L
    J --> L
    K --> L

19. Normal TypeScript Code

This block should be handled by Shiki, not Mermaid.

interface BlogPost {
  title: string;
  description: string;
  content: string;
  tags: string[];
}

export async function loadPost(id: string): Promise<BlogPost> {
  const response = await fetch(`/api/posts/${id}`);

  if (!response.ok) {
    throw new Error(`Failed to load post: ${response.status}`);
  }

  return response.json();
}

20. Python Code

def fibonacci(n: int) -> int:
    if n <= 1:
        return n

    return fibonacci(n - 1) + fibonacci(n - 2)


for value in range(10):
    print(value, fibonacci(value))

21. JSON Code

{
  "title": "Mermaid Test",
  "features": {
    "mermaid": true,
    "syntaxHighlighting": true,
    "zoom": true,
    "pan": true
  }
}

22. Bash Code

bun install
bun run build
bun run dev

23. Inline Markdown Test

Normal inline code like const value = 42 should remain unaffected.

This paragraph contains bold text, italic text, a normal link, and inline code.

Blockquotes should also render normally without affecting Mermaid diagrams.

24. Lists

Mermaid diagrams should render as SVG.
Normal code blocks should use syntax highlighting.
Mermaid blocks should not receive syntax highlighting.
Diagram SVGs should remain inside the article width.
Large diagrams should not break the page layout.
Dark and light themes should render correctly.
Multiple diagrams on one page should render independently.

25. Final Mermaid Diagram

flowchart LR
    SOURCE[Markdown]
    SOURCE --> TYPE{Block type}

    TYPE -->|Mermaid| MERMAID[Mermaid.js]
    TYPE -->|Code| SHIKI[Shiki]
    TYPE -->|Text| HTML[Normal HTML]

    MERMAID --> SVG[SVG Diagram]
    SHIKI --> CODE[Highlighted Code]
    HTML --> CONTENT[Rendered Content]

    SVG --> PAGE[Article]
    CODE --> PAGE
    CONTENT --> PAGE

Expected Result

Every Mermaid block should render independently.
No Mermaid source should remain visible after successful client-side rendering.
Regular code blocks should continue using Shiki and the existing copy button.
Mermaid diagrams should not inherit unwanted pre styling such as code-block backgrounds or padding.
Large diagrams should remain contained within the article instead of forcing the whole page wider.
Light and dark theme switching should produce readable Mermaid diagrams.
Long labels and special characters should render correctly.
Sequence, class, state, ER, pie, git, and flow diagrams should all work.
Multiple Mermaid diagrams on one page should not produce duplicate IDs or interfere with one another.
Normal Markdown styling should remain unchanged.