Mermaid Rendering Test

Mermaid Rendering Test

This post tests Mermaid rendering, Shiki syntax highlighting, and interactive SVG behavior.

Simple Flowchart

flowchart LR
    A[Markdown] --> B[remarkParse]
    B --> C[remarkRehype]
    C --> D[rehypeMermaid]
    D --> E[Inline SVG]
    E --> F[rehypeShiki]
    F --> G[HTML]

Blog Rendering Architecture

flowchart TD
    A["Blog Markdown"] --> B["Build Script"]

    B --> C["remarkParse"]
    C --> D["remarkRehype"]

    D --> E{"Content"}

    E -->|Mermaid block| F["rehype-mermaid"]
    E -->|Code block| G["Shiki"]
    E -->|Normal Markdown| H["HTML"]

    F --> I["Inline SVG"]
    G --> J["Highlighted HTML"]

    I --> K["Compiled Blog HTML"]
    J --> K
    H --> K

    K --> L["Static CDN"]
    L --> M["Next.js"]
    M --> N["SVG Viewer"]

Sequence Diagram

sequenceDiagram
    participant U as User
    participant N as Next.js
    participant C as Static CDN
    participant B as Build Pipeline

    B->>B: Parse Markdown
    B->>B: Render Mermaid
    B->>B: Highlight code
    B->>C: Publish HTML

    U->>N: Open blog
    N->>C: Fetch compiled content
    C-->>N: Return HTML + SVG
    N-->>U: Render article

Large Diagram for Zoom and Pan Testing

flowchart LR

    USER["Browser"]

    subgraph FRONTEND["Next.js"]
        PAGE["Blog Page"]
        FETCHER["Content Fetcher"]
        VIEWER["SVG Viewer"]
        CONTROLS["Zoom / Pan / Fit"]
    end

    subgraph CDN["Static Content"]
        META["Metadata"]
        HTML["Compiled HTML"]
        SVG["Mermaid SVG"]
    end

    subgraph BUILD["Build Pipeline"]
        MD["Markdown"]
        REMARK["Remark"]
        REHYPE["Rehype"]
        MERMAID["rehype-mermaid"]
        SHIKI["Shiki"]
        OUTPUT["Generated Output"]
    end

    MD --> REMARK
    REMARK --> REHYPE

    REHYPE --> MERMAID
    REHYPE --> SHIKI

    MERMAID --> SVG
    SHIKI --> OUTPUT
    SVG --> OUTPUT

    OUTPUT --> HTML
    HTML --> CDN
    META --> CDN

    USER --> PAGE
    PAGE --> FETCHER
    FETCHER --> CDN
    CDN --> FETCHER

    PAGE --> VIEWER
    VIEWER --> CONTROLS

    CONTROLS --> USER

Normal TypeScript Code

This block should be handled by Shiki and should still show your copy button.

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

export async function getBlog(slug: string): Promise<BlogPost> {
  const response = await fetch(
    `https://static.sivothayan.com/blogs/${slug}.json`
  );

  if (!response.ok) {
    throw new Error('Blog not found');
  }

  return response.json();
}

Python Test

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

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


print(fibonacci(10))

Expected Result

1. Mermaid blocks should become inline SVG.
2. Mermaid blocks should not be syntax highlighted by Shiki.
3. TypeScript and Python blocks should use Shiki.
4. Normal code blocks should keep the copy button.
5. The large Mermaid diagram should be useful for testing zoom, pan, reset, and fit-to-screen.
6. Regular Markdown should render normally.