π Related Mermaid Notes
- [[Mermaid Guide - Multiple Separate Diagrams]]
- [[AI Instructions - Mermaid Flowchart Format]]
- [[Obsidian Mermaid Flowchart Guide]]
- [[Flowchart Example (Use to give AI to structure any note)]]
Flowcharts
Basic Flowchart
graph TD
A[Start] --> B[Decision]
B -->|Yes| C[Action 1]
B -->|No| D[Action 2]
C --> E[End]
D --> E
Use: Process flows, decision trees, step-by-step procedures AI Prompt: “Create a Mermaid flowchart showing a customer service process: customer calls, agent answers, if issue resolved then end, if not resolved then escalate to supervisor.”
Subgraph Flowchart
graph TD
A[Start] --> B[Process]
subgraph "Sub Process"
B --> C[Step 1]
C --> D[Step 2]
end
D --> E[End]
Use: Complex processes with grouped steps AI Prompt: “Create a Mermaid flowchart with subprocesses showing order processing: start order, then subprocess of inventory check and payment processing, then complete order.”
Sequence Diagrams
sequenceDiagram
participant A as User
participant B as System
participant C as Database
A->>B: Login Request
B->>C: Validate Credentials
C-->>B: User Data
B-->>A: Login Success
Use: System interactions, API calls, user workflows AI Prompt: “Create a Mermaid sequence diagram showing online purchase flow: customer places order, system checks inventory, processes payment, confirms order.”
Class Diagrams
classDiagram
class User {
+String name
+String email
+login()
+logout()
}
class Admin {
+manageUsers()
}
User <|-- Admin
Use: Object-oriented design, system architecture, data models AI Prompt: “Create a Mermaid class diagram for an e-commerce system: Customer class with name, email, placeOrder method; Product class with name, price, updateStock method; Order class linking Customer and Product.”
State Diagrams
stateDiagram-v2
[*] --> Idle
Idle --> Processing : Start
Processing --> Success : Complete
Processing --> Error : Fail
Success --> [*]
Error --> Idle
Use: System states, workflow status, process lifecycle AI Prompt: “Create a Mermaid state diagram for order status: new order β processing β shipped β delivered, with cancel and return paths.”
Entity Relationship Diagrams
erDiagram
USER ||--o{ ORDER : places
ORDER ||--|{ ORDER_ITEM : contains
PRODUCT ||--o{ ORDER_ITEM : "ordered in"
USER {
int id PK
string name
string email
}
ORDER {
int id PK
date order_date
int user_id FK
}
Use: Database design, data relationships, system modeling AI Prompt: “Create a Mermaid ERD for a customer management system: Customer entity with id, name, email; Order entity with id, date, customer_id; Product entity with id, name, price; relationships between them.”
User Journey Maps
journey
title User Journey
section Discovery
Visit Website: 5: User
Browse Products: 4: User
section Purchase
Add to Cart: 3: User
Checkout: 2: User
Payment: 1: User
section Post-Purchase
Receive Product: 5: User
Leave Review: 4: User
Use: User experience mapping, customer journey analysis AI Prompt: “Create a Mermaid user journey for mobile app onboarding: download app (satisfaction 3), create account (satisfaction 4), complete profile (satisfaction 5), first purchase (satisfaction 4).”
Gantt Charts
gantt
title Project Timeline
dateFormat YYYY-MM-DD
section Phase 1
Planning :done, des1, 2024-01-01,2024-01-07
Design :active, des2, 2024-01-08, 3d
section Phase 2
Development : des3, after des2, 5d
Testing : des4, after des3, 3d
Use: Project planning, timeline visualization, task scheduling AI Prompt: “Create a Mermaid Gantt chart for a product launch with phases: Market Research (2 weeks), Product Development (8 weeks), Marketing Campaign (4 weeks), Launch (1 week).”
Pie Charts
pie title Market Share
"Company A" : 40
"Company B" : 30
"Company C" : 20
"Others" : 10
Use: Data distribution, market analysis, percentage breakdowns AI Prompt: “Create a Mermaid pie chart showing quarterly revenue breakdown: Q1 (25%), Q2 (30%), Q3 (20%), Q4 (25%).”
Git Graphs
gitGraph
commit
branch develop
checkout develop
commit
commit
checkout main
merge develop
commit
Use: Version control visualization, branch management, code history AI Prompt: “Create a Mermaid git graph showing a typical development workflow: main branch with feature branch that gets merged back.”
Mind Maps
mindmap
root((Ideas))
Technology
AI
Machine Learning
Deep Learning
Web Development
Frontend
Backend
Business
Marketing
Sales
Operations
Use: Brainstorming, concept mapping, idea organization AI Prompt: “Create a Mermaid mind map for business strategy: root is Company Goals, branches are Market Expansion (new markets, partnerships), Product Development (features, innovation), Operations (efficiency, automation).”
Timeline Diagrams
timeline
title History of Technology
1960s : First Computers
: ARPANET Created
1980s : Personal Computers
: Internet Protocol
2000s : Mobile Revolution
: Social Media
2020s : AI Revolution
: Cloud Computing
Use: Historical events, project milestones, chronological data AI Prompt: “Create a Mermaid timeline for product development: Q1 2024 (market research, competitor analysis), Q2 2024 (prototype development, user testing), Q3 2024 (beta launch, feedback collection), Q4 2024 (full launch, marketing campaign).”
Sankey Diagrams
sankey-beta
A[Source] -->|40| B[Process 1]
A -->|60| C[Process 2]
B -->|30| D[Output 1]
C -->|20| D
C -->|40| E[Output 2]
Use: Data flow, resource allocation, process optimization AI Prompt: “Create a Mermaid Sankey diagram showing how budget flows from departments to projects: Marketing (40%) to Campaign A, Marketing (60%) to Campaign B, Sales (70%) to New Clients, Sales (30%) to Retention.”
Block Diagrams
block-beta
columns 3
A["Block A"] B["Block B"] C["Block C"]
D["Block D"] E["Block E"] F["Block F"]
G["Block G"] H["Block H"] I["Block I"]
Use: System architecture, component relationships, modular design AI Prompt: “Create a Mermaid block diagram for business architecture: Frontend (customer portal, admin dashboard), Backend (API, database), External (payment gateway, email service).”
Quadrant Charts
quadrantChart
title Product Analysis
x-axis Low --> High
y-axis Low --> High
quadrant-1 High Impact, High Effort
quadrant-2 Low Impact, High Effort
quadrant-3 Low Impact, Low Effort
quadrant-4 High Impact, Low Effort
Feature A: [0.8, 0.6]
Feature B: [0.3, 0.8]
Feature C: [0.2, 0.3]
Feature D: [0.9, 0.2]
Use: Priority matrix, impact analysis, decision making AI Prompt: “Create a Mermaid quadrant chart for project prioritization: high impact/low effort (quick wins), high impact/high effort (major projects), low impact/low effort (fill-ins), low impact/high effort (questionable).”
Requirements Diagrams
requirementDiagram
requirement FunctionalReq {
id: 1
text: System shall process payments
risk: high
verifymethod: test
}
requirement NonFunctionalReq {
id: 2
text: System shall be secure
risk: medium
verifymethod: inspection
}
element System {
type: system
}
FunctionalReq - satisfies -> System
NonFunctionalReq - satisfies -> System
Use: Requirements management, system specifications, compliance tracking AI Prompt: “Create a Mermaid requirements diagram for a customer portal: functional requirements (user login, view orders, update profile), non-functional requirements (security, performance, availability), all satisfying the Customer Portal system.”
Organizational Charts
graph TD
CEO[CEO]
CEO --> VP1[VP Sales]
CEO --> VP2[VP Marketing]
CEO --> VP3[VP Operations]
VP1 --> MGR1[Sales Manager]
VP1 --> MGR2[Account Manager]
VP2 --> MGR3[Marketing Manager]
VP3 --> MGR4[Operations Manager]
Use: Company structure, reporting relationships, hierarchy visualization AI Prompt: “Create a Mermaid organizational chart for a tech startup: CEO, CTO, VP Sales, VP Marketing, with managers under each VP.”
Decision Trees
graph TD
A[Customer Inquiry] --> B{Type of Issue?}
B -->|Technical| C[Route to IT Support]
B -->|Billing| D[Route to Billing Team]
B -->|General| E[Route to Customer Service]
C --> F[Resolve Issue]
D --> F
E --> F
Use: Decision making processes, routing logic, business rules AI Prompt: “Create a Mermaid decision tree for customer support routing: if technical issue go to IT, if billing go to finance, if general go to customer service.”
Process Maps
graph LR
A[Order Received] --> B[Inventory Check]
B --> C{In Stock?}
C -->|Yes| D[Process Payment]
C -->|No| E[Backorder]
D --> F[Ship Product]
E --> G[Notify Customer]
F --> H[Order Complete]
Use: Business process documentation, workflow optimization, SOP visualization AI Prompt: “Create a Mermaid process map for order fulfillment: receive order, check inventory, process payment if in stock, ship product, complete order.”
Competitive Analysis Matrix
quadrantChart
title Competitive Analysis
x-axis Low Price --> High Price
y-axis Low Quality --> High Quality
quadrant-1 High Price, High Quality
quadrant-2 Low Price, High Quality
quadrant-3 Low Price, Low Quality
quadrant-4 High Price, Low Quality
Our Product: [0.7, 0.8]
Competitor A: [0.9, 0.6]
Competitor B: [0.3, 0.4]
Competitor C: [0.8, 0.9]
Use: Market positioning, competitive analysis, strategic planning AI Prompt: “Create a Mermaid quadrant chart comparing our product vs competitors on price and quality dimensions.”
Sales Funnel
graph TD
A[1000 Leads] --> B[500 Qualified]
B --> C[200 Demos]
C --> D[50 Proposals]
D --> E[10 Closed Deals]
style A fill:#e1f5fe
style B fill:#b3e5fc
style C fill:#81d4fa
style D fill:#4fc3f7
style E fill:#29b6f6
Use: Sales process visualization, conversion tracking, funnel analysis AI Prompt: “Create a Mermaid sales funnel showing lead progression: 1000 leads β 500 qualified β 200 demos β 50 proposals β 10 closed deals.”
Budget Allocation
pie title Annual Budget Distribution
"Marketing" : 35
"Operations" : 25
"R&D" : 20
"HR" : 10
"IT" : 10
Use: Financial planning, budget visualization, resource allocation AI Prompt: “Create a Mermaid pie chart showing department budget allocation: Marketing (35%), Operations (25%), R&D (20%), HR (10%), IT (10%).”
Customer Lifecycle
stateDiagram-v2
[*] --> Prospect
Prospect --> Lead : Marketing Campaign
Lead --> Qualified : Sales Qualification
Qualified --> Customer : Purchase
Customer --> Loyal : Repeat Purchase
Customer --> Churned : No Activity
Loyal --> Advocate : Referral
Churned --> [*]
Advocate --> [*]
Use: Customer journey mapping, lifecycle management, retention strategies AI Prompt: “Create a Mermaid state diagram showing customer lifecycle: prospect β lead β qualified β customer β loyal β advocate, with churn path.”
Risk Assessment Matrix
quadrantChart
title Risk Assessment
x-axis Low Impact --> High Impact
y-axis Low Probability --> High Probability
quadrant-1 High Impact, High Probability
quadrant-2 Low Impact, High Probability
quadrant-3 Low Impact, Low Probability
quadrant-4 High Impact, Low Probability
Data Breach: [0.9, 0.3]
Market Crash: [0.8, 0.2]
Staff Turnover: [0.6, 0.7]
Tech Failure: [0.4, 0.8]
Use: Risk management, threat assessment, mitigation planning AI Prompt: “Create a Mermaid risk matrix showing business risks: data breach (high impact, low probability), market crash (high impact, low probability), staff turnover (medium impact, high probability).”
Performance Dashboard
graph TD
A[KPI Dashboard] --> B[Revenue Metrics]
A --> C[Customer Metrics]
A --> D[Operational Metrics]
B --> B1[Monthly Revenue]
B --> B2[Growth Rate]
B --> B3[Profit Margin]
C --> C1[Customer Acquisition]
C --> C2[Retention Rate]
C --> C3[Satisfaction Score]
D --> D1[Productivity]
D --> D2[Quality Metrics]
D --> D3[Efficiency Ratio]
Use: Executive dashboards, KPI tracking, performance monitoring AI Prompt: “Create a Mermaid dashboard structure showing main KPIs: Revenue (monthly revenue, growth rate, profit margin), Customer (acquisition, retention, satisfaction), Operations (productivity, quality, efficiency).”
Note: All diagrams follow the proper Obsidian Mermaid format with separate code blocks and blank lines between each diagram type.
Created: October 11th, 2025