feat: classy dark one-pager with modal, webhook, shiny gold, sticky nav
This commit is contained in:
oliver
@@ -0,0 +1,216 @@
|
||||
# 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<br/>/"] --> FEAT["Features<br/>/features"]
|
||||
HOME --> PRICE["Pricing<br/>/pricing"]
|
||||
HOME --> BLOG["Blog<br/>/blog"]
|
||||
HOME --> ABOUT["About<br/>/about"]
|
||||
|
||||
FEAT --> F1["Analytics<br/>/features/analytics"]
|
||||
FEAT --> F2["Automation<br/>/features/automation"]
|
||||
FEAT --> F3["Integrations<br/>/features/integrations"]
|
||||
|
||||
BLOG --> B1["Post: SEO Guide<br/>/blog/seo-guide"]
|
||||
BLOG --> B2["Post: CRO Tips<br/>/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<br/><small>/</small>"] --> PROD["Product<br/><small>/product</small>"]
|
||||
HOME --> PRICE["Pricing<br/><small>/pricing</small>"]
|
||||
HOME --> BLOG["Blog<br/><small>/blog</small>"]
|
||||
HOME --> DOCS["Docs<br/><small>/docs</small>"]
|
||||
HOME --> ABOUT["About<br/><small>/about</small>"]
|
||||
|
||||
PROD --> P1["Analytics<br/><small>/product/analytics</small>"]
|
||||
PROD --> P2["Reports<br/><small>/product/reports</small>"]
|
||||
|
||||
DOCS --> D1["Getting Started<br/><small>/docs/getting-started</small>"]
|
||||
DOCS --> D2["API Reference<br/><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<br/>(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
|
||||
Reference in New Issue
Block a user