1# Mermaid Diagram Templates
2 
3Copy-paste-ready Mermaid diagrams for visual sitemaps. Customize node labels and connections for your site.
4 
5---
6 
7## Basic Hierarchy
8 
9Simple top-down page hierarchy.
10 
11```mermaid
12graph TD
13    HOME["Homepage<br/>/"] --> FEAT["Features<br/>/features"]
14    HOME --> PRICE["Pricing<br/>/pricing"]
15    HOME --> BLOG["Blog<br/>/blog"]
16    HOME --> ABOUT["About<br/>/about"]
17 
18    FEAT --> F1["Analytics<br/>/features/analytics"]
19    FEAT --> F2["Automation<br/>/features/automation"]
20    FEAT --> F3["Integrations<br/>/features/integrations"]
21 
22    BLOG --> B1["Post: SEO Guide<br/>/blog/seo-guide"]
23    BLOG --> B2["Post: CRO Tips<br/>/blog/cro-tips"]
24```
25 
26---
27 
28## Hierarchy with Navigation Zones
29 
30Uses subgraphs to show which pages appear in which navigation area.
31 
32```mermaid
33graph TD
34    subgraph "Header Nav"
35        HOME["Homepage"]
36        FEAT["Features"]
37        PRICE["Pricing"]
38        BLOG["Blog"]
39        CTA["Get Started ★"]
40    end
41 
42    subgraph "Feature Pages"
43        F1["Analytics"]
44        F2["Automation"]
45        F3["Integrations"]
46    end
47 
48    subgraph "Footer Nav"
49        ABOUT["About"]
50        CAREERS["Careers"]
51        CONTACT["Contact"]
52        PRIVACY["Privacy"]
53        TERMS["Terms"]
54    end
55 
56    HOME --> FEAT
57    HOME --> PRICE
58    HOME --> BLOG
59    FEAT --> F1
60    FEAT --> F2
61    FEAT --> F3
62    HOME --> ABOUT
63    ABOUT --> CAREERS
64    HOME --> CONTACT
65```
66 
67---
68 
69## Hierarchy with URL Labels
70 
71Each node shows the page name and URL path.
72 
73```mermaid
74graph TD
75    HOME["Homepage<br/><small>/</small>"] --> PROD["Product<br/><small>/product</small>"]
76    HOME --> PRICE["Pricing<br/><small>/pricing</small>"]
77    HOME --> BLOG["Blog<br/><small>/blog</small>"]
78    HOME --> DOCS["Docs<br/><small>/docs</small>"]
79    HOME --> ABOUT["About<br/><small>/about</small>"]
80 
81    PROD --> P1["Analytics<br/><small>/product/analytics</small>"]
82    PROD --> P2["Reports<br/><small>/product/reports</small>"]
83 
84    DOCS --> D1["Getting Started<br/><small>/docs/getting-started</small>"]
85    DOCS --> D2["API Reference<br/><small>/docs/api</small>"]
86```
87 
88---
89 
90## Hub-and-Spoke Content Model
91 
92Shows a hub page connected to spoke articles, with spokes linking to each other.
93 
94```mermaid
95graph TD
96    HUB["SEO Guide<br/>(Hub Page)"]
97 
98    HUB --> S1["Keyword Research"]
99    HUB --> S2["On-Page SEO"]
100    HUB --> S3["Technical SEO"]
101    HUB --> S4["Link Building"]
102 
103    S1 -.-> S2
104    S2 -.-> S3
105    S3 -.-> S4
106 
107    style HUB fill:#f9f,stroke:#333,stroke-width:2px
108```
109 
110Legend:
111- Solid lines = primary hub-spoke links
112- Dashed lines = cross-links between spokes
113 
114---
115 
116## Internal Linking Flow
117 
118Shows how different site sections link to each other.
119 
120```mermaid
121graph LR
122    subgraph "Marketing"
123        HOME["Homepage"]
124        FEAT["Features"]
125        PRICE["Pricing"]
126    end
127 
128    subgraph "Content"
129        BLOG["Blog"]
130        GUIDE["Guides"]
131        CASE["Case Studies"]
132    end
133 
134    subgraph "Product"
135        DOCS["Docs"]
136        API["API Ref"]
137        CHANGE["Changelog"]
138    end
139 
140    BLOG --> FEAT
141    BLOG --> CASE
142    CASE --> FEAT
143    CASE --> PRICE
144    FEAT --> DOCS
145    GUIDE --> BLOG
146    GUIDE --> DOCS
147    HOME --> FEAT
148    HOME --> BLOG
149    HOME --> CASE
150```
151 
152---
153 
154## Before/After Restructuring
155 
156Compare current and proposed site structures side by side.
157 
158```mermaid
159graph TD
160    subgraph "Before"
161        B_HOME["Homepage"] --> B_P1["Page 1"]
162        B_HOME --> B_P2["Page 2"]
163        B_HOME --> B_P3["Page 3"]
164        B_HOME --> B_P4["Page 4"]
165        B_HOME --> B_P5["Page 5"]
166        B_HOME --> B_P6["Page 6"]
167        B_HOME --> B_P7["Page 7"]
168        B_HOME --> B_P8["Page 8"]
169    end
170 
171    subgraph "After"
172        A_HOME["Homepage"] --> A_S1["Features"]
173        A_HOME --> A_S2["Resources"]
174        A_HOME --> A_S3["Company"]
175        A_S1 --> A_P1["Feature A"]
176        A_S1 --> A_P2["Feature B"]
177        A_S2 --> A_P3["Blog"]
178        A_S2 --> A_P4["Guides"]
179        A_S3 --> A_P5["About"]
180        A_S3 --> A_P6["Contact"]
181    end
182```
183 
184---
185 
186## Color-Coding Conventions
187 
188Use styles to highlight page status, priority, or type.
189 
190```mermaid
191graph TD
192    HOME["Homepage"] --> FEAT["Features"]
193    HOME --> PRICE["Pricing"]
194    HOME --> BLOG["Blog"]
195    HOME --> NEW["New Section"]
196    HOME --> REMOVE["Deprecated Page"]
197 
198    FEAT --> F1["Existing Feature"]
199    FEAT --> F2["New Feature"]
200 
201    style HOME fill:#4CAF50,color:#fff
202    style PRICE fill:#4CAF50,color:#fff
203    style FEAT fill:#4CAF50,color:#fff
204    style BLOG fill:#4CAF50,color:#fff
205    style F1 fill:#4CAF50,color:#fff
206    style NEW fill:#2196F3,color:#fff
207    style F2 fill:#2196F3,color:#fff
208    style REMOVE fill:#f44336,color:#fff
209```
210 
211Color key:
212- **Green** (`#4CAF50`): Existing pages (no changes)
213- **Blue** (`#2196F3`): New pages to create
214- **Red** (`#f44336`): Pages to remove or redirect
215- **Yellow** (`#FFC107`): Pages to restructure or move
216- **Purple** (`#9C27B0`): High-priority / CTA pages
217