generate-diagram

Generate Diagram Skill

Create Mermaid diagrams from textual descriptions for architecture, flows, and data models.

Quick Start

Use this skill when:

• User requests diagram creation (/generate-diagram)
• Documenting architecture in notes
• Visualizing workflows or data relationships

Example:

User: "Create a sequence diagram for user login flow"

AI calls insert_block with:
  content_markdown="```mermaid
  sequenceDiagram
      actor User
      User->>Frontend: Enter credentials
      Frontend->>API: POST /auth/login
      API->>Database: Validate credentials
      Database-->>API: User record
      API-->>Frontend: JWT tokens
      Frontend-->>User: Redirect to dashboard
  ```"

AI responds: "[RECOMMENDED] Inserted sequence diagram showing the login flow."

Workflow

1. Parse Description

   • Identify diagram type from keywords:
     • Sequence: "flow", "interaction", "steps"
     • Class: "data model", "schema", "entities"
     • Flowchart: "decision", "process", "workflow"
     • ER: "relationships", "database", "tables"
     • Gantt: "timeline", "schedule", "milestones"

2. Extract Entities and Relationships

   • Identify actors/components/classes
   • Parse actions/dependencies/associations
   • Detect flow direction and decision points

3. Generate Mermaid Syntax

   • Use correct Mermaid diagram type
   • Format with proper indentation
   • Add labels and annotations
   • Include style customizations if requested

4. Validate Output

   • Check Mermaid syntax validity
   • Ensure diagram renders correctly
   • Add confidence tag based on completeness

Output Format

After generating the mermaid syntax, call the insert_block MCP tool to insert the diagram into the note:

insert_block(
  note_id=<current_note_id>,
  content_markdown="```mermaid\n<mermaid_syntax>\n```",
  after_block_id=<cursor_block_id or null>
)

Then respond in chat with a confidence tag and any suggestions:

[RECOMMENDED] Inserted sequence diagram showing the login flow.