diagramming-expert

Name: diagramming-expert
Author: curiositech

github.com/curiositech设计与 UI257221 次安装2 天前更新

代码仓库

关于 diagramming-expert

diagramming-expert 是一项指导 Agent 以文本图表表达复杂概念、系统和流程的技能，面向需要清晰呈现关系与结构的场景。它强调降低认知负担、减少装饰，并提供多类图表模式及 Mermaid 表示法。

主要功能

01创建流程、层级和关系图
02呈现架构、序列与反馈循环
03依据数据墨水比减少视觉噪声
04提供图表字符与模式参考
05按步骤规划并迭代图表

适用场景

01梳理系统组件及其关系
02展示流程、状态转换或决策树
03绘制分类体系与时间序列
04映射心理结构和反馈系统

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/curiositech/some_claude_skills --skill diagramming-expert

安装后在 Claude Code 中输入/diagramming-expert确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

.claude-plugin/

plugin.json

references/

diagram-types.md

jungian-diagrams.md

patterns-library.md

unicode-characters.md

详细介绍

图表绘制专家

精通基于文本的视觉表达。主动创建图表，帮助理解复杂概念、系统、流程和关系。

核心理念

“最重要的是，展示数据。”——Edward Tufte

图表应该：

降低认知负担——而不是增加负担
最大化信号——尽量减少噪声（数据墨水比）
便于维护——随着认知的演进，易于更新
随处可用——等宽文本可在任何地方渲染

何时使用此技能

适用于：

系统架构和组件关系
流程和状态转换
层级结构（组织架构图、分类体系）
心理结构（心灵地图、部分工作）
决策树和条件逻辑
数据关系和实体模型
反馈循环和因果系统
前后对比
时间线和序列

不适用于：

照片编辑或图像处理
矢量图形或基于 GUI 的设计工具
像素级精确的样稿（使用设计工具）
复杂的 3D 可视化

问问自己：“用图来呈现会不会更清晰？” 如果会 → 绘制图表。

图表类型参考

完整分类请参见 /references/diagram-types.md

快速参考

类型	用途	关键模式
流程图	流程、决策	方框 + 箭头
层级图	组织结构、分类体系	树形结构
分层图	系统架构	堆叠方框
关系图	连接、网络	节点 + 边
序列图	按时间排序的事件	垂直流
对比图	并列分析	平行列
循环图	反馈循环	环形箭头
矩阵图	二维分类	网格结构

字符参考

完整字符集请参见 /references/unicode-characters.md

基本字符

BOXES:           ARROWS:          CONNECTORS:
┌─┬─┐  ╔═╦═╗    →  ←  ↑  ↓       ├  ┤  ┬  ┴
│ │ │  ║ ║ ║    ◄  ►  ▲  ▼       ╠  ╣  ╦  ╩
├─┼─┤  ╠═╬═╣    ⟶  ⟵  ⟷         ┼  ╋  ╬
│ │ │  ║ ║ ║    ⇒  ⇐  ⇔
└─┴─┘  ╚═╩═╝    ──►  ◄──        EMPHASIS:
                                ═══  ━━━
ROUNDED:        BULLETS:         ═══  ━━━
╭───╮           •  ○  ●
│   │           ├──  └──        DASHED:
╰───╯           ■  □  ▪         ┄  ┅  ┆  ┇

设计原则

1. Tufte 的数据墨水比

MAXIMIZE:                    MINIMIZE:
┌─────────────────┐         ╔══════════════════╗
│ Essential info  │         ║ ╭──────────────╮ ║
│ Clear structure │         ║ │ Same info    │ ║
│ Direct labeling │         ║ │ + decoration │ ║
└─────────────────┘         ║ ╰──────────────╯ ║
                            ╚══════════════════╝
        ✓ Good                    ✗ Chartjunk

2. 认知负担管理

CHUNKING: Group related elements

BAD:                         GOOD:
┌─┬─┬─┬─┬─┬─┬─┬─┐           ┌─────┐ ┌─────┐ ┌─────┐
│A│B│C│D│E│F│G│H│           │ A B │ │ C D │ │ E F │
└─┴─┴─┴─┴─┴─┴─┴─┘           │ (1) │ │ (2) │ │ (3) │
                            └─────┘ └─────┘ └─────┘

3. 格式塔原理

