diagram-tools

图表工具技能 - 支持 Mermaid、Graphviz、流程图、思维导图等多种图表生成

Safety Notice

This listing is from the official public ClawHub registry. Review SKILL.md and referenced scripts before running.

Copy this and send it to your AI assistant to learn

Install skill "diagram-tools" with this command: npx skills add zsdadad/diagram-tools

Diagram Tools 图表工具技能

强大的图表生成工具集,支持多种图表格式和渲染引擎。

适用场景

  • 📊 流程图设计
  • 🧠 思维导图
  • 📈 数据可视化
  • 🔄 架构图
  • 📑 UML 图
  • 📅 时间线图

核心功能

1. Mermaid 图表

使用 Mermaid 语法生成各类图表:

  • Flowchart 流程图
  • Sequence 时序图
  • Class 类图
  • State 状态图
  • ER 数据库图
  • Gantt 甘特图
  • Pie 饼图
  • Mindmap 思维导图
  • Timeline 时间线

2. Graphviz 图表

使用 DOT 语言生成:

  • 有向图/无向图
  • 层级图
  • 树形图

3. 数据图表

  • 柱状图
  • 折线图
  • 饼图

Mermaid 语法示例

流程图

graph TD
    A[开始] --> B{判断}
    B -->|是| C[处理1]
    B -->|否| D[处理2]
    C --> E[结束]
    D --> E

思维导图

mindmap
  root((主题))
    分支1
      子主题A
      子主题B
    分支2
      子主题C

时序图

sequenceDiagram
    A->>B: 消息1
    B->>A: 响应

Graphviz 示例

from graphviz import Digraph
dot = Digraph()
dot.node('A', '节点A')
dot.node('B', '节点B')
dot.edge('A', 'B')
dot.render('output', format='png')

支持的图表类型

类型Mermaid 语法
流程图graph TD / graph LR
时序图sequenceDiagram
类图classDiagram
状态图stateDiagram-v2
ER图erDiagram
甘特图gantt
饼图pie
思维导图mindmap
时间线timeline
四象限quadrantChart

主题配置

自定义颜色主题:

{
  "theme": "base",
  "themeVariables": {
    "primaryColor": "#1976d2",
    "lineColor": "#666666",
    "secondaryColor": "#4caf50"
  }
}

使用技巧

  • 使用 graph LR 表示从左到右
  • 使用 graph TD 表示从上到下
  • 保持节点标签简短
  • 使用子图分组相关组件
  • 高清输出使用 -s 2-s 3

相关技能

  • mermaid - Mermaid 图表
  • markdown-tools - Markdown 处理
  • meeting-notes - Word 文档

更新日志

  • v1.0.0 - 初始版本,整合 Mermaid 和 Graphviz

Source Transparency

This detail page is rendered from real SKILL.md content. Trust labels are metadata-based hints, not a safety guarantee.

Related Skills

Related by shared tags or category signals.

Automation

Excalidraw Render

Create professional Excalidraw diagrams — flowcharts, architecture diagrams, workflows, systems, processes, or concepts. Use when user asks to "create a diag...

Registry SourceRecently Updated
702Profile unavailable
General

Architecture Diagram

AI architecture diagram generator supporting Mermaid charts. Generate system architecture, cloud architecture, neural network, graph theory, flowchart, ER di...

Registry SourceRecently Updated
2020Profile unavailable
General

Architecture Diagram Generator (FMTWiki Fork)

Create professional, dark-themed architecture diagrams as standalone HTML files with inline SVG graphics. Use when the user asks for system architecture diag...

Registry SourceRecently Updated
1770Profile unavailable
General

Emergence Render Image

Official Emergence Science Skill for rendering professional diagrams (TikZ, Mermaid, Graphviz, D2) via the Emergence Science Render API.

Registry SourceRecently Updated
820Profile unavailable