Back to Details

discover-diagrams

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Diagrams Skills Discovery

图表技能发现

Provides automatic access to comprehensive Mermaid.js diagram skills for visual documentation.
为可视化文档提供对全品类Mermaid.js图表技能的自动访问权限。

When This Skill Activates

技能激活场景

This skill auto-activates when you're working with:
  • Process flows and flowcharts
  • Sequence and interaction diagrams
  • System architecture and C4 diagrams
  • Database schemas and ER diagrams
  • Class diagrams and state machines
  • Data visualization charts
  • Project timelines and Gantt charts
  • Git workflows and branching
  • Mindmaps and concept hierarchies
  • Any Mermaid.js diagram creation
该技能会在您处理以下内容时自动激活：
  • 流程与流程图
  • 时序图与交互图
  • 系统架构与C4图
  • 数据库模式与ER图
  • 类图与状态机
  • 数据可视化图表
  • 项目时间线与甘特图
  • Git工作流与分支图
  • 思维导图与概念层级
  • 任何Mermaid.js图表创建任务

Available Skills

可用技能

Quick Reference

快速参考

The diagrams category contains 8 specialized Mermaid.js skills:
  1. mermaid-flowcharts - Process flows, decision trees, node shapes, subgraphs
  2. mermaid-sequence-diagrams - Interactions, message flows, participants, lifelines
  3. mermaid-class-state-diagrams - UML classes, relationships, state machines, FSM
  4. mermaid-er-diagrams - Entity-relationship, database schemas, cardinality
  5. mermaid-architecture-diagrams - C4 diagrams, block diagrams, system design
  6. mermaid-charts - Pie, XY, quadrant, radar charts for data visualization
  7. mermaid-project-diagrams - Gantt charts, timelines, project planning
  8. mermaid-specialized - Git graphs, Sankey flows, mindmaps, requirement diagrams
图表类别包含8项专门的Mermaid.js技能：
  1. mermaid-flowcharts - 流程、决策树、节点形状、子图
  2. mermaid-sequence-diagrams - 交互、消息流、参与者、生命线
  3. mermaid-class-state-diagrams - UML类、关系、状态机、FSM
  4. mermaid-er-diagrams - 实体关系、数据库模式、基数
  5. mermaid-architecture-diagrams - C4图、块图、系统设计
  6. mermaid-charts - 饼图、XY图、象限图、雷达图（用于数据可视化）
  7. mermaid-project-diagrams - 甘特图、时间线、项目规划
  8. mermaid-specialized - Git图、桑基流图、思维导图、需求图

Load Full Category Details

加载完整类别详情

For complete descriptions and workflows:
Read <cc-polymath-root>/skills/diagrams/INDEX.md
This loads the full diagrams category index with:
  • Detailed skill descriptions
  • When to use which diagram type
  • Common workflow combinations
  • Best practices and integration patterns
如需完整描述与工作流：
查看 <cc-polymath-root>/skills/diagrams/INDEX.md
这会加载完整的图表类别索引，包含：
  • 详细的技能描述
  • 不同图表类型的适用场景
  • 常见工作流组合
  • 最佳实践与集成模式

Load Specific Skills

加载特定技能

Load individual skills as needed:
根据需要加载单个技能：

Process and logic

流程与逻辑

Read <cc-polymath-root>/skills/diagrams/mermaid-flowcharts.md Read <cc-polymath-root>/skills/diagrams/mermaid-sequence-diagrams.md
查看 <cc-polymath-root>/skills/diagrams/mermaid-flowcharts.md 查看 <cc-polymath-root>/skills/diagrams/mermaid-sequence-diagrams.md

Structure and design

结构与设计

Read <cc-polymath-root>/skills/diagrams/mermaid-class-state-diagrams.md Read <cc-polymath-root>/skills/diagrams/mermaid-er-diagrams.md Read <cc-polymath-root>/skills/diagrams/mermaid-architecture-diagrams.md
查看 <cc-polymath-root>/skills/diagrams/mermaid-class-state-diagrams.md 查看 <cc-polymath-root>/skills/diagrams/mermaid-er-diagrams.md 查看 <cc-polymath-root>/skills/diagrams/mermaid-architecture-diagrams.md

Data and metrics

数据与指标

Read <cc-polymath-root>/skills/diagrams/mermaid-charts.md
查看 <cc-polymath-root>/skills/diagrams/mermaid-charts.md

Planning and history

规划与历史

