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.
B0
Hierarchy with Navigation Zones
Uses subgraphs to show which pages appear in which navigation area.
B1
Hierarchy with URL Labels
Each node shows the page name and URL path.
B2
Hub-and-Spoke Content Model
Shows a hub page connected to spoke articles, with spokes linking to each other.
B3
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.
B4
Before/After Restructuring
Compare current and proposed site structures side by side.
B5
Color-Coding Conventions
Use styles to highlight page status, priority, or type.
B6
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