article

Charts & Diagrams with Mermaid

Blog Team

May 28, 20262 min read|

A demonstration of Mermaid diagram support in our blog. Includes flowcharts, sequence diagrams, and more.

Mermaid Diagrams

Our blog now supports Mermaid diagrams directly in Markdown code blocks. Just write:

graph TD
    A[Start] --> B{Is it working?}
    B -->|Yes| C[Great!]
    B -->|No| D[Debug]
    D --> E[Fix Issues]
    E --> B
    C --> F[Deploy]

Flowchart Example

flowchart LR
    subgraph Frontend
        A[React App]
        B[Next.js]
    end
    subgraph Backend
        C[API Routes]
        D[Database]
    end
    A --> B
    B --> C
    C --> D

Sequence Diagram

sequenceDiagram
    participant User
    participant Browser
    participant Server
    User->>Browser: Open /writing
    Browser->>Server: GET posts
    Server-->>Browser: JSON data
    Browser->>Browser: Render list
    User->>Browser: Click post
    Browser->>Browser: Show content

Code Highlighting

With Shiki (rehype-pretty-code), code blocks look stunning:

// Example: Blog post loader
async function getPost(slug: string): Promise<Post | null> {
  const content = await readFile(`writing/${slug}.md`)
  if (!content) return null
  
  const { meta, body } = parseFrontmatter(content)
  return { meta, content: body }
}

Tables