Read <cc-polymath-root>/skills/diagrams/mermaid-project-diagrams.md
查看 <cc-polymath-root>/skills/diagrams/mermaid-project-diagrams.md

Specialized diagrams

特殊图表

Read <cc-polymath-root>/skills/diagrams/mermaid-specialized.md
查看 <cc-polymath-root>/skills/diagrams/mermaid-specialized.md

Common Workflows

常见工作流

Document REST API

文档化REST API

Sequence: Architecture → Sequence → ER
Read <cc-polymath-root>/skills/diagrams/mermaid-architecture-diagrams.md # System design Read <cc-polymath-root>/skills/diagrams/mermaid-sequence-diagrams.md # Request/response flows Read <cc-polymath-root>/skills/diagrams/mermaid-er-diagrams.md # Database schema
流程: 架构 → 时序 → ER
查看 <cc-polymath-root>/skills/diagrams/mermaid-architecture-diagrams.md # 系统设计 查看 <cc-polymath-root>/skills/diagrams/mermaid-sequence-diagrams.md # 请求/响应流 查看 <cc-polymath-root>/skills/diagrams/mermaid-er-diagrams.md # 数据库模式

Document Feature Implementation

文档化功能实现

Sequence: Flowchart → Sequence → State
Read <cc-polymath-root>/skills/diagrams/mermaid-flowcharts.md # Business logic Read <cc-polymath-root>/skills/diagrams/mermaid-sequence-diagrams.md # Service interactions Read <cc-polymath-root>/skills/diagrams/mermaid-class-state-diagrams.md # State management
流程: 流程图 → 时序 → 状态
查看 <cc-polymath-root>/skills/diagrams/mermaid-flowcharts.md # 业务逻辑 查看 <cc-polymath-root>/skills/diagrams/mermaid-sequence-diagrams.md # 服务交互 查看 <cc-polymath-root>/skills/diagrams/mermaid-class-state-diagrams.md # 状态管理

Project Planning

项目规划

Sequence: Mindmap → Gantt → Timeline
Read <cc-polymath-root>/skills/diagrams/mermaid-specialized.md # Brainstorm with mindmap Read <cc-polymath-root>/skills/diagrams/mermaid-project-diagrams.md # Schedule with Gantt Read <cc-polymath-root>/skills/diagrams/mermaid-project-diagrams.md # Roadmap with timeline
流程: 思维导图 → 甘特图 → 时间线
查看 <cc-polymath-root>/skills/diagrams/mermaid-specialized.md # 用思维导图头脑风暴 查看 <cc-polymath-root>/skills/diagrams/mermaid-project-diagrams.md # 用甘特图制定计划 查看 <cc-polymath-root>/skills/diagrams/mermaid-project-diagrams.md # 用时间线制作路线图

System Architecture Documentation

系统架构文档化

Sequence: C4 Context → C4 Container → Sequence
Read <cc-polymath-root>/skills/diagrams/mermaid-architecture-diagrams.md # System context Read <cc-polymath-root>/skills/diagrams/mermaid-architecture-diagrams.md # Technology choices Read <cc-polymath-root>/skills/diagrams/mermaid-sequence-diagrams.md # Runtime behavior
流程: C4上下文 → C4容器 → 时序
查看 <cc-polymath-root>/skills/diagrams/mermaid-architecture-diagrams.md # 系统上下文 查看 <cc-polymath-root>/skills/diagrams/mermaid-architecture-diagrams.md # 技术选型 查看 <cc-polymath-root>/skills/diagrams/mermaid-sequence-diagrams.md # 运行时行为

Database Design

数据库设计

Sequence: ER → Class
Read <cc-polymath-root>/skills/diagrams/mermaid-er-diagrams.md # Schema design Read <cc-polymath-root>/skills/diagrams/mermaid-class-state-diagrams.md # ORM models
流程: ER → 类
查看 <cc-polymath-root>/skills/diagrams/mermaid-er-diagrams.md # 模式设计 查看 <cc-polymath-root>/skills/diagrams/mermaid-class-state-diagrams.md # ORM模型

Diagram Selection Guide

图表选择指南

Process & Logic:
  • Flowchart: Algorithms, workflows, decision trees
  • Sequence: API calls, protocols, service communication
  • State: Lifecycle management, FSM, protocol states
Structure & Design:
  • Class: Object models, API structure, OOP design
  • ER: Database schema, data relationships
  • Architecture: System topology, infrastructure, C4 diagrams
