{
  "schemaVersion": "1.0",
  "item": {
    "slug": "mermaid-diagrams",
    "name": "Mermaid Diagrams",
    "source": "tencent",
    "type": "skill",
    "category": "开发工具",
    "sourceUrl": "https://clawhub.ai/wpank/mermaid-diagrams",
    "canonicalUrl": "https://clawhub.ai/wpank/mermaid-diagrams",
    "targetPlatform": "OpenClaw"
  },
  "install": {
    "downloadMode": "redirect",
    "downloadUrl": "/downloads/mermaid-diagrams",
    "sourceDownloadUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=mermaid-diagrams",
    "sourcePlatform": "tencent",
    "targetPlatform": "OpenClaw",
    "installMethod": "Manual import",
    "extraction": "Extract archive",
    "prerequisites": [
      "OpenClaw"
    ],
    "packageFormat": "ZIP package",
    "includedAssets": [
      "README.md",
      "SKILL.md",
      "references/advanced-features.md",
      "references/c4-diagrams.md",
      "references/class-diagrams.md",
      "references/erd-diagrams.md"
    ],
    "primaryDoc": "SKILL.md",
    "quickSetup": [
      "Download the package from Yavira.",
      "Extract the archive and review SKILL.md first.",
      "Import or place the package into your OpenClaw setup."
    ],
    "agentAssist": {
      "summary": "Hand the extracted package to your coding agent with a concrete install brief instead of figuring it out manually.",
      "steps": [
        "Download the package from Yavira.",
        "Extract it into a folder your agent can access.",
        "Paste one of the prompts below and point your agent at the extracted folder."
      ],
      "prompts": [
        {
          "label": "New install",
          "body": "I downloaded a skill package from Yavira. Read SKILL.md from the extracted folder and install it by following the included instructions. Then review README.md for any prerequisites, environment setup, or post-install checks. Tell me what you changed and call out any manual steps you could not complete."
        },
        {
          "label": "Upgrade existing",
          "body": "I downloaded an updated skill package from Yavira. Read SKILL.md from the extracted folder, compare it with my current installation, and upgrade it while preserving any custom configuration unless the package docs explicitly say otherwise. Then review README.md for any prerequisites, environment setup, or post-install checks. Summarize what changed and any follow-up checks I should run."
        }
      ]
    },
    "sourceHealth": {
      "source": "tencent",
      "status": "healthy",
      "reason": "direct_download_ok",
      "recommendedAction": "download",
      "checkedAt": "2026-04-30T16:55:25.780Z",
      "expiresAt": "2026-05-07T16:55:25.780Z",
      "httpStatus": 200,
      "finalUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=network",
      "contentType": "application/zip",
      "probeMethod": "head",
      "details": {
        "probeUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=network",
        "contentDisposition": "attachment; filename=\"network-1.0.0.zip\"",
        "redirectLocation": null,
        "bodySnippet": null
      },
      "scope": "source",
      "summary": "Source download looks usable.",
      "detail": "Yavira can redirect you to the upstream package for this source.",
      "primaryActionLabel": "Download for OpenClaw",
      "primaryActionHref": "/downloads/mermaid-diagrams"
    },
    "validation": {
      "installChecklist": [
        "Use the Yavira download entry.",
        "Review SKILL.md after the package is downloaded.",
        "Confirm the extracted package contains the expected setup assets."
      ],
      "postInstallChecks": [
        "Confirm the extracted package includes the expected docs or setup files.",
        "Validate the skill or prompts are available in your target agent workspace.",
        "Capture any manual follow-up steps the agent could not complete."
      ]
    },
    "downloadPageUrl": "https://openagent3.xyz/downloads/mermaid-diagrams",
    "agentPageUrl": "https://openagent3.xyz/skills/mermaid-diagrams/agent",
    "manifestUrl": "https://openagent3.xyz/skills/mermaid-diagrams/agent.json",
    "briefUrl": "https://openagent3.xyz/skills/mermaid-diagrams/agent.md"
  },
  "agentAssist": {
    "summary": "Hand the extracted package to your coding agent with a concrete install brief instead of figuring it out manually.",
    "steps": [
      "Download the package from Yavira.",
      "Extract it into a folder your agent can access.",
      "Paste one of the prompts below and point your agent at the extracted folder."
    ],
    "prompts": [
      {
        "label": "New install",
        "body": "I downloaded a skill package from Yavira. Read SKILL.md from the extracted folder and install it by following the included instructions. Then review README.md for any prerequisites, environment setup, or post-install checks. Tell me what you changed and call out any manual steps you could not complete."
      },
      {
        "label": "Upgrade existing",
        "body": "I downloaded an updated skill package from Yavira. Read SKILL.md from the extracted folder, compare it with my current installation, and upgrade it while preserving any custom configuration unless the package docs explicitly say otherwise. Then review README.md for any prerequisites, environment setup, or post-install checks. Summarize what changed and any follow-up checks I should run."
      }
    ]
  },
  "documentation": {
    "source": "clawhub",
    "primaryDoc": "SKILL.md",
    "sections": [
      {
        "title": "Mermaid Diagrams",
        "body": "Create professional software diagrams using Mermaid's text-based syntax. Mermaid renders diagrams from simple text definitions, making diagrams version-controllable, easy to update, and maintainable alongside code."
      },
      {
        "title": "OpenClaw / Moltbot / Clawbot",
        "body": "npx clawhub@latest install mermaid-diagrams"
      },
      {
        "title": "Core Syntax",
        "body": "All Mermaid diagrams follow this pattern:\n\ndiagramType\n  definition content\n\nKey principles:\n\nFirst line declares diagram type (e.g., classDiagram, sequenceDiagram, flowchart)\nUse %% for comments\nLine breaks and indentation improve readability but aren't required\nUnknown words break diagrams; invalid parameters fail silently"
      },
      {
        "title": "Diagram Type Selection",
        "body": "TypeUse ForReferenceClass DiagramsDomain modeling, OOP design, entity relationshipsreferences/class-diagrams.mdSequence DiagramsAPI flows, auth flows, component interactionsreferences/sequence-diagrams.mdFlowchartsProcesses, algorithms, decision trees, user journeysreferences/flowcharts.mdERDDatabase schemas, table relationships, data modelingreferences/erd-diagrams.mdC4 DiagramsSystem context, containers, components, architecturereferences/c4-diagrams.mdState DiagramsState machines, lifecycle states—Git GraphsBranching strategies—Gantt ChartsProject timelines, scheduling—\n\nFor styling, themes, and layout options: See references/advanced-features.md"
      },
      {
        "title": "Class Diagram (Domain Model)",
        "body": "classDiagram\n    Title -- Genre\n    Title *-- Season\n    Title *-- Review\n    User --> Review : creates\n\n    class Title {\n        +string name\n        +int releaseYear\n        +play()\n    }\n\n    class Genre {\n        +string name\n        +getTopTitles()\n    }"
      },
      {
        "title": "Sequence Diagram (API Flow)",
        "body": "sequenceDiagram\n    participant User\n    participant API\n    participant Database\n\n    User->>API: POST /login\n    API->>Database: Query credentials\n    Database-->>API: Return user data\n    alt Valid credentials\n        API-->>User: 200 OK + JWT token\n    else Invalid credentials\n        API-->>User: 401 Unauthorized\n    end"
      },
      {
        "title": "Flowchart (User Journey)",
        "body": "flowchart TD\n    Start([User visits site]) --> Auth{Authenticated?}\n    Auth -->|No| Login[Show login page]\n    Auth -->|Yes| Dashboard[Show dashboard]\n    Login --> Creds[Enter credentials]\n    Creds --> Validate{Valid?}\n    Validate -->|Yes| Dashboard\n    Validate -->|No| Error[Show error]\n    Error --> Login"
      },
      {
        "title": "ERD (Database Schema)",
        "body": "erDiagram\n    USER ||--o{ ORDER : places\n    ORDER ||--|{ LINE_ITEM : contains\n    PRODUCT ||--o{ LINE_ITEM : includes\n\n    USER {\n        int id PK\n        string email UK\n        string name\n        datetime created_at\n    }\n\n    ORDER {\n        int id PK\n        int user_id FK\n        decimal total\n        datetime created_at\n    }"
      },
      {
        "title": "Best Practices",
        "body": "Start simple — begin with core entities/components, add details incrementally\nUse meaningful names — clear labels make diagrams self-documenting\nComment extensively — use %% comments to explain complex relationships\nKeep focused — one diagram per concept; split large diagrams into multiple views\nVersion control — store .mmd files alongside code for easy updates\nAdd context — include titles and notes to explain diagram purpose\nIterate — refine diagrams as understanding evolves"
      },
      {
        "title": "Configuration and Theming",
        "body": "Configure diagrams using frontmatter:\n\n---\nconfig:\n  theme: base\n  themeVariables:\n    primaryColor: \"#ff6b6b\"\n---\nflowchart LR\n    A --> B\n\nAvailable themes: default, forest, dark, neutral, base\n\nLayout options:\n\nlayout: dagre (default) — classic balanced layout\nlayout: elk — advanced layout for complex diagrams\n\nLook options:\n\nlook: classic — traditional Mermaid style\nlook: handDrawn — sketch-like appearance"
      },
      {
        "title": "Rendering and Export",
        "body": "Native support in:\n\nGitHub/GitLab — automatically renders in Markdown\nVS Code — with Markdown Mermaid extension\nNotion, Obsidian, Confluence — built-in support\n\nExport options:\n\nMermaid Live Editor — online editor with PNG/SVG export\nMermaid CLI — npm install -g @mermaid-js/mermaid-cli then mmdc -i input.mmd -o output.png"
      },
      {
        "title": "When to Create Diagrams",
        "body": "Always diagram when:\n\nStarting new projects or features\nDocumenting complex systems\nExplaining architecture decisions\nDesigning database schemas\nPlanning refactoring efforts\nOnboarding new team members\n\nUse diagrams to:\n\nAlign stakeholders on technical decisions\nDocument domain models collaboratively\nVisualize data flows and system interactions\nPlan before coding\nCreate living documentation that evolves with code"
      },
      {
        "title": "Common Pitfalls",
        "body": "Breaking characters — avoid {} in comments; escape special characters\nSyntax errors — misspellings break diagrams; validate in Mermaid Live\nOvercomplexity — split complex diagrams into multiple focused views\nMissing relationships — document all important connections between entities\nStale diagrams — a wrong diagram is worse than no diagram; update when systems change"
      },
      {
        "title": "NEVER Do",
        "body": "NEVER create diagrams with more than 15 nodes — they become unreadable; split into multiple focused diagrams\nNEVER leave arrows unlabeled — every connection should explain the relationship or data flow\nNEVER create diagrams without a title or caption — context-free diagrams are useless outside the author's head\nNEVER use diagrams as the sole documentation — pair diagrams with prose that explains the \"why\"\nNEVER let diagrams go stale — update diagrams when architecture changes; stale diagrams mislead\nNEVER use Mermaid for data visualization — Mermaid is for architecture and flow diagrams, not charts of business data"
      }
    ],
    "body": "Mermaid Diagrams\n\nCreate professional software diagrams using Mermaid's text-based syntax. Mermaid renders diagrams from simple text definitions, making diagrams version-controllable, easy to update, and maintainable alongside code.\n\nInstallation\nOpenClaw / Moltbot / Clawbot\nnpx clawhub@latest install mermaid-diagrams\n\nCore Syntax\n\nAll Mermaid diagrams follow this pattern:\n\ndiagramType\n  definition content\n\n\nKey principles:\n\nFirst line declares diagram type (e.g., classDiagram, sequenceDiagram, flowchart)\nUse %% for comments\nLine breaks and indentation improve readability but aren't required\nUnknown words break diagrams; invalid parameters fail silently\nDiagram Type Selection\nType\tUse For\tReference\nClass Diagrams\tDomain modeling, OOP design, entity relationships\treferences/class-diagrams.md\nSequence Diagrams\tAPI flows, auth flows, component interactions\treferences/sequence-diagrams.md\nFlowcharts\tProcesses, algorithms, decision trees, user journeys\treferences/flowcharts.md\nERD\tDatabase schemas, table relationships, data modeling\treferences/erd-diagrams.md\nC4 Diagrams\tSystem context, containers, components, architecture\treferences/c4-diagrams.md\nState Diagrams\tState machines, lifecycle states\t—\nGit Graphs\tBranching strategies\t—\nGantt Charts\tProject timelines, scheduling\t—\n\nFor styling, themes, and layout options: See references/advanced-features.md\n\nQuick Start Examples\nClass Diagram (Domain Model)\nclassDiagram\n    Title -- Genre\n    Title *-- Season\n    Title *-- Review\n    User --> Review : creates\n\n    class Title {\n        +string name\n        +int releaseYear\n        +play()\n    }\n\n    class Genre {\n        +string name\n        +getTopTitles()\n    }\n\nSequence Diagram (API Flow)\nsequenceDiagram\n    participant User\n    participant API\n    participant Database\n\n    User->>API: POST /login\n    API->>Database: Query credentials\n    Database-->>API: Return user data\n    alt Valid credentials\n        API-->>User: 200 OK + JWT token\n    else Invalid credentials\n        API-->>User: 401 Unauthorized\n    end\n\nFlowchart (User Journey)\nflowchart TD\n    Start([User visits site]) --> Auth{Authenticated?}\n    Auth -->|No| Login[Show login page]\n    Auth -->|Yes| Dashboard[Show dashboard]\n    Login --> Creds[Enter credentials]\n    Creds --> Validate{Valid?}\n    Validate -->|Yes| Dashboard\n    Validate -->|No| Error[Show error]\n    Error --> Login\n\nERD (Database Schema)\nerDiagram\n    USER ||--o{ ORDER : places\n    ORDER ||--|{ LINE_ITEM : contains\n    PRODUCT ||--o{ LINE_ITEM : includes\n\n    USER {\n        int id PK\n        string email UK\n        string name\n        datetime created_at\n    }\n\n    ORDER {\n        int id PK\n        int user_id FK\n        decimal total\n        datetime created_at\n    }\n\nBest Practices\nStart simple — begin with core entities/components, add details incrementally\nUse meaningful names — clear labels make diagrams self-documenting\nComment extensively — use %% comments to explain complex relationships\nKeep focused — one diagram per concept; split large diagrams into multiple views\nVersion control — store .mmd files alongside code for easy updates\nAdd context — include titles and notes to explain diagram purpose\nIterate — refine diagrams as understanding evolves\nConfiguration and Theming\n\nConfigure diagrams using frontmatter:\n\n---\nconfig:\n  theme: base\n  themeVariables:\n    primaryColor: \"#ff6b6b\"\n---\nflowchart LR\n    A --> B\n\n\nAvailable themes: default, forest, dark, neutral, base\n\nLayout options:\n\nlayout: dagre (default) — classic balanced layout\nlayout: elk — advanced layout for complex diagrams\n\nLook options:\n\nlook: classic — traditional Mermaid style\nlook: handDrawn — sketch-like appearance\nRendering and Export\n\nNative support in:\n\nGitHub/GitLab — automatically renders in Markdown\nVS Code — with Markdown Mermaid extension\nNotion, Obsidian, Confluence — built-in support\n\nExport options:\n\nMermaid Live Editor — online editor with PNG/SVG export\nMermaid CLI — npm install -g @mermaid-js/mermaid-cli then mmdc -i input.mmd -o output.png\nWhen to Create Diagrams\n\nAlways diagram when:\n\nStarting new projects or features\nDocumenting complex systems\nExplaining architecture decisions\nDesigning database schemas\nPlanning refactoring efforts\nOnboarding new team members\n\nUse diagrams to:\n\nAlign stakeholders on technical decisions\nDocument domain models collaboratively\nVisualize data flows and system interactions\nPlan before coding\nCreate living documentation that evolves with code\nCommon Pitfalls\nBreaking characters — avoid {} in comments; escape special characters\nSyntax errors — misspellings break diagrams; validate in Mermaid Live\nOvercomplexity — split complex diagrams into multiple focused views\nMissing relationships — document all important connections between entities\nStale diagrams — a wrong diagram is worse than no diagram; update when systems change\nNEVER Do\nNEVER create diagrams with more than 15 nodes — they become unreadable; split into multiple focused diagrams\nNEVER leave arrows unlabeled — every connection should explain the relationship or data flow\nNEVER create diagrams without a title or caption — context-free diagrams are useless outside the author's head\nNEVER use diagrams as the sole documentation — pair diagrams with prose that explains the \"why\"\nNEVER let diagrams go stale — update diagrams when architecture changes; stale diagrams mislead\nNEVER use Mermaid for data visualization — Mermaid is for architecture and flow diagrams, not charts of business data"
  },
  "trust": {
    "sourceLabel": "tencent",
    "provenanceUrl": "https://clawhub.ai/wpank/mermaid-diagrams",
    "publisherUrl": "https://clawhub.ai/wpank/mermaid-diagrams",
    "owner": "wpank",
    "version": "0.1.0",
    "license": null,
    "verificationStatus": "Indexed source record"
  },
  "links": {
    "detailUrl": "https://openagent3.xyz/skills/mermaid-diagrams",
    "downloadUrl": "https://openagent3.xyz/downloads/mermaid-diagrams",
    "agentUrl": "https://openagent3.xyz/skills/mermaid-diagrams/agent",
    "manifestUrl": "https://openagent3.xyz/skills/mermaid-diagrams/agent.json",
    "briefUrl": "https://openagent3.xyz/skills/mermaid-diagrams/agent.md"
  }
}