[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6EMZ2HB60B9S2FE44A2DEWF":3,"skill-same:01M6EMZ2HB60B9S2FE44A2DEWF":161},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":16,"categories":17,"keywords":18,"publishedAt":33,"linkOnly":34,"markdownContent":35,"markdownBody":36,"frontMatter":37,"refName":38,"commitSha":39,"skillDirectory":40,"forksCount":41,"repositoryHtmlUrl":42,"repositoryHomepageUrl":43,"ownerHtmlUrl":44,"ownerBlogUrl":6,"ownerDescription":45,"updatedAt":46,"install":47,"resources":60},"01M6EMZ2HB60B9S2FE44A2DEWF","mermaid-diagramming",null,"Create Mermaid diagrams in Obsidian including flowcharts, sequence diagrams, class diagrams, and more. Use when visualizing processes, system architectures, workflows, or any structured relationships in Obsidian notes.","ComeOnOliver\u002Fskillshub","ComeOnOliver","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F43215937?v=4","01M6E5JNFECJAAVFE0W7SMWWD2","Haoran Shu","01M6E5JNNDQS7AJZDYFQ8TPZCK",66,"MIT","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Faiskillstore\u002Fmarketplace\u002Fbityoungjae\u002Fmermaid-diagramming\u002FSKILL.md",[],[19,20,21,22,23,24,25,26,27,28,29,30,31,32],"mermaid","mermaid diagramming","mermaid diagrams","obsidian","workflows","notes","create","system","use","diagrams","relationships","structured","architectures","processes","2026-11-10 10:12:30",false,"---\nname: mermaid-diagramming\ndescription: Create Mermaid diagrams in Obsidian including flowcharts, sequence diagrams, class diagrams, and more. Use when visualizing processes, system architectures, workflows, or any structured relationships in Obsidian notes.\n---\n\n# Mermaid Diagramming in Obsidian\n\nObsidian has built-in Mermaid support. Use fenced code blocks with `mermaid` language identifier.\n\nFor common syntax (styling, comments, themes), see [reference.md](reference.md).\n\n## ⚠️ Obsidian-Specific Constraints\n\n**Rendering Differences**: Obsidian's Mermaid version may lag behind mermaid.js releases. Some cutting-edge features may not work.\n\n**Theme Interaction**: Diagram colors adapt to Obsidian theme. Use explicit styles for consistent appearance across themes.\n\n**Performance**: Very large diagrams (50+ nodes) may slow down rendering. Split into multiple diagrams if needed.\n\n**Export**: PDF export converts diagrams to images. For external sharing, capture as PNG\u002FSVG.\n\n**No JavaScript**: Click events and JavaScript callbacks are disabled for security.\n\n---\n\n## Diagram Selection Guide\n\n| Use Case | Diagram Type | Keyword |\n|----------|--------------|---------|\n| Process flow, decision trees | Flowchart | `flowchart` |\n| API calls, message passing | Sequence | `sequenceDiagram` |\n| OOP design, relationships | Class | `classDiagram` |\n| Project timeline, scheduling | Gantt | `gantt` |\n| State machine, lifecycle | State | `stateDiagram-v2` |\n| Git branching strategy | Gitgraph | `gitGraph` |\n| Brainstorming, hierarchies | Mindmap | `mindmap` |\n| Proportions, percentages | Pie Chart | `pie` |\n| Database schema, entities | ER Diagram | `erDiagram` |\n| User experience steps, satisfaction | User Journey | `journey` |\n| Historical events, milestones | Timeline | `timeline` |\n| Priority matrix, 2D positioning | Quadrant Chart | `quadrantChart` |\n| Flow visualization, proportional bands | Sankey Diagram | `sankey-beta` |\n| Numerical data visualization | XY Chart | `xychart-beta` |\n| Precise element positioning, layouts | Block Diagram | `block-beta` |\n| Cloud services, service relationships | Architecture | `architecture-beta` |\n\n---\n\n## Quick Start Examples\n\n### Flowchart\n\n```mermaid\nflowchart TD\n    A[Start] --> B{Decision}\n    B -->|Yes| C[Action 1]\n    B -->|No| D[Action 2]\n    C --> E[End]\n    D --> E\n```\n\n**Key syntax:**\n- Direction: `TD` (top-down), `LR` (left-right), `BT`, `RL`\n- Shapes: `[rect]`, `(rounded)`, `{diamond}`, `[(cylinder)]`, `((circle))`\n- Arrows: `-->`, `-.->` (dotted), `==>` (thick)\n- Labels: `-->|text|` or `-- text -->`\n\nFor details: [flowchart.md](flowchart.md)\n\n---\n\n### Sequence Diagram\n\n```mermaid\nsequenceDiagram\n    participant C as Client\n    participant S as Server\n    participant D as Database\n\n    C->>S: HTTP Request\n    activate S\n    S->>D: Query\n    D-->>S: Result\n    S-->>C: Response\n    deactivate S\n```\n\n**Key syntax:**\n- Arrows: `->>` (sync), `-->>` (response), `-)` (async)\n- Activation: `activate`\u002F`deactivate` or `+`\u002F`-` suffix\n- Control: `loop`, `alt`\u002F`else`, `opt`, `par`\u002F`and`, `critical`\n- Notes: `Note right of A: text`, `Note over A,B: text`\n\nFor details: [sequence.md](sequence.md)\n\n---\n\n### Class Diagram\n\n```mermaid\nclassDiagram\n    class Animal {\n        +String name\n        +int age\n        +makeSound() void\n    }\n    class Dog {\n        +fetch() void\n    }\n    Animal \u003C|-- Dog : extends\n```\n\n**Key syntax:**\n- Visibility: `+` public, `-` private, `#` protected, `~` package\n- Relations: `\u003C|--` inheritance, `*--` composition, `o--` aggregation, `-->` association\n- Methods: `+method(args) returnType`\n\nFor details: [class-diagram.md](class-diagram.md)\n\n---\n\n### Gantt Chart\n\n```mermaid\ngantt\n    title Project Timeline\n    dateFormat YYYY-MM-DD\n\n    section Planning\n    Requirements    :a1, 2024-01-01, 7d\n    Design          :a2, after a1, 5d\n\n    section Development\n    Implementation  :2024-01-15, 14d\n    Testing         :7d\n```\n\n**Key syntax:**\n- `dateFormat`: Date format (YYYY-MM-DD, etc.)\n- Tasks: `name :id, start, duration` or `name :after id, duration`\n- Modifiers: `done`, `active`, `crit`, `milestone`\n\nFor details: [gantt.md](gantt.md)\n\n---\n\n### State Diagram\n\n```mermaid\nstateDiagram-v2\n    [*] --> Idle\n    Idle --> Processing : start\n    Processing --> Success : complete\n    Processing --> Error : fail\n    Success --> [*]\n    Error --> Idle : retry\n```\n\n**Key syntax:**\n- Start\u002FEnd: `[*]`\n- Transition: `State1 --> State2 : event`\n- Composite: `state Name { ... }`\n- Fork\u002FJoin: `state fork_name \u003C\u003Cfork>>`, `\u003C\u003Cjoin>>`\n\nFor details: [state.md](state.md)\n\n---\n\n### Gitgraph\n\n```mermaid\ngitGraph\n    commit id: \"init\"\n    branch develop\n    checkout develop\n    commit id: \"feat-1\"\n    commit id: \"feat-2\"\n    checkout main\n    merge develop id: \"v1.0\" tag: \"release\"\n```\n\n**Key syntax:**\n- `commit`: Add commit, optional `id:`, `tag:`, `type:`\n- `branch name`: Create branch\n- `checkout name`: Switch branch\n- `merge name`: Merge branch\n\nFor details: [gitgraph.md](gitgraph.md)\n\n---\n\n### Mindmap\n\n```mermaid\nmindmap\n    root((Project))\n        Frontend\n            React\n            TypeScript\n        Backend\n            Node.js\n            PostgreSQL\n        DevOps\n            Docker\n            CI\u002FCD\n```\n\n**Key syntax:**\n- Indentation defines hierarchy\n- Shapes: `root((circle))`, `(rounded)`, `[square]`, `))cloud((`\n- Use 4-space or tab indentation\n\nFor details: [mindmap.md](mindmap.md)\n\n---\n\n### Pie Chart\n\n```mermaid\npie showData\n    title Browser Market Share\n    \"Chrome\" : 65\n    \"Safari\" : 19\n    \"Firefox\" : 8\n    \"Edge\" : 5\n    \"Other\" : 3\n```\n\n**Key syntax:**\n- `title`: Optional chart title\n- `showData`: Display values on segments\n- Format: `\"Label\" : value`\n\nFor details: [pie.md](pie.md)\n\n---\n\n### ER Diagram\n\n```mermaid\nerDiagram\n    CUSTOMER ||--o{ ORDER : places\n    ORDER ||--|{ LINE-ITEM : contains\n    CUSTOMER {\n        int id PK\n        string email UK\n        string name\n    }\n```\n\n**Key syntax:**\n- Entities: `ENTITY_NAME`\n- Attributes: `type name [PK\u002FFK\u002FUK]`\n- Cardinality: `||--o{` (one to many), `||--||` (one to one)\n- Relationship: `ENTITY1 REL ENTITY2 : label`\n\nFor details: [er-diagram.md](er-diagram.md)\n\n---\n\n### User Journey\n\n```mermaid\njourney\n    title Customer Support\n    section Contact\n      Submit ticket: 2: Customer\n      Receive notice: 4: Agent\n    section Resolution\n      Troubleshoot issue: 3: Agent\n      Confirm solution: 5: Customer\n```\n\n**Key syntax:**\n- Sections: `section name`\n- Tasks: `Task name: score: actor`\n- Score: 1-5 (1 = unsatisfied, 5 = satisfied)\n- Actors: User roles involved\n\nFor details: [journey.md](journey.md)\n\n---\n\n### Timeline\n\n```mermaid\ntimeline\n    title Product Roadmap\n    section 2023\n        Q1 2023 : MVP launch\n        Q4 2023 : v1.0 release\n    section 2024\n        Q2 2024 : Major features\n        Q4 2024 : v2.0\n```\n\n**Key syntax:**\n- Time periods: `period : event`\n- Sections: Group related periods\n- Multiple events: `period : event1 : event2`\n- Flexible format: Years, months, quarters, or custom text\n\nFor details: [timeline.md](timeline.md)\n\n---\n\n### Quadrant Chart\n\n```mermaid\nquadrantChart\n    title Feature Prioritization\n    x-axis Effort --> Value\n    y-axis Complexity --> Impact\n    Dark Mode: [0.4, 0.7]\n    Search: [0.6, 0.8]\n    Export PDF: [0.7, 0.6]\n    Fix UI Bug: [0.2, 0.3]\n```\n\n**Key syntax:**\n- Axes: `x-axis label --> label` and `y-axis label --> label`\n- Points: `Name: [x, y]` (coordinates 0.0-1.0)\n- Quadrants: Auto-divided at 0.5 on both axes\n\nFor details: [quadrant-chart.md](quadrant-chart.md)\n\n---\n\n### Sankey Diagram\n\n```mermaid\nsankey-beta\n\nA,B,10\nA,C,15\nB,D,8\nC,D,22\n```\n\n**Key syntax:**\n- CSV format: `source, target, value`\n- Three columns required\n- Values are numeric (flow magnitude)\n- Nodes auto-created from sources\u002Ftargets\n\nFor details: [sankey.md](sankey.md)\n\n---\n\n### XY Chart\n\n```mermaid\nxychart-beta\n    title \"Sales Data\"\n    x-axis [Jan, Feb, Mar, Apr, May]\n    y-axis \"Revenue\" 0 --> 100\n    line [30, 45, 55, 70, 85]\n```\n\n**Key syntax:**\n- Chart type: `xychart-beta` or `xychart-beta horizontal`\n- X-axis: `[categories]` or `min --> max`\n- Y-axis: `\"label\" min --> max`\n- Series: `line [values]` or `bar [values]`\n\nFor details: [xychart.md](xychart.md)\n\n---\n\n### Block Diagram\n\n```mermaid\nblock-beta\n    columns 2\n    A[\"Frontend\"]:1\n    B[\"Backend\"]:1\n    C[\"Database\"]:2\n\n    style A fill:#e3f2fd,stroke:#1565c0,color:#0d47a1\n    style B fill:#f3e5f5,stroke:#7b1fa2,color:#4a148c\n    style C fill:#e8f5e9,stroke:#2e7d32,color:#1b5e20\n```\n\n**Key syntax:**\n- Blocks: `ID[\"Label\"]:SPAN` - Each block on new line\n- Columns: `columns N` - Define layout width\n- Styling: `style ID fill:#hex,stroke:#hex,color:#hex`\n- Spans: `:N` suffix - How many columns block occupies\n\nFor details: [block.md](block.md)\n\n---\n\n### Architecture Diagram\n\n```mermaid\narchitecture-beta\n    group Cloud(cloud)[Cloud Infrastructure]\n    service web(server)[Web Server] in Cloud\n    service api(server)[API Server] in Cloud\n    service db(database)[Database]\n\n    web:R --> L:api\n    api:R --> L:db\n```\n\n**Key syntax:**\n- Groups: `group {id}({icon})[{label}]` - Organize services\n- Services: `service {id}({icon})[{label}] (in {parent})?` - Available icons: server, database, cloud, disk, internet\n- Nesting: `in {parent_id}` - Place service\u002Fgroup inside parent group\n- Connections: `{id1}:{pos} {arrow} {pos}:{id2}` - Position: L(eft), R(ight), T(op), B(ottom)\n- Arrows: `-->` (right), `\u003C--` (left), `--` (both)\n\nFor details: [architecture.md](architecture.md)\n\n---\n\n\n## Common Patterns\n\n### Adding Styles\n\n```mermaid\nflowchart LR\n    A[Normal] --> B[Styled]\n    style B fill:#f96,stroke:#333,stroke-width:2px\n```\n\n### Using Classes\n\n```mermaid\nflowchart LR\n    A:::highlight --> B --> C:::highlight\n    classDef highlight fill:#ff0,stroke:#f00,stroke-width:2px\n```\n\n### Comments\n\n```mermaid\nflowchart TD\n    %% This is a comment\n    A --> B\n```\n\n---\n\n## Reference\n\nFor complete documentation on common features:\n- [reference.md](reference.md) - Styling, themes, comments, directives\n\nFor diagram-specific guides:\n- [flowchart.md](flowchart.md) - Node shapes, links, subgraphs\n- [sequence.md](sequence.md) - Messages, activation, control flow\n- [class-diagram.md](class-diagram.md) - Classes, relationships\n- [gantt.md](gantt.md) - Tasks, dependencies, milestones\n- [state.md](state.md) - States, transitions, composite states\n- [gitgraph.md](gitgraph.md) - Commits, branches, merges\n- [mindmap.md](mindmap.md) - Hierarchies, node shapes\n- [pie.md](pie.md) - Proportional data\n- [er-diagram.md](er-diagram.md) - Entities, attributes, relationships (Session 1)\n- [journey.md](journey.md) - User journeys, satisfaction scores (Session 1)\n- [timeline.md](timeline.md) - Events, milestones, time periods (Session 1)\n- [quadrant-chart.md](quadrant-chart.md) - Priority matrix, 2D positioning (Session 2)\n- [sankey.md](sankey.md) - Flow visualization, proportional bands (Session 2)\n- [xychart.md](xychart.md) - Numerical data visualization (Session 2)\n- [block.md](block.md) - Element positioning, multi-column layouts (Session 3)\n- [architecture.md](architecture.md) - Cloud services, service relationships (Session 3)\n","# Mermaid Diagramming in Obsidian\n\nObsidian has built-in Mermaid support. Use fenced code blocks with `mermaid` language identifier.\n\nFor common syntax (styling, comments, themes), see [reference.md](reference.md).\n\n## ⚠️ Obsidian-Specific Constraints\n\n**Rendering Differences**: Obsidian's Mermaid version may lag behind mermaid.js releases. Some cutting-edge features may not work.\n\n**Theme Interaction**: Diagram colors adapt to Obsidian theme. Use explicit styles for consistent appearance across themes.\n\n**Performance**: Very large diagrams (50+ nodes) may slow down rendering. Split into multiple diagrams if needed.\n\n**Export**: PDF export converts diagrams to images. For external sharing, capture as PNG\u002FSVG.\n\n**No JavaScript**: Click events and JavaScript callbacks are disabled for security.\n\n---\n\n## Diagram Selection Guide\n\n| Use Case | Diagram Type | Keyword |\n|----------|--------------|---------|\n| Process flow, decision trees | Flowchart | `flowchart` |\n| API calls, message passing | Sequence | `sequenceDiagram` |\n| OOP design, relationships | Class | `classDiagram` |\n| Project timeline, scheduling | Gantt | `gantt` |\n| State machine, lifecycle | State | `stateDiagram-v2` |\n| Git branching strategy | Gitgraph | `gitGraph` |\n| Brainstorming, hierarchies | Mindmap | `mindmap` |\n| Proportions, percentages | Pie Chart | `pie` |\n| Database schema, entities | ER Diagram | `erDiagram` |\n| User experience steps, satisfaction | User Journey | `journey` |\n| Historical events, milestones | Timeline | `timeline` |\n| Priority matrix, 2D positioning | Quadrant Chart | `quadrantChart` |\n| Flow visualization, proportional bands | Sankey Diagram | `sankey-beta` |\n| Numerical data visualization | XY Chart | `xychart-beta` |\n| Precise element positioning, layouts | Block Diagram | `block-beta` |\n| Cloud services, service relationships | Architecture | `architecture-beta` |\n\n---\n\n## Quick Start Examples\n\n### Flowchart\n\n```mermaid\nflowchart TD\n    A[Start] --> B{Decision}\n    B -->|Yes| C[Action 1]\n    B -->|No| D[Action 2]\n    C --> E[End]\n    D --> E\n```\n\n**Key syntax:**\n- Direction: `TD` (top-down), `LR` (left-right), `BT`, `RL`\n- Shapes: `[rect]`, `(rounded)`, `{diamond}`, `[(cylinder)]`, `((circle))`\n- Arrows: `-->`, `-.->` (dotted), `==>` (thick)\n- Labels: `-->|text|` or `-- text -->`\n\nFor details: [flowchart.md](flowchart.md)\n\n---\n\n### Sequence Diagram\n\n```mermaid\nsequenceDiagram\n    participant C as Client\n    participant S as Server\n    participant D as Database\n\n    C->>S: HTTP Request\n    activate S\n    S->>D: Query\n    D-->>S: Result\n    S-->>C: Response\n    deactivate S\n```\n\n**Key syntax:**\n- Arrows: `->>` (sync), `-->>` (response), `-)` (async)\n- Activation: `activate`\u002F`deactivate` or `+`\u002F`-` suffix\n- Control: `loop`, `alt`\u002F`else`, `opt`, `par`\u002F`and`, `critical`\n- Notes: `Note right of A: text`, `Note over A,B: text`\n\nFor details: [sequence.md](sequence.md)\n\n---\n\n### Class Diagram\n\n```mermaid\nclassDiagram\n    class Animal {\n        +String name\n        +int age\n        +makeSound() void\n    }\n    class Dog {\n        +fetch() void\n    }\n    Animal \u003C|-- Dog : extends\n```\n\n**Key syntax:**\n- Visibility: `+` public, `-` private, `#` protected, `~` package\n- Relations: `\u003C|--` inheritance, `*--` composition, `o--` aggregation, `-->` association\n- Methods: `+method(args) returnType`\n\nFor details: [class-diagram.md](class-diagram.md)\n\n---\n\n### Gantt Chart\n\n```mermaid\ngantt\n    title Project Timeline\n    dateFormat YYYY-MM-DD\n\n    section Planning\n    Requirements    :a1, 2024-01-01, 7d\n    Design          :a2, after a1, 5d\n\n    section Development\n    Implementation  :2024-01-15, 14d\n    Testing         :7d\n```\n\n**Key syntax:**\n- `dateFormat`: Date format (YYYY-MM-DD, etc.)\n- Tasks: `name :id, start, duration` or `name :after id, duration`\n- Modifiers: `done`, `active`, `crit`, `milestone`\n\nFor details: [gantt.md](gantt.md)\n\n---\n\n### State Diagram\n\n```mermaid\nstateDiagram-v2\n    [*] --> Idle\n    Idle --> Processing : start\n    Processing --> Success : complete\n    Processing --> Error : fail\n    Success --> [*]\n    Error --> Idle : retry\n```\n\n**Key syntax:**\n- Start\u002FEnd: `[*]`\n- Transition: `State1 --> State2 : event`\n- Composite: `state Name { ... }`\n- Fork\u002FJoin: `state fork_name \u003C\u003Cfork>>`, `\u003C\u003Cjoin>>`\n\nFor details: [state.md](state.md)\n\n---\n\n### Gitgraph\n\n```mermaid\ngitGraph\n    commit id: \"init\"\n    branch develop\n    checkout develop\n    commit id: \"feat-1\"\n    commit id: \"feat-2\"\n    checkout main\n    merge develop id: \"v1.0\" tag: \"release\"\n```\n\n**Key syntax:**\n- `commit`: Add commit, optional `id:`, `tag:`, `type:`\n- `branch name`: Create branch\n- `checkout name`: Switch branch\n- `merge name`: Merge branch\n\nFor details: [gitgraph.md](gitgraph.md)\n\n---\n\n### Mindmap\n\n```mermaid\nmindmap\n    root((Project))\n        Frontend\n            React\n            TypeScript\n        Backend\n            Node.js\n            PostgreSQL\n        DevOps\n            Docker\n            CI\u002FCD\n```\n\n**Key syntax:**\n- Indentation defines hierarchy\n- Shapes: `root((circle))`, `(rounded)`, `[square]`, `))cloud((`\n- Use 4-space or tab indentation\n\nFor details: [mindmap.md](mindmap.md)\n\n---\n\n### Pie Chart\n\n```mermaid\npie showData\n    title Browser Market Share\n    \"Chrome\" : 65\n    \"Safari\" : 19\n    \"Firefox\" : 8\n    \"Edge\" : 5\n    \"Other\" : 3\n```\n\n**Key syntax:**\n- `title`: Optional chart title\n- `showData`: Display values on segments\n- Format: `\"Label\" : value`\n\nFor details: [pie.md](pie.md)\n\n---\n\n### ER Diagram\n\n```mermaid\nerDiagram\n    CUSTOMER ||--o{ ORDER : places\n    ORDER ||--|{ LINE-ITEM : contains\n    CUSTOMER {\n        int id PK\n        string email UK\n        string name\n    }\n```\n\n**Key syntax:**\n- Entities: `ENTITY_NAME`\n- Attributes: `type name [PK\u002FFK\u002FUK]`\n- Cardinality: `||--o{` (one to many), `||--||` (one to one)\n- Relationship: `ENTITY1 REL ENTITY2 : label`\n\nFor details: [er-diagram.md](er-diagram.md)\n\n---\n\n### User Journey\n\n```mermaid\njourney\n    title Customer Support\n    section Contact\n      Submit ticket: 2: Customer\n      Receive notice: 4: Agent\n    section Resolution\n      Troubleshoot issue: 3: Agent\n      Confirm solution: 5: Customer\n```\n\n**Key syntax:**\n- Sections: `section name`\n- Tasks: `Task name: score: actor`\n- Score: 1-5 (1 = unsatisfied, 5 = satisfied)\n- Actors: User roles involved\n\nFor details: [journey.md](journey.md)\n\n---\n\n### Timeline\n\n```mermaid\ntimeline\n    title Product Roadmap\n    section 2023\n        Q1 2023 : MVP launch\n        Q4 2023 : v1.0 release\n    section 2024\n        Q2 2024 : Major features\n        Q4 2024 : v2.0\n```\n\n**Key syntax:**\n- Time periods: `period : event`\n- Sections: Group related periods\n- Multiple events: `period : event1 : event2`\n- Flexible format: Years, months, quarters, or custom text\n\nFor details: [timeline.md](timeline.md)\n\n---\n\n### Quadrant Chart\n\n```mermaid\nquadrantChart\n    title Feature Prioritization\n    x-axis Effort --> Value\n    y-axis Complexity --> Impact\n    Dark Mode: [0.4, 0.7]\n    Search: [0.6, 0.8]\n    Export PDF: [0.7, 0.6]\n    Fix UI Bug: [0.2, 0.3]\n```\n\n**Key syntax:**\n- Axes: `x-axis label --> label` and `y-axis label --> label`\n- Points: `Name: [x, y]` (coordinates 0.0-1.0)\n- Quadrants: Auto-divided at 0.5 on both axes\n\nFor details: [quadrant-chart.md](quadrant-chart.md)\n\n---\n\n### Sankey Diagram\n\n```mermaid\nsankey-beta\n\nA,B,10\nA,C,15\nB,D,8\nC,D,22\n```\n\n**Key syntax:**\n- CSV format: `source, target, value`\n- Three columns required\n- Values are numeric (flow magnitude)\n- Nodes auto-created from sources\u002Ftargets\n\nFor details: [sankey.md](sankey.md)\n\n---\n\n### XY Chart\n\n```mermaid\nxychart-beta\n    title \"Sales Data\"\n    x-axis [Jan, Feb, Mar, Apr, May]\n    y-axis \"Revenue\" 0 --> 100\n    line [30, 45, 55, 70, 85]\n```\n\n**Key syntax:**\n- Chart type: `xychart-beta` or `xychart-beta horizontal`\n- X-axis: `[categories]` or `min --> max`\n- Y-axis: `\"label\" min --> max`\n- Series: `line [values]` or `bar [values]`\n\nFor details: [xychart.md](xychart.md)\n\n---\n\n### Block Diagram\n\n```mermaid\nblock-beta\n    columns 2\n    A[\"Frontend\"]:1\n    B[\"Backend\"]:1\n    C[\"Database\"]:2\n\n    style A fill:#e3f2fd,stroke:#1565c0,color:#0d47a1\n    style B fill:#f3e5f5,stroke:#7b1fa2,color:#4a148c\n    style C fill:#e8f5e9,stroke:#2e7d32,color:#1b5e20\n```\n\n**Key syntax:**\n- Blocks: `ID[\"Label\"]:SPAN` - Each block on new line\n- Columns: `columns N` - Define layout width\n- Styling: `style ID fill:#hex,stroke:#hex,color:#hex`\n- Spans: `:N` suffix - How many columns block occupies\n\nFor details: [block.md](block.md)\n\n---\n\n### Architecture Diagram\n\n```mermaid\narchitecture-beta\n    group Cloud(cloud)[Cloud Infrastructure]\n    service web(server)[Web Server] in Cloud\n    service api(server)[API Server] in Cloud\n    service db(database)[Database]\n\n    web:R --> L:api\n    api:R --> L:db\n```\n\n**Key syntax:**\n- Groups: `group {id}({icon})[{label}]` - Organize services\n- Services: `service {id}({icon})[{label}] (in {parent})?` - Available icons: server, database, cloud, disk, internet\n- Nesting: `in {parent_id}` - Place service\u002Fgroup inside parent group\n- Connections: `{id1}:{pos} {arrow} {pos}:{id2}` - Position: L(eft), R(ight), T(op), B(ottom)\n- Arrows: `-->` (right), `\u003C--` (left), `--` (both)\n\nFor details: [architecture.md](architecture.md)\n\n---\n\n\n## Common Patterns\n\n### Adding Styles\n\n```mermaid\nflowchart LR\n    A[Normal] --> B[Styled]\n    style B fill:#f96,stroke:#333,stroke-width:2px\n```\n\n### Using Classes\n\n```mermaid\nflowchart LR\n    A:::highlight --> B --> C:::highlight\n    classDef highlight fill:#ff0,stroke:#f00,stroke-width:2px\n```\n\n### Comments\n\n```mermaid\nflowchart TD\n    %% This is a comment\n    A --> B\n```\n\n---\n\n## Reference\n\nFor complete documentation on common features:\n- [reference.md](reference.md) - Styling, themes, comments, directives\n\nFor diagram-specific guides:\n- [flowchart.md](flowchart.md) - Node shapes, links, subgraphs\n- [sequence.md](sequence.md) - Messages, activation, control flow\n- [class-diagram.md](class-diagram.md) - Classes, relationships\n- [gantt.md](gantt.md) - Tasks, dependencies, milestones\n- [state.md](state.md) - States, transitions, composite states\n- [gitgraph.md](gitgraph.md) - Commits, branches, merges\n- [mindmap.md](mindmap.md) - Hierarchies, node shapes\n- [pie.md](pie.md) - Proportional data\n- [er-diagram.md](er-diagram.md) - Entities, attributes, relationships (Session 1)\n- [journey.md](journey.md) - User journeys, satisfaction scores (Session 1)\n- [timeline.md](timeline.md) - Events, milestones, time periods (Session 1)\n- [quadrant-chart.md](quadrant-chart.md) - Priority matrix, 2D positioning (Session 2)\n- [sankey.md](sankey.md) - Flow visualization, proportional bands (Session 2)\n- [xychart.md](xychart.md) - Numerical data visualization (Session 2)\n- [block.md](block.md) - Element positioning, multi-column layouts (Session 3)\n- [architecture.md](architecture.md) - Cloud services, service relationships (Session 3)\n",{"name":5,"description":7},"main","def8531e65114c0fca8fb8551c1871ee0eed705c","skills\u002Faiskillstore\u002Fmarketplace\u002Fbityoungjae\u002Fmermaid-diagramming",24,"https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub","https:\u002F\u002Fskillshub.wtf","https:\u002F\u002Fgithub.com\u002FComeOnOliver","AI & Blockchain Engineer\r\n","2026-06-24 22:07:19",{"source":8,"skillName":5,"commands":48,"prompt":58,"zipAvailable":59},[49,52,55],{"tool":50,"command":51},"npx","npx skills add ComeOnOliver\u002Fskillshub --skill mermaid-diagramming",{"tool":53,"command":54},"bunx","bunx skills add ComeOnOliver\u002Fskillshub --skill mermaid-diagramming",{"tool":56,"command":57},"pnpm","pnpm dlx skills add ComeOnOliver\u002Fskillshub --skill mermaid-diagramming","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Faiskillstore\u002Fmarketplace\u002Fbityoungjae\u002Fmermaid-diagramming\u002FSKILL.md",true,[61,67,71,75,79,83,87,91,95,99,103,107,111,115,119,123,127,133,137,141,145,149,153,157],{"path":62,"resourceType":63,"resourceTypeDesc":64,"sizeBytes":65,"sourceHtmlUrl":66},"architecture.md","REFERENCE","参考文档",10144,"https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Faiskillstore\u002Fmarketplace\u002Fbityoungjae\u002Fmermaid-diagramming\u002Farchitecture.md",{"path":68,"resourceType":63,"resourceTypeDesc":64,"sizeBytes":69,"sourceHtmlUrl":70},"block.md",10258,"https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Faiskillstore\u002Fmarketplace\u002Fbityoungjae\u002Fmermaid-diagramming\u002Fblock.md",{"path":72,"resourceType":63,"resourceTypeDesc":64,"sizeBytes":73,"sourceHtmlUrl":74},"class-diagram.md",13804,"https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Faiskillstore\u002Fmarketplace\u002Fbityoungjae\u002Fmermaid-diagramming\u002Fclass-diagram.md",{"path":76,"resourceType":63,"resourceTypeDesc":64,"sizeBytes":77,"sourceHtmlUrl":78},"er-diagram.md",10459,"https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Faiskillstore\u002Fmarketplace\u002Fbityoungjae\u002Fmermaid-diagramming\u002Fer-diagram.md",{"path":80,"resourceType":63,"resourceTypeDesc":64,"sizeBytes":81,"sourceHtmlUrl":82},"flowchart.md",8130,"https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Faiskillstore\u002Fmarketplace\u002Fbityoungjae\u002Fmermaid-diagramming\u002Fflowchart.md",{"path":84,"resourceType":63,"resourceTypeDesc":64,"sizeBytes":85,"sourceHtmlUrl":86},"gantt.md",12603,"https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Faiskillstore\u002Fmarketplace\u002Fbityoungjae\u002Fmermaid-diagramming\u002Fgantt.md",{"path":88,"resourceType":63,"resourceTypeDesc":64,"sizeBytes":89,"sourceHtmlUrl":90},"gitgraph.md",6568,"https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Faiskillstore\u002Fmarketplace\u002Fbityoungjae\u002Fmermaid-diagramming\u002Fgitgraph.md",{"path":92,"resourceType":63,"resourceTypeDesc":64,"sizeBytes":93,"sourceHtmlUrl":94},"journey.md",8330,"https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Faiskillstore\u002Fmarketplace\u002Fbityoungjae\u002Fmermaid-diagramming\u002Fjourney.md",{"path":96,"resourceType":63,"resourceTypeDesc":64,"sizeBytes":97,"sourceHtmlUrl":98},"mindmap.md",3907,"https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Faiskillstore\u002Fmarketplace\u002Fbityoungjae\u002Fmermaid-diagramming\u002Fmindmap.md",{"path":100,"resourceType":63,"resourceTypeDesc":64,"sizeBytes":101,"sourceHtmlUrl":102},"pie.md",2549,"https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Faiskillstore\u002Fmarketplace\u002Fbityoungjae\u002Fmermaid-diagramming\u002Fpie.md",{"path":104,"resourceType":63,"resourceTypeDesc":64,"sizeBytes":105,"sourceHtmlUrl":106},"quadrant-chart.md",8838,"https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Faiskillstore\u002Fmarketplace\u002Fbityoungjae\u002Fmermaid-diagramming\u002Fquadrant-chart.md",{"path":108,"resourceType":63,"resourceTypeDesc":64,"sizeBytes":109,"sourceHtmlUrl":110},"reference.md",7413,"https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Faiskillstore\u002Fmarketplace\u002Fbityoungjae\u002Fmermaid-diagramming\u002Freference.md",{"path":112,"resourceType":63,"resourceTypeDesc":64,"sizeBytes":113,"sourceHtmlUrl":114},"references\u002Fapi_design_patterns.md",1627,"https:\u002F\u002Fgithub.com\u002FAhmet-Talha-Kavakli\u002Fai-body-backend\u002Fblob\u002Fmain\u002F.claude\u002Fskills\u002Fsenior-backend\u002Freferences\u002Fapi_design_patterns.md",{"path":116,"resourceType":63,"resourceTypeDesc":64,"sizeBytes":117,"sourceHtmlUrl":118},"references\u002Fbackend_security_practices.md",1634,"https:\u002F\u002Fgithub.com\u002FAhmet-Talha-Kavakli\u002Fai-body-backend\u002Fblob\u002Fmain\u002F.claude\u002Fskills\u002Fsenior-backend\u002Freferences\u002Fbackend_security_practices.md",{"path":120,"resourceType":63,"resourceTypeDesc":64,"sizeBytes":121,"sourceHtmlUrl":122},"references\u002Fdatabase_optimization_guide.md",1635,"https:\u002F\u002Fgithub.com\u002FAhmet-Talha-Kavakli\u002Fai-body-backend\u002Fblob\u002Fmain\u002F.claude\u002Fskills\u002Fsenior-backend\u002Freferences\u002Fdatabase_optimization_guide.md",{"path":124,"resourceType":63,"resourceTypeDesc":64,"sizeBytes":125,"sourceHtmlUrl":126},"sankey.md",7941,"https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Faiskillstore\u002Fmarketplace\u002Fbityoungjae\u002Fmermaid-diagramming\u002Fsankey.md",{"path":128,"resourceType":129,"resourceTypeDesc":130,"sizeBytes":131,"sourceHtmlUrl":132},"scripts\u002Fapi_load_tester.py","SCRIPT","脚本",3122,"https:\u002F\u002Fgithub.com\u002FAhmet-Talha-Kavakli\u002Fai-body-backend\u002Fblob\u002Fmain\u002F.claude\u002Fskills\u002Fsenior-backend\u002Fscripts\u002Fapi_load_tester.py",{"path":134,"resourceType":129,"resourceTypeDesc":130,"sizeBytes":135,"sourceHtmlUrl":136},"scripts\u002Fapi_scaffolder.py",3119,"https:\u002F\u002Fgithub.com\u002FAhmet-Talha-Kavakli\u002Fai-body-backend\u002Fblob\u002Fmain\u002F.claude\u002Fskills\u002Fsenior-backend\u002Fscripts\u002Fapi_scaffolder.py",{"path":138,"resourceType":129,"resourceTypeDesc":130,"sizeBytes":139,"sourceHtmlUrl":140},"scripts\u002Fdatabase_migration_tool.py",3162,"https:\u002F\u002Fgithub.com\u002FAhmet-Talha-Kavakli\u002Fai-body-backend\u002Fblob\u002Fmain\u002F.claude\u002Fskills\u002Fsenior-backend\u002Fscripts\u002Fdatabase_migration_tool.py",{"path":142,"resourceType":63,"resourceTypeDesc":64,"sizeBytes":143,"sourceHtmlUrl":144},"sequence.md",13226,"https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Faiskillstore\u002Fmarketplace\u002Fbityoungjae\u002Fmermaid-diagramming\u002Fsequence.md",{"path":146,"resourceType":63,"resourceTypeDesc":64,"sizeBytes":147,"sourceHtmlUrl":148},"skill-report.json",226624,"https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Faiskillstore\u002Fmarketplace\u002Fbityoungjae\u002Fmermaid-diagramming\u002Fskill-report.json",{"path":150,"resourceType":63,"resourceTypeDesc":64,"sizeBytes":151,"sourceHtmlUrl":152},"state.md",13366,"https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Faiskillstore\u002Fmarketplace\u002Fbityoungjae\u002Fmermaid-diagramming\u002Fstate.md",{"path":154,"resourceType":63,"resourceTypeDesc":64,"sizeBytes":155,"sourceHtmlUrl":156},"timeline.md",10027,"https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Faiskillstore\u002Fmarketplace\u002Fbityoungjae\u002Fmermaid-diagramming\u002Ftimeline.md",{"path":158,"resourceType":63,"resourceTypeDesc":64,"sizeBytes":159,"sourceHtmlUrl":160},"xychart.md",8266,"https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Faiskillstore\u002Fmarketplace\u002Fbityoungjae\u002Fmermaid-diagramming\u002Fxychart.md",[162,176,186,195,201,208],{"skillNo":163,"name":164,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":165,"categories":166,"keywords":172,"publishedAt":33},"01M6FKJN13GMG4KY57J3QD8GY5","model-hierarchy-skill","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzscole\u002Fmodel-hierarchy-skill\u002Fmodel-hierarchy-skill\u002FSKILL.md",[167],{"categoryNo":168,"categoryName":169,"taxonomyType":170,"taxonomyTypeDesc":171},"01JBSEEDCAT000000000000023","Skill与智能体开发","SCENARIO","使用场景",[173,174,175],"model","model hierarchy","model hierarchy skill",{"skillNo":177,"name":178,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":179,"categories":180,"keywords":182,"publishedAt":33},"01M6FKJJJ6GCAMR4PPPRD12M5X","zoom-mcp","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fzoom-mcp\u002FSKILL.md",[181],{"categoryNo":168,"categoryName":169,"taxonomyType":170,"taxonomyTypeDesc":171},[183,184,185],"MCP","zoom","zoom mcp",{"skillNo":187,"name":188,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":189,"categories":190,"keywords":191,"publishedAt":33},"01M6FKJE3KYT3KPEZMEEHYKA6K","zoom-apps-sdk","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fzoom-apps-sdk\u002FSKILL.md",[],[192,193,194,184],"sdk","zoom apps sdk","apps",{"skillNo":196,"name":197,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":198,"categories":199,"keywords":200,"publishedAt":33},"01M6FKJ9EDH9Q5VWDF8HAJRSP0","windows","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwindows\u002FSKILL.md",[],[197],{"skillNo":202,"name":203,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":204,"categories":205,"keywords":207,"publishedAt":33},"01M6FKJ666BEEFC3AE9GJ72Q93","whiteboard","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwhiteboard\u002FSKILL.md",[206],{"categoryNo":168,"categoryName":169,"taxonomyType":170,"taxonomyTypeDesc":171},[203],{"skillNo":209,"name":210,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":211,"categories":212,"keywords":213,"publishedAt":33},"01M6FKJ21WFCDGTJQ2Q91T9DVW","websockets","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwebsockets\u002FSKILL.md",[],[210]]