由于 trendforge.devlive.top 访问受限，请切换到 trendforge.devlive.org 域名
cathrynlavery/diagram-design
项目介绍
Claude Code 的 29 种编辑图表类型。独立的 HTML + SVG。没有阴影，没有美人鱼的污迹。
38 editorial diagram types for Claude Code, Codex, and Pi. Self-contained HTML + SVG. No shadows. No Mermaid slop.
智能解读
这是一个为 Claude Code、Codex 和 Pi 等 AI 编程助手设计的图表生成技能，能够快速创建 27 种专业、美观且编辑友好的图表。与传统工具生成的通用圆角框图表不同，它提供编辑级质量的静态 HTML + SVG 输出，风格简洁（无阴影、无复杂动画），并包含三种主题变体（浅色、深色、完整编辑风格）。其核心价值在于通过语义模式将行为与视觉分离，例如队列、策略跟踪或信任边界等概念可复用现有图表类型，无需新增类型。用户可通过技能读取网站信息，在 60 秒内匹配品牌配色，直接在浏览器中查看图表，无需构建步骤或外部依赖。它特别适合需要快速生成架构图、流程图、时间线、ER 图等技术图表的开发者，能避免在 Figma 等工具中耗费时间调整样式，专注于内容设计，提升文档视觉一致性。
智能标签
使用场景
适合需要快速生成编辑级、品牌一致的静态图表（如架构图、流程图、时间线）的开发者，省去在设计工具中手动调整样式的时间。
快速生成技术架构图
需要快速绘制系统架构图，但不想花时间在Figma等工具中调整样式，或者AI生成的图表过于通用、不符合品牌风格。
使用该项目的Claude Code技能，输入系统组件描述，即可自动生成符合品牌风格的编辑级架构图（组件+连接），输出为静态HTML+SVG，无需额外设计步骤。
描述一个微服务架构（用户服务、订单服务、数据库），技能会生成带有清晰连接线和节点的高质量架构图，可直接用于技术文档。
可视化流程与决策逻辑
需要绘制复杂的业务流程图或决策树，希望图表清晰专业，但手动画图效率低且容易混乱。
利用项目的Flowchart（决策逻辑）或Process（多参与者顺序工作流）类型，通过文本描述自动生成结构化的流程图，重点突出决策点和关键路径。
描述一个电商订单处理流程（用户下单→库存检查→支付→发货），生成带决策分支的流程图，用强调色标出关键的库存检查节点。
展示数据模型与关系
需要向团队展示数据库设计或实体关系，但ER图工具生成的结果往往过于技术化，难以在非技术会议中使用。
使用ER/数据模型类型，以编辑级设计风格生成清晰的实体关系图，突出核心实体和字段，适合在产品或跨部门会议中展示。
输入用户、订单、产品三个实体及其关键字段，生成包含关系线的简洁ER图，用层次结构展示一对一、多对多关系。
制作时间线与项目计划
需要可视化项目里程碑或历史事件时间线，但甘特图工具通常过于复杂，且输出样式难以定制。
选择Timeline（事件轴）或Gantt（任务阶段时间线）类型，自动生成带有清晰时间节点和任务阶段的时间轴图表，适合项目汇报或展示。
列出产品开发的关键阶段（需求分析、设计、开发、测试、上线），生成带有时间跨度的甘特图，用颜色区分不同团队的任务。
项目健康度
距上次更新 2 天
平台 Star TOP 2% · Forks 1,654
本周 +5,130 ⭐ · 本月 +20,520 ⭐
14 位贡献者 · 0 条平台评论
文档资料完整
项目信息
赞赏支持
如果本站对你有帮助，欢迎打赏支持
微信
支付宝
Widget 徽章
相关项目推荐
ossu/computer-science
🎓 免费自学计算机科学的教育路径！
f/prompts.chat
又名Awesome ChatGPT提示词库。分享、发现并收集来自社区的提示词。免费开源——为您的组织提供完全隐私的自托管服务。
ripienaar/free-for-dev
面向运维和基础架构开发的SaaS、PaaS和IaaS免费服务清单
PKUFlyingPig/cs-self-learning
Computer Self-Learning Guide
shanraisshan/claude-code-best-practice
熟能生巧
docker/awesome-compose
超棒的 Docker Compose 示例集
加载评论中...