Skip to content

Test: Mermaid Diagrams

1 min read

Mermaid Diagram Test

This post tests client-side Mermaid diagram rendering with 4 diagram types.

Flowchart

flowchart TD
    A[Write in Obsidian] --> B{Published?}
    B -->|Yes| C[Convert to MDX]
    B -->|No| D[Stay in Vault]
    C --> E[Build & Deploy]
    E --> F[Live on neurogenesis.dev]

Sequence Diagram

sequenceDiagram
    participant Author
    participant Obsidian
    participant VPS
    participant GitHub
    participant Blog

    Author->>Obsidian: Write post
    Obsidian->>VPS: Sync via Obsidian Sync
    VPS->>GitHub: Git push (cron)
    GitHub->>Blog: repository_dispatch
    Blog->>Blog: Convert, build, deploy

State Diagram

stateDiagram-v2
    [*] --> Draft
    Draft --> Review: Submit for review
    Review --> Approved: Passes review
    Review --> Draft: Needs changes
    Approved --> Executing: Start implementation
    Executing --> Complete: All ACs pass
    Complete --> [*]

Pie Chart

pie title Blog Tech Stack
    "Astro" : 40
    "Tailwind CSS" : 25
    "TypeScript" : 20
    "Markdown/MDX" : 15
Share

You might also like

Stay in the loop

Get notified when I publish new posts. No spam, unsubscribe anytime.

Your email is stored by ConvertKit. Privacy policy

Comments