AgentSkillsCN

diagram

利用{{< mermaid >}}短代码，为Hugo博客文章生成Mermaid.js图表。 适用场景：(1) 用户请求绘制图表、流程图或可视化内容；(2) 阐述某个流程、工作流或状态机；(3) 展示数据流、系统架构或实体关系；(4) 在博客内容中呈现序列、时间轴或决策树。

SKILL.md
--- frontmatter
name: diagram
description: |
  Generate Mermaid.js diagrams for Hugo blog posts using the {{< mermaid >}} shortcode.
  Use when: (1) user asks for a diagram, flowchart, or visualization, (2) explaining a process,
  workflow, or state machine, (3) showing data flow, system architecture, or entity relationships,
  (4) illustrating sequences, timelines, or decision trees in blog content.

Mermaid Diagram Generator

Generate diagrams for Hugo posts using the LoveIt theme's mermaid shortcode.

Output Format

hugo
{{< mermaid >}}
<mermaid code>
{{< /mermaid >}}

Diagram Type Selection

ConceptDiagram TypeKeyword
Pipeline/workflow statesstateDiagram-v2States with transitions
System architecturegraph LR or graph TBBoxes and arrows
API/event sequencessequenceDiagramActor interactions over time
Data modelserDiagramTables with relationships
Project timelinesganttTasks with dates
Decision treesflowchartConditions and branches

Examples

State diagram (user journey, pipeline stages):

code
stateDiagram-v2
    [*] --> Raw
    Raw --> Staged: validate
    Staged --> Curated: transform
    Curated --> [*]

Flowchart (architecture, data flow):

code
graph LR
    A[Source] --> B{Validate}
    B -->|Pass| C[Transform]
    B -->|Fail| D[DLQ]
    C --> E[(Warehouse)]

Sequence (API calls, message flow):

code
sequenceDiagram
    Producer->>Kafka: publish
    Kafka->>Consumer: poll
    Consumer->>DB: write

ER diagram (schema relationships):

code
erDiagram
    USER ||--o{ ORDER : places
    ORDER ||--|{ ITEM : contains

Guidelines

  1. •Choose diagram type based on what's being illustrated, not user's exact words
  2. •Keep diagrams simple: 5-10 nodes max
  3. •Use short, clear labels
  4. •Direction: LR for processes, TB for hierarchies
  5. •No titles in diagram - post context provides it