[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6FKAFPNEF8V01PR6SDPE8BY":3,"skill-same:01M6FKAFPNEF8V01PR6SDPE8BY":45},{"skillNo":4,"name":5,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":15,"categories":16,"keywords":17,"publishedAt":18,"linkOnly":19,"markdownContent":20,"markdownBody":20,"frontMatter":21,"refName":22,"commitSha":23,"skillDirectory":24,"forksCount":25,"repositoryHtmlUrl":26,"repositoryHomepageUrl":27,"ownerHtmlUrl":28,"ownerBlogUrl":6,"ownerDescription":29,"updatedAt":30,"install":31,"resources":44},"01M6FKAFPNEF8V01PR6SDPE8BY","diagramming",null,"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\u002Fynulihao\u002FAgentSkillOS\u002Fdiagramming\u002FSKILL.md",[],[5],"2026-11-10 10:12:30",false,"# Diagramming\n\n## Overview\n\nCreate clear, maintainable technical diagrams using Mermaid syntax. This skill covers architecture diagrams, sequence diagrams, entity-relationship diagrams, flowcharts, and state diagrams for documenting software systems.\n\n## Instructions\n\n### 1. Choose the Right Diagram Type\n\n| Diagram Type    | Use When                                |\n| --------------- | --------------------------------------- |\n| Architecture\u002FC4 | Showing system structure and components |\n| Sequence        | Showing interactions over time          |\n| ERD             | Showing data models and relationships   |\n| Flowchart       | Showing decision logic and processes    |\n| State           | Showing state transitions               |\n\n### 2. General Mermaid Principles\n\n- Keep diagrams focused on one concept\n- Use consistent naming conventions\n- Add descriptive labels to relationships\n- Limit complexity (split large diagrams)\n- Use comments for documentation\n\n## Best Practices\n\n- **Simplicity**: One diagram, one concept\n- **Consistency**: Same naming across related diagrams\n- **Readability**: Left-to-right or top-to-bottom flow\n- **Labels**: Always label relationships and transitions\n- **Context**: Include a title and brief description\n\n## Examples\n\n### Architecture Diagrams (C4 Model)\n\n#### Context Diagram (Level 1)\n\n```mermaid\nC4Context\n    title System Context Diagram for E-Commerce Platform\n\n    Person(customer, \"Customer\", \"A user who purchases products\")\n    Person(admin, \"Admin\", \"Manages products and orders\")\n\n    System(ecommerce, \"E-Commerce Platform\", \"Allows customers to browse and purchase products\")\n\n    System_Ext(payment, \"Payment Gateway\", \"Handles payment processing\")\n    System_Ext(shipping, \"Shipping Provider\", \"Handles order fulfillment\")\n    System_Ext(email, \"Email Service\", \"Sends notifications\")\n\n    Rel(customer, ecommerce, \"Browses, purchases\")\n    Rel(admin, ecommerce, \"Manages\")\n    Rel(ecommerce, payment, \"Processes payments\")\n    Rel(ecommerce, shipping, \"Creates shipments\")\n    Rel(ecommerce, email, \"Sends emails\")\n```\n\n#### Container Diagram (Level 2)\n\n```mermaid\nC4Container\n    title Container Diagram for E-Commerce Platform\n\n    Person(customer, \"Customer\")\n\n    Container_Boundary(ecommerce, \"E-Commerce Platform\") {\n        Container(web, \"Web Application\", \"React\", \"Customer-facing UI\")\n        Container(api, \"API Gateway\", \"Node.js\", \"REST API\")\n        Container(cart, \"Cart Service\", \"Node.js\", \"Shopping cart management\")\n        Container(catalog, \"Catalog Service\", \"Python\", \"Product catalog\")\n        Container(order, \"Order Service\", \"Java\", \"Order processing\")\n        ContainerDb(db, \"Database\", \"PostgreSQL\", \"Stores all data\")\n        ContainerQueue(queue, \"Message Queue\", \"RabbitMQ\", \"Async messaging\")\n    }\n\n    Rel(customer, web, \"Uses\", \"HTTPS\")\n    Rel(web, api, \"Calls\", \"JSON\u002FHTTPS\")\n    Rel(api, cart, \"Routes to\")\n    Rel(api, catalog, \"Routes to\")\n    Rel(api, order, \"Routes to\")\n    Rel(cart, db, \"Reads\u002Fwrites\")\n    Rel(catalog, db, \"Reads\")\n    Rel(order, db, \"Reads\u002Fwrites\")\n    Rel(order, queue, \"Publishes events\")\n```\n\n#### Component Diagram (Level 3)\n\n```mermaid\nflowchart TB\n    subgraph \"Order Service\"\n        controller[Order Controller]\n        service[Order Service]\n        repo[Order Repository]\n        validator[Order Validator]\n        publisher[Event Publisher]\n    end\n\n    subgraph \"External\"\n        db[(PostgreSQL)]\n        queue[RabbitMQ]\n    end\n\n    controller --> service\n    service --> validator\n    service --> repo\n    service --> publisher\n    repo --> db\n    publisher --> queue\n```\n\n### Sequence Diagrams\n\n#### Basic Request Flow\n\n```mermaid\nsequenceDiagram\n    autonumber\n    participant C as Client\n    participant G as API Gateway\n    participant A as Auth Service\n    participant S as Service\n    participant D as Database\n\n    C->>G: POST \u002Fapi\u002Fresource\n    G->>A: Validate token\n    A-->>G: Token valid\n\n    G->>S: Forward request\n    S->>D: Query data\n    D-->>S: Return results\n\n    S-->>G: Response (200 OK)\n    G-->>C: Response with data\n```\n\n#### Error Handling Flow\n\n```mermaid\nsequenceDiagram\n    participant C as Client\n    participant S as Service\n    participant D as Database\n\n    C->>S: POST \u002Fapi\u002Fusers\n    S->>S: Validate input\n\n    alt Validation fails\n        S-->>C: 400 Bad Request\n    else Validation passes\n        S->>D: INSERT user\n        alt Database error\n            D-->>S: Constraint violation\n            S-->>C: 409 Conflict\n        else Success\n            D-->>S: User created\n            S-->>C: 201 Created\n        end\n    end\n```\n\n#### Async Processing\n\n```mermaid\nsequenceDiagram\n    participant C as Client\n    participant API as API\n    participant Q as Queue\n    participant W as Worker\n    participant N as Notification\n\n    C->>API: Submit job\n    API->>Q: Enqueue job\n    API-->>C: 202 Accepted (job ID)\n\n    Note over Q,W: Async processing\n\n    Q->>W: Dequeue job\n    W->>W: Process job\n    W->>N: Send notification\n    N-->>C: Job complete notification\n```\n\n### Entity-Relationship Diagrams\n\n#### Basic ERD\n\n```mermaid\nerDiagram\n    USER ||--o{ ORDER : places\n    USER {\n        uuid id PK\n        string email UK\n        string name\n        timestamp created_at\n    }\n\n    ORDER ||--|{ ORDER_ITEM : contains\n    ORDER {\n        uuid id PK\n        uuid user_id FK\n        decimal total\n        string status\n        timestamp created_at\n    }\n\n    ORDER_ITEM }|--|| PRODUCT : references\n    ORDER_ITEM {\n        uuid id PK\n        uuid order_id FK\n        uuid product_id FK\n        int quantity\n        decimal price\n    }\n\n    PRODUCT ||--o{ PRODUCT_CATEGORY : \"belongs to\"\n    PRODUCT {\n        uuid id PK\n        string name\n        text description\n        decimal price\n        int stock\n    }\n\n    CATEGORY ||--o{ PRODUCT_CATEGORY : contains\n    CATEGORY {\n        uuid id PK\n        string name\n        uuid parent_id FK\n    }\n\n    PRODUCT_CATEGORY {\n        uuid product_id PK,FK\n        uuid category_id PK,FK\n    }\n```\n\n#### ERD with Relationships Explained\n\n```mermaid\nerDiagram\n    CUSTOMER ||--o{ ORDER : \"places (1:N)\"\n    ORDER ||--|{ LINE_ITEM : \"contains (1:N, required)\"\n    PRODUCT ||--o{ LINE_ITEM : \"appears in (1:N)\"\n    CUSTOMER }|--|| ADDRESS : \"has billing (N:1, required)\"\n    CUSTOMER }o--o{ ADDRESS : \"has shipping (N:N)\"\n```\n\nRelationship notation:\n\n- `||` exactly one\n- `o|` zero or one\n- `}|` one or more\n- `}o` zero or more\n\n### Flowcharts\n\n#### Decision Logic\n\n```mermaid\nflowchart TD\n    A[Start: User Login] --> B{Valid credentials?}\n    B -->|Yes| C{2FA enabled?}\n    B -->|No| D[Show error message]\n    D --> A\n\n    C -->|Yes| E[Send 2FA code]\n    E --> F{Code valid?}\n    F -->|Yes| G[Create session]\n    F -->|No| H{Attempts \u003C 3?}\n    H -->|Yes| E\n    H -->|No| I[Lock account]\n\n    C -->|No| G\n    G --> J[Redirect to dashboard]\n    J --> K[End]\n    I --> K\n```\n\n#### Process Flow\n\n```mermaid\nflowchart LR\n    subgraph \"CI Pipeline\"\n        A[Push Code] --> B[Run Tests]\n        B --> C{Tests Pass?}\n        C -->|Yes| D[Build Image]\n        C -->|No| E[Notify Developer]\n        D --> F[Push to Registry]\n    end\n\n    subgraph \"CD Pipeline\"\n        F --> G[Deploy to Staging]\n        G --> H[Run E2E Tests]\n        H --> I{Tests Pass?}\n        I -->|Yes| J[Deploy to Production]\n        I -->|No| K[Rollback]\n    end\n```\n\n### State Diagrams\n\n#### Order State Machine\n\n```mermaid\nstateDiagram-v2\n    [*] --> Draft: Create order\n\n    Draft --> Pending: Submit\n    Draft --> Cancelled: Cancel\n\n    Pending --> Confirmed: Payment received\n    Pending --> Cancelled: Payment failed\n    Pending --> Cancelled: Timeout (24h)\n\n    Confirmed --> Processing: Begin fulfillment\n    Confirmed --> Cancelled: Customer cancel\n\n    Processing --> Shipped: Ship order\n    Processing --> Cancelled: Out of stock\n\n    Shipped --> Delivered: Delivery confirmed\n    Shipped --> Returned: Return initiated\n\n    Delivered --> Returned: Return requested\n    Delivered --> [*]: Complete\n\n    Returned --> Refunded: Process refund\n    Refunded --> [*]: Complete\n\n    Cancelled --> [*]: Complete\n```\n\n#### Connection State Machine\n\n```mermaid\nstateDiagram-v2\n    [*] --> Disconnected\n\n    Disconnected --> Connecting: connect()\n    Connecting --> Connected: success\n    Connecting --> Disconnected: failure\n\n    Connected --> Disconnected: disconnect()\n    Connected --> Reconnecting: connection lost\n\n    Reconnecting --> Connected: success\n    Reconnecting --> Disconnected: max retries\n\n    note right of Reconnecting\n        Exponential backoff\n        Max 5 retries\n    end note\n```\n\n### Class Diagrams\n\n```mermaid\nclassDiagram\n    class Repository~T~ {\n        \u003C\u003Cinterface>>\n        +findById(id: string) T\n        +findAll() List~T~\n        +save(entity: T) T\n        +delete(id: string) void\n    }\n\n    class UserRepository {\n        -db: Database\n        +findById(id: string) User\n        +findAll() List~User~\n        +save(entity: User) User\n        +delete(id: string) void\n        +findByEmail(email: string) User\n    }\n\n    class User {\n        +id: string\n        +email: string\n        +name: string\n        +createdAt: Date\n        +validate() boolean\n    }\n\n    Repository~T~ \u003C|.. UserRepository\n    UserRepository --> User\n```\n",{},"main","def8531e65114c0fca8fb8551c1871ee0eed705c","skills\u002Fynulihao\u002FAgentSkillOS\u002Fdiagramming",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":7,"skillName":5,"commands":32,"prompt":42,"zipAvailable":43},[33,36,39],{"tool":34,"command":35},"npx","npx skills add ComeOnOliver\u002Fskillshub --skill diagramming",{"tool":37,"command":38},"bunx","bunx skills add ComeOnOliver\u002Fskillshub --skill diagramming",{"tool":40,"command":41},"pnpm","pnpm dlx skills add ComeOnOliver\u002Fskillshub --skill diagramming","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fynulihao\u002FAgentSkillOS\u002Fdiagramming\u002FSKILL.md",true,[],[46,60,70,79,85,92],{"skillNo":47,"name":48,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":49,"categories":50,"keywords":56,"publishedAt":18},"01M6FKJN13GMG4KY57J3QD8GY5","model-hierarchy-skill","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzscole\u002Fmodel-hierarchy-skill\u002Fmodel-hierarchy-skill\u002FSKILL.md",[51],{"categoryNo":52,"categoryName":53,"taxonomyType":54,"taxonomyTypeDesc":55},"01JBSEEDCAT000000000000023","Skill与智能体开发","SCENARIO","使用场景",[57,58,59],"model","model hierarchy","model hierarchy skill",{"skillNo":61,"name":62,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":63,"categories":64,"keywords":66,"publishedAt":18},"01M6FKJJJ6GCAMR4PPPRD12M5X","zoom-mcp","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fzoom-mcp\u002FSKILL.md",[65],{"categoryNo":52,"categoryName":53,"taxonomyType":54,"taxonomyTypeDesc":55},[67,68,69],"MCP","zoom","zoom mcp",{"skillNo":71,"name":72,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":73,"categories":74,"keywords":75,"publishedAt":18},"01M6FKJE3KYT3KPEZMEEHYKA6K","zoom-apps-sdk","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fzoom-apps-sdk\u002FSKILL.md",[],[76,77,78,68],"sdk","zoom apps sdk","apps",{"skillNo":80,"name":81,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":82,"categories":83,"keywords":84,"publishedAt":18},"01M6FKJ9EDH9Q5VWDF8HAJRSP0","windows","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwindows\u002FSKILL.md",[],[81],{"skillNo":86,"name":87,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":88,"categories":89,"keywords":91,"publishedAt":18},"01M6FKJ666BEEFC3AE9GJ72Q93","whiteboard","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwhiteboard\u002FSKILL.md",[90],{"categoryNo":52,"categoryName":53,"taxonomyType":54,"taxonomyTypeDesc":55},[87],{"skillNo":93,"name":94,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":95,"categories":96,"keywords":97,"publishedAt":18},"01M6FKJ21WFCDGTJQ2Q91T9DVW","websockets","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwebsockets\u002FSKILL.md",[],[94]]