Skip to main content

Mermaid Diagrams in Yooz Notes

Yooz Notes supports Mermaid.js for creating beautiful diagrams directly in your notes.

What is Mermaid?​

Mermaid is a JavaScript-based diagramming tool that renders text definitions into diagrams. Think "markdown for diagrams" - simple syntax, powerful visualizations.

Creating a Diagram​

To create a Mermaid diagram in Yooz Notes:

  1. Type ```mermaid (code fence with mermaid language)
  2. Add your diagram code
  3. Close with ```

The diagram renders automatically!

Supported Diagram Types​

1. Flowcharts​

Perfect for processes, decision trees, and workflows.

Example:

Code:

graph TD
    A[Start] --> B{Is it encrypted?}
    B -->|Yes| C[Store locally]
    B -->|No| D[Encrypt first]
    D --> C
    C --> E[Sync to cloud]
    E --> F[End]

    style C fill:#4CAF50
    style D fill:#FF9800
    style E fill:#2196F3

Graph Directions:

  • TD or TB - Top to bottom
  • BT - Bottom to top
  • LR - Left to right
  • RL - Right to left

2. Sequence Diagrams​

Great for API interactions, user flows, and communication protocols.

Example:

Code:

sequenceDiagram
    participant User
    participant App
    participant Storage
    participant Encryption

    User->>App: Create note
    App->>Encryption: Encrypt content
    Encryption-->>App: Encrypted blob
    App->>Storage: Store encrypted note
    Storage-->>User: ✓ Saved

    Note over App,Storage: All local, no network

Arrows:

  • -> Solid line without arrow
  • --> Dotted line without arrow
  • ->> Solid line with arrowhead
  • -->> Dotted line with arrowhead

3. Class Diagrams​

Useful for software architecture, data models, and relationships.

Example:

Code:

classDiagram
    class Note {
        +String id
        +String title
        +String content
        +Date created
        +Date modified
        +encrypt()
        +decrypt()
        +save()
    }

    class Tag {
        +String name
        +String color
        +List~Note~ notes
    }

    class Encryption {
        +encrypt(data, key)
        +decrypt(data, key)
        +deriveKey(password)
    }

    Note "1" --> "*" Tag : has
    Note --> Encryption : uses

4. State Diagrams​

Perfect for state machines, app states, and user journeys.

Example:

Code:

stateDiagram-v2
    [*] --> Unlocked
    Unlocked --> Locked : Set password
    Locked --> Unlocked : Correct password
    Locked --> Locked : Wrong password
    Unlocked --> AutoLocked : Timeout
    AutoLocked --> Unlocked : Authenticate
    Unlocked --> [*]

    note right of Locked
        AES-256-GCM encryption
        PBKDF2 600k iterations
    end note

5. Gantt Charts​

Great for project planning, roadmaps, and timelines.

Example:

Code:

gantt
    title Yooz Notes Roadmap
    dateFormat YYYY-MM-DD
    section MVP1
    Editor & Tags           :done, 2025-09-01, 30d
    Search & Persistence    :done, 2025-10-01, 15d
    section MVP1.5
    Encryption             :done, 2025-10-15, 10d
    PWA & Responsive       :active, 2025-10-25, 7d
    Mobile Apps            :2025-11-01, 14d
    section MVP2
    Google Drive Sync      :2026-01-01, 30d
    Backlinks              :2026-02-01, 20d
    Templates              :2026-02-21, 15d

6. Pie Charts​

Simple data visualization for proportions and percentages.

Example:

Code:

pie title Storage Distribution
    "Notes" : 45
    "Images" : 25
    "Diagrams" : 20
    "Metadata" : 10

7. Entity Relationship Diagrams​

Database schema and data relationships.

Example:

Code:

erDiagram
    NOTE ||--o{ TAG : has
    NOTE {
        string id PK
        string title
        string content
        datetime created
        datetime modified
        boolean encrypted
    }
    TAG {
        string name PK
        string color
    }
    NOTE }o--|| USER : belongs_to
    USER {
        string id PK
        string email
        string master_key
    }

8. Git Graphs​

Visualize git workflows and branching strategies.

Example:

Code:

gitGraph
    commit id: "Initial commit"
    branch develop
    checkout develop
    commit id: "Add editor"
    commit id: "Add tags"
    checkout main
    merge develop tag: "v1.0"
    branch feature-encryption
    checkout feature-encryption
    commit id: "Implement crypto"
    commit id: "Add auto-lock"
    checkout develop
    merge feature-encryption
    checkout main
    merge develop tag: "v1.5"

9. User Journey​

Map user experiences and touchpoints.

Styling & Customization​

Node Shapes​

Flowcharts:

  • A[Rectangle] - Rectangle
  • B(Rounded) - Rounded edges
  • C([Stadium]) - Stadium-shaped
  • D[[Subroutine]] - Subroutine
  • E[(Database)] - Cylinder
  • F((Circle)) - Circle
  • G>Asymmetric] - Asymmetric shape
  • H{Diamond} - Diamond (decision)
  • I{{Hexagon}} - Hexagon

Colors​

Style nodes with fill colors:

style NodeID fill:#COLOR

Example:

Tips & Best Practices​

1. Keep It Simple​

Start with simple diagrams and add complexity as needed.

2. Use Comments​

Add comments in your Mermaid code (lines starting with %%):

graph TD
    %% This is a comment
    A[Start] --> B[End]

3. Subgraphs for Organization​

Group related nodes:

4. Combine with Markdown​

Mix diagrams with regular text for comprehensive documentation:

Example: Note Creation Flow

Our app follows this data flow:

Key components:

  • UI: The note editor interface
  • State: Application state management
  • Storage: Encrypted local storage
  • Encryption: Secure encryption layer

Common Use Cases​

Project Planning​

Use Gantt charts for roadmaps and timelines.

System Architecture​

Flowcharts and sequence diagrams for technical documentation.

Data Modeling​

ER diagrams and class diagrams for database design.

Process Documentation​

Flowcharts and state diagrams for workflows.

User Flows​

Sequence diagrams and user journeys for UX design.

Troubleshooting​

Diagram not rendering?

  • Check syntax (use Mermaid Live Editor to test)
  • Ensure proper code fence: ```mermaid
  • Verify closing fence: ```

Complex diagram slow?

  • Simplify by breaking into multiple diagrams
  • Reduce number of nodes and connections
  • Use subgraphs to organize

Learn More​

Ready to create amazing diagrams? Open Yooz Notes and start diagramming!