ContextQMD
Back to Marketingskills

Mermaid Diagram Templates

skills/site-architecture/references/mermaid-templates.md

1.10.04.8 KB
Original Source

Mermaid Diagram Templates

Copy-paste-ready Mermaid diagrams for visual sitemaps. Customize node labels and connections for your site.

Basic Hierarchy

Simple top-down page hierarchy.

mermaid
graph TD
    HOME["Homepage
/"] --> FEAT["Features
/features"]
    HOME --> PRICE["Pricing
/pricing"]
    HOME --> BLOG["Blog
/blog"]
    HOME --> ABOUT["About
/about"]

    FEAT --> F1["Analytics
/features/analytics"]
    FEAT --> F2["Automation
/features/automation"]
    FEAT --> F3["Integrations
/features/integrations"]

    BLOG --> B1["Post: SEO Guide
/blog/seo-guide"]
    BLOG --> B2["Post: CRO Tips
/blog/cro-tips"]

Hierarchy with Navigation Zones

Uses subgraphs to show which pages appear in which navigation area.

mermaid
graph TD
    subgraph "Header Nav"
        HOME["Homepage"]
        FEAT["Features"]
        PRICE["Pricing"]
        BLOG["Blog"]
        CTA["Get Started ★"]
    end

    subgraph "Feature Pages"
        F1["Analytics"]
        F2["Automation"]
        F3["Integrations"]
    end

    subgraph "Footer Nav"
        ABOUT["About"]
        CAREERS["Careers"]
        CONTACT["Contact"]
        PRIVACY["Privacy"]
        TERMS["Terms"]
    end

    HOME --> FEAT
    HOME --> PRICE
    HOME --> BLOG
    FEAT --> F1
    FEAT --> F2
    FEAT --> F3
    HOME --> ABOUT
    ABOUT --> CAREERS
    HOME --> CONTACT

Hierarchy with URL Labels

Each node shows the page name and URL path.

mermaid
graph TD
    HOME["Homepage
<small>/</small>"] --> PROD["Product
<small>/product</small>"]
    HOME --> PRICE["Pricing
<small>/pricing</small>"]
    HOME --> BLOG["Blog
<small>/blog</small>"]
    HOME --> DOCS["Docs
<small>/docs</small>"]
    HOME --> ABOUT["About
<small>/about</small>"]

    PROD --> P1["Analytics
<small>/product/analytics</small>"]
    PROD --> P2["Reports
<small>/product/reports</small>"]

    DOCS --> D1["Getting Started
<small>/docs/getting-started</small>"]
    DOCS --> D2["API Reference
<small>/docs/api</small>"]

Hub-and-Spoke Content Model

Shows a hub page connected to spoke articles, with spokes linking to each other.

mermaid
graph TD
    HUB["SEO Guide
(Hub Page)"]

    HUB --> S1["Keyword Research"]
    HUB --> S2["On-Page SEO"]
    HUB --> S3["Technical SEO"]
    HUB --> S4["Link Building"]

    S1 -.-> S2
    S2 -.-> S3
    S3 -.-> S4

    style HUB fill:#f9f,stroke:#333,stroke-width:2px

Legend:

  • Solid lines = primary hub-spoke links
  • Dashed lines = cross-links between spokes

Internal Linking Flow

Shows how different site sections link to each other.

mermaid
graph LR
    subgraph "Marketing"
        HOME["Homepage"]
        FEAT["Features"]
        PRICE["Pricing"]
    end

    subgraph "Content"
        BLOG["Blog"]
        GUIDE["Guides"]
        CASE["Case Studies"]
    end

    subgraph "Product"
        DOCS["Docs"]
        API["API Ref"]
        CHANGE["Changelog"]
    end

    BLOG --> FEAT
    BLOG --> CASE
    CASE --> FEAT
    CASE --> PRICE
    FEAT --> DOCS
    GUIDE --> BLOG
    GUIDE --> DOCS
    HOME --> FEAT
    HOME --> BLOG
    HOME --> CASE

Before/After Restructuring

Compare current and proposed site structures side by side.

mermaid
graph TD
    subgraph "Before"
        B_HOME["Homepage"] --> B_P1["Page 1"]
        B_HOME --> B_P2["Page 2"]
        B_HOME --> B_P3["Page 3"]
        B_HOME --> B_P4["Page 4"]
        B_HOME --> B_P5["Page 5"]
        B_HOME --> B_P6["Page 6"]
        B_HOME --> B_P7["Page 7"]
        B_HOME --> B_P8["Page 8"]
    end

    subgraph "After"
        A_HOME["Homepage"] --> A_S1["Features"]
        A_HOME --> A_S2["Resources"]
        A_HOME --> A_S3["Company"]
        A_S1 --> A_P1["Feature A"]
        A_S1 --> A_P2["Feature B"]
        A_S2 --> A_P3["Blog"]
        A_S2 --> A_P4["Guides"]
        A_S3 --> A_P5["About"]
        A_S3 --> A_P6["Contact"]
    end

Color-Coding Conventions

Use styles to highlight page status, priority, or type.

mermaid
graph TD
    HOME["Homepage"] --> FEAT["Features"]
    HOME --> PRICE["Pricing"]
    HOME --> BLOG["Blog"]
    HOME --> NEW["New Section"]
    HOME --> REMOVE["Deprecated Page"]

    FEAT --> F1["Existing Feature"]
    FEAT --> F2["New Feature"]

    style HOME fill:#4CAF50,color:#fff
    style PRICE fill:#4CAF50,color:#fff
    style FEAT fill:#4CAF50,color:#fff
    style BLOG fill:#4CAF50,color:#fff
    style F1 fill:#4CAF50,color:#fff
    style NEW fill:#2196F3,color:#fff
    style F2 fill:#2196F3,color:#fff
    style REMOVE fill:#f44336,color:#fff

Color key:

  • Green (#4CAF50): Existing pages (no changes)
  • Blue (#2196F3): New pages to create
  • Red (#f44336): Pages to remove or redirect
  • Yellow (#FFC107): Pages to restructure or move
  • Purple (#9C27B0): High-priority / CTA pages