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

2. Top-to-Bottom Flowchart

3. Flowchart With Different Node Shapes

4. Labels and Edge Styles

5. Subgraphs

6. Nested Subgraphs

7. Long Labels

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

8. Special Characters

9. Sequence Diagram

10. Sequence Diagram With Conditions

11. Class Diagram

12. State Diagram

13. Entity Relationship Diagram

14. Git Graph

15. Pie Chart

16. Large Horizontal Diagram

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

17. Large Vertical Diagram

18. Dense Diagram

This checks whether Mermaid remains readable when many connections exist.

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

Expected Result

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