Data & Metrics:
  • Pie: Distribution percentages, market share
  • XY Charts: Trends over time, performance metrics
  • Quadrant: Prioritization matrices, risk assessment
  • Radar: Skill assessments, feature comparison
  • Sankey: Flow analysis, conversion funnels
Planning & History:
  • Gantt: Project schedules, task dependencies
  • Timeline: Product roadmaps, company history
  • GitGraph: Branching strategies, release workflows
Ideation:
  • Mindmap: Brainstorming, concept hierarchies, learning paths
流程与逻辑:
  • 流程图: 算法、工作流、决策树
  • 时序图: API调用、协议、服务通信
  • 状态图: 生命周期管理、FSM、协议状态
结构与设计:
  • 类图: 对象模型、API结构、OOP设计
  • ER图: 数据库模式、数据关系
  • 架构图: 系统拓扑、基础设施、C4图
数据与指标:
  • 饼图: 分布百分比、市场份额
  • XY图: 时间趋势、性能指标
  • 象限图: 优先级矩阵、风险评估
  • 雷达图: 技能评估、功能对比
  • 桑基图: 流分析、转化漏斗
规划与历史:
  • 甘特图: 项目计划、任务依赖
  • 时间线: 产品路线图、公司历史
  • GitGraph: 分支策略、发布工作流
创意构思:
  • 思维导图: 头脑风暴、概念层级、学习路径

Integration with Other Skills

与其他技能的集成

Diagram skills commonly combine with:
API skills (
discover-api
):
  • Sequence diagrams for API interactions
  • ER diagrams for data models
  • Architecture diagrams for system design
Database skills (
discover-database
):
  • ER diagrams for schema design
  • Sequence diagrams for query patterns
  • Flowcharts for migration processes
Testing skills (
discover-testing
):
  • Flowcharts for test scenarios
  • Sequence diagrams for test flows
  • State diagrams for state-based testing
Frontend skills (
discover-frontend
):
  • Flowcharts for user flows
  • State diagrams for UI state management
  • Sequence diagrams for data fetching
Infrastructure skills (
discover-infra
, 
discover-cloud
):
  • Architecture diagrams for deployment
  • Sequence diagrams for CI/CD pipelines
  • Gantt charts for migration schedules
图表技能通常与以下技能结合使用：
API技能 (
discover-api
):
  • 用于API交互的时序图
  • 用于数据模型的ER图
  • 用于系统设计的架构图
数据库技能 (
discover-database
):
  • 用于模式设计的ER图
  • 用于查询模式的时序图
  • 用于迁移流程的流程图
测试技能 (
discover-testing
):
  • 用于测试场景的流程图
  • 用于测试流的时序图
  • 用于基于状态测试的状态图
前端技能 (
discover-frontend
):
  • 用于用户流的流程图
  • 用于UI状态管理的状态图
  • 用于数据获取的时序图
基础设施技能 (
discover-infra
, 
discover-cloud
):
  • 用于部署的架构图
  • 用于CI/CD流水线的时序图
  • 用于迁移计划的甘特图

Usage Instructions

使用说明

  1. Auto-activation: This skill loads automatically when Claude Code detects diagram/visualization work
  2. Browse skills: Run 
    Read <cc-polymath-root>/skills/diagrams/INDEX.md
    for full category overview
  3. Load specific skills: Use bash commands above to load individual diagram skills
  4. Follow workflows: Use recommended sequences for comprehensive documentation
  5. Combine diagrams: Multiple diagram types provide complete picture
  1. 自动激活: 当Claude Code检测到图表/可视化工作时，该技能会自动加载
  2. 浏览技能: 运行 
    Read <cc-polymath-root>/skills/diagrams/INDEX.md
    查看完整类别概览
  3. 加载特定技能: 使用上述bash命令加载单个图表技能
  4. 遵循工作流: 使用推荐的流程组合进行全面的文档编写
  5. 组合图表: 多种图表类型可提供完整的视图

Progressive Loading

渐进式加载

