taiyi-diagram-arch

SkillMedia

TaiyiForge helper, system/product architecture diagrams (Mermaid · SVG poster · embed in DESIGN.md). Works with OpenCode / Claude / Codex / Cursor.

Use taiyi-diagram-arch in Claude, ChatGPT or Ahel Desktop

Free. Sign in, add taiyi-diagram-arch and connect your AI. About a minute.

Also: Claude Code · Cursor · Codex

Then ask your AI: use the taiyi-diagram-arch skill

Details

Instructions available. Your AI can read the instructions. Execution depends on the setup they require.

Add Ahel to your AI once: Claude, ChatGPT, Cursor, Claude Code or Codex. Then ask it to use this.

taiyi-diagram-archStart free

What this skill tells your AI

The instructions your AI receives, as published by dong90/oh-my-taiyiforge in skills/taiyi-diagram-arch/SKILL.md and read by Ahel’s review.

目的

把 DESIGN.md 里的文字架构落成可读、可版本管理、可导出高清的架构图——组件边界、数据流、部署视图、产品级全景图(Flow-X 风格海报)。

何时使用

时机说明
taiyi-design 写 Architecture 节默认推荐(与 ASCII/mermaid 并列)
新模块 / 跨服务边界必做 C4 或组件图
仓库级文档docs/*-architecture.svg + PNG
taiyi-evolve 发现架构漂移同步更新架构图

可跳过:纯文案/配置改动、无新组件且无边界变化。

输入

  • 优先真源:diagrams/c4/containers.md 或 docs/c4/containers.md(由 /taiyi:diagram-c4 产出)
  • REQUIREMENT.md、DESIGN.md(Decision + Architecture 草稿)
  • CONTEXT.md(既有模块与路径)
  • (可选)adr/、docs/ARCHITECTURE.md

流水线第 2 步:加载本 Skill 时同步 C4 真源,勿重新划分模块。总编排:/taiyi:diagram-pipeline。

输出(择一或组合)

产物路径适用
变更内架构说明.taiyi/changes/<slug>/diagrams/architecture.md九阶段工件(mark-aux 检测)
嵌入 DESIGNDESIGN.md § Architecture 内 mermaid 代码块轻量变更
矢量海报diagrams/architecture.svg + architecture.png产品/对外文档
仓库级docs/<name>-architecture.svg本仓库参考:docs/taiyiforge-architecture.svg

mark-aux:独立文件路径时执行 scripts/taiyi-forge.sh mark-aux <slug> taiyi-diagram-arch。

图类型选型

问题推荐图型工具
模块谁依赖谁graph TB / graph LRMermaid
请求怎么走sequenceDiagramMermaid
部署/运行时graph + subgraph 环境Mermaid
产品全景(六大标准+九阶段+门禁)分栏海报 SVGPython 脚本或手调 SVG
C4 容器级Mermaid C4(若渲染器支持)或结构化 graphMermaid

执行步骤

  1. 若存在 diagrams/c4/containers.md:以其为节点/边界真源;顶部加 > C4 真源:diagrams/c4/containers.md
  2. 读 DESIGN Decision:只画「已选定方案」,不把未选 Option 画进主图
  3. 列节点清单:组件名 = 仓库内真实路径/包名(如 src/core/workflow-engine.ts)
  4. 选视图:默认 1 张组件图 + 1 张关键序列图(有外部 API 时)
  5. 写 Mermaid(变更内首选):
# Architecture Diagram

## Component view

\`\`\`mermaid
graph LR
  CLI[taiyi CLI] --> Engine[workflow-engine]
  Engine --> Manifest[workflow-manifest.yaml]
  Engine --> Skills[skills/taiyi-*]
\`\`\`

## Notes

- 与 DESIGN.md §Decision 一致
- 更新日期:ISO8601
  1. (可选)导出 PNG:node scripts/render-mermaid.mjs .taiyi/changes/<slug>/diagrams/architecture.md
  2. (产品海报) 宽屏分栏布局参考 docs/taiyiforge-architecture.svg;可 fork scripts/generate-architecture-svg.py 改文案后重跑
  3. 回链 DESIGN.md:Architecture 节写 详见 diagrams/architecture.md 或内嵌同一段 mermaid
  4. mark-aux(若写了独立 diagrams 文件)

视觉规范(对齐 Flow-X / TaiyiForge 海报)

  • 画布:宽屏 16:9 或 3:2(如 2800×1880 SVG viewBox)
  • 背景:深色 #060b16,面板 #0d1528,文字 #eef2ff
  • 结构:顶栏标准 → 左 ARTIFACT → 中 CORE + 九阶段 → 右门禁 → 底 Skill 全景 → 页脚价值
  • 导出清晰度:SVG 真源 + PNG ≥5×(本仓库:python3 scripts/generate-architecture-svg.py → 16800×11280)

质量自检

  • 每个框可映射到 REQUIREMENT AC 或 DESIGN 组件表
  • 箭头方向与数据/控制流一致(无「悬空节点」)
  • 图例或 Notes 说明缩写与边界(Trust boundary、DB、外部 SaaS)
  • Mermaid 在 GitHub / Cursor 预览可渲染(避免实验语法)
  • 若与旧图冲突,在 Notes 标 supersedes 路径

与主流程

taiyi-requirement → taiyi-design
                         ↓
              taiyi-diagram-arch(推荐)
              taiyi-diagram-flow(流程细节)
                         ↓
                    DESIGN.md + diagrams/

禁止

  • 无 DESIGN 决策就画「最终架构」
  • 架构图代替 ADR(边界决策仍走 taiyi-architect)
  • 仅截图无源文件(须保留 .md / .svg 可 diff 真源)

Signals

GitHub stars
886
Forks
24
Last commit
Sep 2026
Advanced
Item type
skill
Key
taiyi-diagram-arch
Source
github.com/dong90/oh-my-taiyiforge