GitHub-Style Mermaid Diagrams in Your Blog

Using Mermaid Diagrams Just Like on GitHub

If you’ve ever created diagrams on GitHub, you’ll feel right at home with our blog’s Mermaid integration. Just like on GitHub, you can create diagrams using markdown code blocks with the mermaid language identifier.

Simple Flowchart Example

Here’s a simple flowchart showing the CI/CD process:

graph TD
    A[Code Change] -->|Git Push| B[CI Trigger]
    B --> C{Tests Pass?}
    C -->|Yes| D[Build]
    C -->|No| E[Notify Developer]
    D --> F[Deploy to Staging]
    F --> G{Manual QA}
    G -->|Pass| H[Deploy to Production]
    G -->|Fail| E

Sequence Diagram Example

Sequence diagrams are perfect for illustrating the flow of messages between systems:

sequenceDiagram
    User->>Browser: Enter URL
    Browser->>DNS: Lookup domain
    DNS-->>Browser: Return IP address
    Browser->>Server: HTTP request
    Server->>Database: Query data
    Database-->>Server: Return data
    Server-->>Browser: HTTP response
    Browser->>User: Display page

Class Diagram Example

Class diagrams help visualize object-oriented structures:

classDiagram
    class Component {
        +props: object
        +state: object
        +render()
        +componentDidMount()
    }
    class PureComponent {
        +shouldComponentUpdate()
    }
    class FunctionComponent {
        +props: object
        +useHooks()
    }
    Component <|-- PureComponent
    Component <|-- FunctionComponent

State Diagram Example

State diagrams are great for showing state transitions:

stateDiagram-v2
    [*] --> Idle
    Idle --> Loading: fetchData()
    Loading --> Success: data received
    Loading --> Error: timeout/network error
    Success --> Idle: reset()
    Error --> Idle: reset()
    Error --> Loading: retry()

Using GitHub-Style Syntax vs. Component Syntax

Our blog supports two ways to use Mermaid diagrams:

1. GitHub Style (Code Block)

\```mermaid
graph TD
    A[Start] --> B[End]
\```

2. Component Style

import MermaidDiagram from '/src/components/MermaidDiagram';

<MermaidDiagram 
  chart={`
    graph TD
      A[Start] --> B[End]
  `}
  caption="Optional caption"
/>

When to Use Each Style

• GitHub Style is simpler and familiar to GitHub users. It’s great for most simple diagrams.
• Component Style gives you more control with props like captions and custom styling.

Conclusion

With Mermaid diagrams in your technical blog posts, you can communicate complex ideas more effectively. Whether you prefer the GitHub-style code blocks or the more powerful component approach, you now have the tools to create beautiful visualizations right in your content.

pie title What readers remember
    "Text alone" : 10
    "Text with diagrams" : 90