Skip to main content

Practical Diagram Examples

Real-world examples of Mermaid diagrams for common note-taking scenarios.

When to Use Diagrams​

Diagrams excel at showing:

  • Processes - Step-by-step workflows
  • Relationships - How things connect
  • Hierarchies - Organization structures
  • Timelines - Project schedules
  • Decisions - Logic trees

Quick Reference​

Basic Flowchart​

Code:

```mermaid
graph TD
    A[Start] --> B[Process]
    B --> C[End]
```

Project Management​

Project Timeline​

Use for: Sprint planning, roadmaps, project schedules

Task Dependencies​

Use for: Understanding task order, identifying blockers

Decision Making​

Decision Tree​

Use for: Product decisions, process flows, troubleshooting guides

Risk Assessment​

Technical Documentation​

System Architecture​

Use for: System overviews, infrastructure diagrams

API Flow​

Use for: API documentation, integration guides

Data Flow​

Team & Organization​

Team Structure​

Use for: Org charts, reporting structures

Stakeholder Map​

Meeting Notes​

Discussion Flow​

Action Item Tracking​

Personal Planning​

Goal Breakdown​

Habit Tracking​

State Diagrams​

Order Status​

Feature Lifecycle​

Pie Charts​

Time Allocation​

Budget Breakdown​

Tips for Better Diagrams​

Keep It Simple​

  • Fewer nodes - 5-10 is ideal
  • Clear labels - Short, descriptive
  • One concept - Split complex diagrams

Use Color Purposefully​

Add Context​

Use notes and subgraphs to group related items:

Troubleshooting​

Diagram Not Rendering?​

  1. Check syntax at mermaid.live
  2. Ensure proper code fence: ```mermaid
  3. Check for missing closing ```
  4. Verify node names don't have special characters

Layout Issues?​

  • Try different direction: TD, LR, BT, RL
  • Simplify connections
  • Use subgraphs to organize

Text Cut Off?​

  • Shorten labels
  • Use abbreviations
  • Split into multiple diagrams

Learn More​