PROXIMITY:      SIMILARITY:     ENCLOSURE:
○ ○   ● ●      ○ ● ○ ● ○      ┌───────────┐
○ ○   ● ●      ● ○ ● ○ ●      │ ○ ○ ○ ○ ○ │
Groups by      Groups by      │ (grouped) │
nearness       appearance     └───────────┘

4. 视觉层级

EMPHASIS LEVELS:

═══════════════════════    Level 1: Double/Heavy
───────────────────────    Level 2: Single
- - - - - - - - - - - -    Level 3: Dashed
. . . . . . . . . . . .    Level 4: Dotted

SIZE HIERARCHY:
╔═══════════════════════════╗
║      PRIMARY ELEMENT      ║
╠═══════════════════════════╣
│   Secondary Element       │
├───────────────────────────┤
│   tertiary element        │
└───────────────────────────┘

常见模式

全面的模式请参见 /references/patterns-library.md

流程图

┌─────────┐    ┌─────────┐    ┌─────────┐
│  Start  │───►│ Process │───►│   End   │
└─────────┘    └─────────┘    └─────────┘

决策树

                ┌──────────┐
                │ Decision │
                └────┬─────┘
           ┌─────────┴────────┐
           ▼                  ▼
      ┌────────┐         ┌────────┐
      │  Yes   │         │   No   │
      └────────┘         └────────┘

分层架构

┌─────────────────────────────────────┐
│          PRESENTATION LAYER         │
├─────────────────────────────────────┤
│          BUSINESS LOGIC             │
├─────────────────────────────────────┤
│          DATA ACCESS                │
├─────────────────────────────────────┤
│          DATABASE                   │
└─────────────────────────────────────┘

反馈循环

        ┌──────────────────┐
        │                  │
        ▼                  │
    ┌───────┐          ┌───┴───┐
    │ Input │─────────►│Output │
    └───────┘          └───────┘
        ▲                  │
        │                  │
        └──────────────────┘

反模式

图表垃圾

✗ BAD: Excessive decoration
╔══════════════════════════════════╗
║ ╭━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━╮ ║
║ ┃ ★ ★ ★  IMPORTANT INFO  ★ ★ ★ ┃ ║
║ ╰━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━╯ ║
╚══════════════════════════════════╝

✓ GOOD: Clean and direct
┌──────────────────┐
│  Important Info  │
└──────────────────┘

意大利面式箭头

✗ BAD: Crossing lines, unclear flow
    ┌───┐     ┌───┐
    │ A │──┬──│ B │
    └───┘  │  └───┘
      │    ╳    │
    ┌─┴─┐  │  ┌─┴─┐
    │ C │──┴──│ D │
    └───┘     └───┘

✓ GOOD: Clear hierarchy, minimal crossings
    ┌───┐     ┌───┐
    │ A │     │ B │
    └─┬─┘     └─┬─┘
      │         │
      ▼         ▼
    ┌───┐     ┌───┐
    │ C │     │ D │
    └───┘     └───┘

信息过载

✗ BAD: Too much in one diagram
[Cramming 15 concepts with 30 arrows]

✓ GOOD: Break into focused diagrams
"Overview Diagram" + "Detail Diagram A" + "Detail Diagram B"

技能集成

可与以下技能配合使用：

jungian-psychologist：心灵映射、部分工作图表
system-architect：系统架构图
backend-architect：API 和数据流图

荣格心理学图表

心理学专用模式请参见 /references/jungian-diagrams.md

此技能与 jungian-psychologist 紧密集成，可用于：

心灵结构映射
部分工作可视化
阴影内容图表
个体化历程图
情结结构图
自我—自性轴可视化

Mermaid 集成

在适当情况下，为适合渲染的图表提供 Mermaid 表示法：

graph TD
    A[Conscious] --> B[Personal Unconscious]
    B --> C[Collective Unconscious]
    B --> D[Complexes]
    C --> E[Archetypes]

工作流

理解内容——我们要将什么内容可视化？
选择合适的类型——层级？流程？关系？
勾勒结构——先粗略绘制，再逐步完善
应用原则——数据墨水比、分块、层级
测试可读性——初次接触的人能看懂吗？
迭代——通过修改改进图表

请记住：一张好图胜过千言万语。遇到复杂概念时，主动创建图表。

支持 Markdown

登录后评论