This gateway skill (~200 lines, ~2K tokens) enables progressive loading:
  • Level 1: Gateway loads automatically (you're here now)
  • Level 2: Load category INDEX.md (~3K tokens) for full overview
  • Level 3: Load specific skills (~2-3K tokens each) as needed
Total context: 2K + 3K + skill(s) = 5-10K tokens vs 30K+ for entire category.
这个网关技能（约200行，~2K tokens）支持渐进式加载：
  • Level 1: 网关自动加载（您当前所在位置）
  • Level 2: 加载类别INDEX.md（~3K tokens）获取完整概览
  • Level 3: 根据需要加载特定技能（每个约2-3K tokens）
总上下文：2K + 3K + 技能 = 5-10K tokens，而整个类别需要30K+ tokens。

Quick Start Examples

快速入门示例

"Create a flowchart for user authentication": Read <cc-polymath-root>/skills/diagrams/mermaid-flowcharts.md
"Document API interactions": Read <cc-polymath-root>/skills/diagrams/mermaid-sequence-diagrams.md
"Design database schema": Read <cc-polymath-root>/skills/diagrams/mermaid-er-diagrams.md
"Show system architecture": Read <cc-polymath-root>/skills/diagrams/mermaid-architecture-diagrams.md
"Create class diagram for ORM models": Read <cc-polymath-root>/skills/diagrams/mermaid-class-state-diagrams.md
"Visualize project timeline": Read <cc-polymath-root>/skills/diagrams/mermaid-project-diagrams.md
"Show data distribution": Read <cc-polymath-root>/skills/diagrams/mermaid-charts.md
"Document Git workflow": Read <cc-polymath-root>/skills/diagrams/mermaid-specialized.md
"创建用户认证流程图": 查看 <cc-polymath-root>/skills/diagrams/mermaid-flowcharts.md
"文档化API交互": 查看 <cc-polymath-root>/skills/diagrams/mermaid-sequence-diagrams.md
"设计数据库模式": 查看 <cc-polymath-root>/skills/diagrams/mermaid-er-diagrams.md
"展示系统架构": 查看 <cc-polymath-root>/skills/diagrams/mermaid-architecture-diagrams.md
"为ORM模型创建类图": 查看 <cc-polymath-root>/skills/diagrams/mermaid-class-state-diagrams.md
"可视化项目时间线": 查看 <cc-polymath-root>/skills/diagrams/mermaid-project-diagrams.md
"展示数据分布": 查看 <cc-polymath-root>/skills/diagrams/mermaid-charts.md
"文档化Git工作流": 查看 <cc-polymath-root>/skills/diagrams/mermaid-specialized.md

Best Practices

最佳实践

  1. Start broad, drill down: Architecture → Sequence → Class → Flowchart
  2. One diagram, one purpose: Don't mix abstraction levels
  3. Label everything: Relationships, transitions, axes, values
  4. Limit complexity: Split large diagrams into focused views
  5. Use GitHub/GitLab rendering: Diagrams auto-render in markdown
  6. Iterate in https://mermaid.live: Fast feedback loop
  1. 从宽到细，逐步深入: 架构 → 时序 → 类 → 流程图
  2. 一图一用: 不要混合抽象层级
  3. 全面标注: 关系、转换、坐标轴、数值
  4. 控制复杂度: 将大型图表拆分为聚焦的视图
  5. 使用GitHub/GitLab渲染: 图表会在Markdown中自动渲染
  6. 在https://mermaid.live中迭代: 快速反馈循环

Mermaid.js Quick Tips

Mermaid.js 快速提示

In Markdown files:
markdown
```mermaid
graph TD
    A --> B
```
Live Preview:
  • https://mermaid.live - Official editor
  • VS Code: Install "Mermaid Preview" extension
  • GitHub/GitLab: Auto-renders in README.md
Common Gotchas:
  • Use quotes for labels with spaces: 
    A["Label with spaces"]
  • Escape special characters in labels
  • Check syntax highlighting for errors
  • Start simple, add complexity incrementally
Next Steps: Run 
Read <cc-polymath-root>/skills/diagrams/INDEX.md
to see full category details, or load specific diagram skills using the bash commands above.
在Markdown文件中:
markdown
```mermaid
graph TD
    A --> B
```
实时预览:
  • https://mermaid.live - 官方编辑器
  • VS Code: 安装"Mermaid Preview"扩展
  • GitHub/GitLab: 在README.md中自动渲染
常见注意事项:
  • 对包含空格的标签使用引号：
    A["Label with spaces"]
  • 转义标签中的特殊字符
  • 检查语法高亮以发现错误
  • 从简单开始，逐步增加复杂度
下一步: 运行 
Read <cc-polymath-root>/skills/diagrams/INDEX.md
查看完整类别详情，或使用上述bash命令加载特定的图表技能。