← 返回 Skills 市场

Diagram

Name: Diagram
Author: ivangdavila

作者 Iván · GitHub ↗ · v1.0.0

cross-platform ⚠ suspicious

1821

总下载

当前安装

版本数

在 OpenClaw 中安装

/install diagram

功能描述

Generate diagrams from descriptions with Mermaid, PlantUML, or ASCII for architecture, flows, sequences, and data models.

使用说明 (SKILL.md)

Principle

Diagrams should clarify, not complicate. Start simple, add detail only when needed. A 5-box flowchart beats a 50-node sprawl.

When User Describes a System or Flow

Identify diagram type — Is this a flow, architecture, sequence, or data model?
Choose format — Mermaid (default), PlantUML (complex), ASCII (inline), SVG (custom)
Draft minimal version — Core elements only, no decoration
Iterate — Add detail based on feedback

Diagram Types

Type	Use For	Format
Flowchart	Processes, decisions, workflows	Mermaid `flowchart`
Sequence	API calls, interactions, protocols	Mermaid `sequenceDiagram`
Architecture	System components, infrastructure	Mermaid `flowchart` or `C4`
ER/Data model	Database schemas, relationships	Mermaid `erDiagram`
Class	Object structure, inheritance	Mermaid `classDiagram`
State	Lifecycles, status transitions	Mermaid `stateDiagram-v2`
Timeline	Project phases, history	Mermaid `timeline`
Mindmap	Brainstorming, concept mapping	Mermaid `mindmap`

Output Methods

Method	When
Mermaid code block	User can render (docs, GitHub, Notion)
Render to PNG/SVG	User needs image file
ASCII inline	Quick sketch in chat
HTML + Mermaid.js	Interactive viewing

Rendering Mermaid to Image

# Using mmdc (mermaid-cli)
npx -y @mermaid-js/mermaid-cli mmdc -i diagram.mmd -o diagram.png -b transparent

# Or via browser tool
# Write HTML with Mermaid, screenshot the rendered diagram

Mermaid Quick Reference

Flowchart:

flowchart LR
    A[Start] --> B{Decision}
    B -->|Yes| C[Action]
    B -->|No| D[End]

Sequence:

sequenceDiagram
    User->>API: Request
    API->>DB: Query
    DB-->>API: Result
    API-->>User: Response

ER Diagram:

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

Style Guidelines

Left-to-right (LR) for processes, top-to-bottom (TB) for hierarchies
Max 10-15 nodes per diagram, split if larger
Consistent naming — all caps for systems, lowercase for actions
Subgraphs to group related components
Color sparingly — highlight critical paths only

Common Requests

Request	Interpret As
"Draw my API flow"	Sequence diagram: client → API → services
"Show the architecture"	Flowchart with subgraphs for components
"Database schema"	ER diagram with relationships
"How the auth works"	Sequence or flowchart depending on complexity
"User journey"	Flowchart with decision points

Anti-Patterns

❌ Too many nodes (split into multiple diagrams)
❌ Decorative icons without meaning
❌ Mixing abstraction levels (database tables next to business concepts)
❌ Arrows in all directions (confuses flow)
❌ Labels too long (use short names, add legend if needed)

安全使用建议

This skill is coherent and only provides instructions for producing diagrams. Before running commands the skill suggests (for example `npx @mermaid-js/mermaid-cli`), be aware those commands will download and run code from the npm registry and require Node/npm installed on the host. If you or your agent will execute shell commands, prefer installing and vetting the mermaid-cli package in advance (or use a trusted renderer/service) rather than blindly running on-demand `npx` installs. No credentials are requested by the skill, but as always be cautious about allowing any agent to execute arbitrary shell commands or install third-party packages.

功能分析

Type: OpenClaw Skill Name: diagram Version: 1.0.0 The skill bundle is designed for diagram generation, which is a benign purpose. However, the `SKILL.md` file includes a `bash` command example using `npx @mermaid-js/mermaid-cli mmdc` to render diagrams. While this command is legitimate for the skill's function, its presence in an AI agent's instructions introduces a potential shell injection vulnerability. If the agent constructs the input/output filenames or other parameters for this command based on unsanitized user input, it could lead to arbitrary command execution. This is classified as suspicious due to the inherent risk of shell command execution, even though there's no clear evidence of malicious intent within the provided files.

能力评估

ℹ Purpose & Capability

Name/description match the instructions: the SKILL.md describes producing Mermaid/PlantUML/ASCII diagrams and gives examples. Minor inconsistency: the doc shows invoking mermaid-cli via `npx` (which requires Node/npm) but the skill's required-binaries list is empty — the author didn't declare Node as a prerequisite.

✓ Instruction Scope

Instructions stay on-topic: choose diagram type, produce Mermaid/PlantUML/ASCII, render to image or HTML. The document does not instruct reading unrelated files, environment variables, or exfiltrating data. Example commands (npx mmdc) are the only external runtime actions suggested.

ℹ Install Mechanism

There is no install spec (instruction-only), which is low risk. However the SKILL.md recommends using `npx @mermaid-js/mermaid-cli` which will fetch and execute code from the npm registry at runtime — a common workflow but one that pulls remote code when executed.

✓ Credentials

The skill requests no environment variables, credentials, or config paths. That is proportionate for a diagram helper.

✓ Persistence & Privilege

always:false and no install or config changes are declared. The skill does not request persistent presence or elevated privileges.

如何使用

确保已安装 OpenClaw（本地或 Docker 部署）
在对话框中输入安装命令：/install diagram
安装完成后，直接呼叫该 Skill 的名称或使用 /diagram 触发
根据 Skill 的参数说明提供必要输入，即可获得结构化输出

版本历史

v1.0.0

Initial release

元数据

Slug diagram

版本 1.0.0

许可证 —

累计安装 17

当前安装数 16

历史版本数 1

常见问题

Diagram 是什么？

Generate diagrams from descriptions with Mermaid, PlantUML, or ASCII for architecture, flows, sequences, and data models. 它是一个面向 Claude Code / OpenClaw 的 AI Agent Skill 插件，目前累计下载 1821 次。

如何安装 Diagram？

在 OpenClaw 或 Claude Code 对话框中运行命令「/install diagram」即可一键安装，无需额外配置。

Diagram 是免费的吗？

是的，Diagram 完全免费（开源免费），可自由下载、安装和使用。

Diagram 支持哪些平台？

Diagram 跨平台运行，可在任意部署了 OpenClaw / Claude Code 的环境中使用（cross-platform）。

谁开发了 Diagram？

由 Iván（@ivangdavila）开发并维护，当前版本 v1.0.0。