excalidraw-diagram by coleam00/excalidraw-diagram-skill
npx skills add https://github.com/coleam00/excalidraw-diagram-skill --skill excalidraw-diagram生成 视觉论证 的 .excalidraw JSON 文件,而不仅仅是展示信息。
设置: 如果用户要求您设置此技能(渲染器、依赖项等),请参阅 README.md 中的说明。
所有颜色和品牌特定样式都集中在一个文件中: references/color-palette.md。在生成任何图表之前阅读它,并将其作为所有颜色选择(形状填充、描边、文本颜色、证据工件背景等)的唯一真实来源。
要使此技能生成符合您自己品牌风格的图表,请编辑 color-palette.md。此文件中的其他所有内容都是通用的设计方法论和 Excalidraw 最佳实践。
图表应该论证,而不是展示。
图表不是格式化文本。它是一种视觉论证,展示仅靠文字无法表达的关系、因果关系和流程。形状本身就应该体现含义。
同构测试: 如果移除所有文本,仅凭结构本身能否传达概念?如果不能,请重新设计。
教育测试: 有人能否从这张图表中学到具体的东西,还是它只是给方框贴标签?一个好的图表能起到教学作用——它展示实际的格式、真实的事件名称、具体的例子。
在设计之前,确定此图表需要何种详细程度:
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
在以下情况下使用抽象形状:
在以下情况下使用具体示例:
对于技术性图表,您必须包含证据工件(见下文)。
在绘制任何技术性内容之前,研究实际规范。
如果您正在绘制协议、API 或框架的图表:
差示例:"协议" → "前端" 好示例:"AG-UI 流式传输事件 (RUN_STARTED, STATE_DELTA, A2UI_UPDATE)" → "CopilotKit 通过 createA2UIMessageRenderer() 渲染"
研究使图表准确且具有教育意义。
证据工件是证明您的图表准确并帮助观众学习的具体示例。在技术性图表中包含它们。
证据工件的类型(选择与您的图表相关的类型):
| 工件类型 | 何时使用 | 如何渲染 |
|---|---|---|
| 代码片段 | API、集成、实现细节 | 深色矩形 + 语法高亮文本(参见调色板中的证据工件颜色) |
| 数据/JSON 示例 | 数据格式、模式、载荷 | 深色矩形 + 彩色文本(参见调色板) |
| 事件/步骤序列 | 协议、工作流、生命周期 | 时间线模式(线 + 点 + 标签) |
| UI 模拟图 | 展示实际输出/结果 | 模仿真实 UI 的嵌套矩形 |
| 真实输入内容 | 展示系统接收的内容 | 带有可见示例内容的矩形 |
| API/方法名称 | 真实的函数调用、端点 | 使用文档中的实际名称,而非占位符 |
示例: 对于关于流式协议的图表,您可能会展示:
示例: 对于关于数据转换管道的图表:
关键原则:展示事物的实际外观,而不仅仅是它们的名称。
全面的图表同时运作于多个缩放级别。将其视为一张同时显示国界和街道名称的地图。
一个简化的概览,一目了然地展示完整的管道或流程。通常放置在图表顶部或底部。
示例: 输入 → 处理 → 输出 或 客户端 → 服务器 → 数据库
将相关组件分组在一起的标记区域。这些创建了视觉"房间",帮助观众理解哪些内容属于一起。
示例: 按职责分组(后端 / 前端)、按阶段分组(设置 / 执行 / 清理)或按团队分组(用户 / 系统 / 外部)
每个区域内的证据工件、代码片段和具体示例。这是教育价值所在。
示例: 在"后端"区域内,您可能会展示实际的 API 响应格式,而不仅仅是一个标记为"API 响应"的方框
对于全面的图表,力求包含所有三个层级。 摘要提供上下文,区域进行组织,细节进行教学。
| 差(展示) | 好(论证) |
|---|---|
| 5 个带标签的相同方框 | 每个概念都有一个反映其行为的形状 |
| 卡片网格布局 | 视觉结构与概念结构相匹配 |
| 装饰文本的图标 | 形状本身就是含义 |
| 所有内容使用相同的容器 | 每个概念使用不同的视觉词汇 |
| 所有内容都在方框内 | 自由浮动文本,选择性使用容器 |
| 简单图表 | 全面图表 |
|---|---|
| 通用标签:"输入" → "处理" → "输出" | 具体:展示输入/输出的实际外观 |
| 命名方框:"API"、"数据库"、"客户端" | 命名方框 + 实际请求/响应的示例 |
| "事件"或"消息"标签 | 时间线,包含规范中的真实事件/消息名称 |
| "UI"或"仪表板"矩形 | 模拟图,展示实际的 UI 元素和内容 |
| 约 30 秒解释 | 约 2-3 分钟的教学内容 |
| 观众了解结构 | 观众了解结构 AND 细节 |
简单图表适用于抽象概念、快速概览,或当受众已经了解细节时。全面图表适用于技术架构、教程、教育内容,或当您希望图表本身进行教学时。
并非每个文本片段都需要用形状包围。 默认使用自由浮动文本。仅当容器有明确目的时才添加。
| 在以下情况下使用容器... | 在以下情况下使用自由浮动文本... |
|---|---|
| 它是区域的焦点 | 它是标签或描述 |
| 它需要与其他元素进行视觉分组 | 它是支持性细节或元数据 |
| 箭头需要连接到它 | 它描述附近的事物 |
| 形状本身承载含义(决策菱形等) | 仅靠排版就能创建足够的层次结构 |
| 它代表系统中的独立"事物" | 它是区域标题、副标题或注释 |
排版作为层次结构: 使用字体大小、粗细和颜色来创建视觉层次结构,而无需方框。一个 28px 的标题不需要用矩形包围。
容器测试: 对于每个带框元素,问"这能作为自由浮动文本工作吗?" 如果可以,移除容器。
首先,确定这需要是:
如果是全面图表: 首先进行研究。查找实际规范、格式、事件名称、API。
阅读内容。对于每个概念,问:
对于每个概念,找到反映其行为的视觉模式:
| 如果概念... | 使用此模式 |
|---|---|
| 产生多个输出 | 扇出(从中心辐射的箭头) |
| 将输入合并为一个 | 汇聚(漏斗、箭头合并) |
| 具有层次结构/嵌套 | 树(线 + 自由浮动文本) |
| 是一系列步骤 | 时间线(线 + 点 + 自由浮动标签) |
| 循环或持续改进 | 螺旋/循环(箭头返回起点) |
| 是抽象状态或上下文 | 云(重叠的椭圆) |
| 将输入转换为输出 | 流水线(之前 → 处理 → 之后) |
| 比较两个事物 | 并排(平行对比) |
| 分成多个阶段 | 间隔/中断(区域之间的视觉分隔) |
对于多概念图表:每个主要概念必须使用不同的视觉模式。 不要使用统一的卡片或网格。
在生成 JSON 之前,在脑海中描绘眼睛如何浏览图表。应该有一个清晰的视觉故事。
现在才创建 Excalidraw 元素。有关如何处理大型图表,请参见下文。
生成 JSON 后,您必须运行渲染-查看-修复循环,直到图表看起来正确。这不是可选的——有关完整流程,请参见下面的渲染与验证部分。
对于全面或技术性图表,您必须一次构建一个区域的 JSON。 不要尝试在单次响应中生成整个文件。这是一个硬性约束——Claude Code 每个响应有约 32,000 个令牌的输出限制,而一个全面的图表很容易一次就超过这个限制。即使没有超过,一次性生成所有内容也会导致质量下降。按区域生成在各方面都更好。
阶段 1:构建每个区域
type、version、appState、files)和第一个区域的元素。"trigger_rect"、"arrow_fan_left"),以便跨区域引用易于阅读。boundElements 数组。阶段 2:整体审查
所有区域就位后,通读完整的 JSON 并检查:
在渲染之前修复任何对齐或绑定问题。
阶段 3:渲染与验证
现在运行渲染与验证部分中的渲染-查看-修复循环。在这里,您会发现从 JSON 中不明显的视觉问题——重叠、裁剪、不平衡的构图。
根据图表计划中的自然视觉分组来规划您的区域。一个典型的大型图表可能分为:
每个区域应该独立可理解:其元素、内部箭头以及与相邻区域的任何交叉引用。
中心元素,箭头辐射到多个目标。用于:来源、PRD、根本原因、中心枢纽。
○
↗
□ → ○
↘
○
多个输入通过箭头合并到单个输出。用于:聚合、漏斗、合成。
○ ↘
○ → □
○ ↗
父子分支,带有连接线和自由浮动文本(无需方框)。用于:文件系统、组织结构图、分类法。
label
├── label
│ ├── label
│ └── label
└── label
使用 line 元素作为主干和分支,自由浮动文本作为标签。
序列中的元素,箭头返回起点。用于:反馈循环、迭代过程、演进。
□ → □
↑ ↓
□ ← □
大小不一的重叠椭圆。用于:上下文、内存、对话、心智状态。
输入 → 处理框 → 输出,清晰的之前/之后。用于:转换、处理、转化。
○○○ → [PROCESS] → □□□
chaos order
两个平行结构,具有视觉对比。用于:之前/之后、选项、权衡。
区域之间的视觉空白或屏障。用于:阶段变化、上下文重置、边界。
使用线(类型:line,而非箭头)作为主要结构元素,而不是方框:
时间线: 垂直线或水平线,在间隔处带有小点(10-20px 椭圆),每个点旁边有自由浮动标签
树结构: 垂直主干线 + 水平分支线,带有自由浮动文本标签(无需方框)
分隔线: 细虚线分隔区域
流程脊柱: 一条中心线,元素与之相关,而不是连接方框
Timeline: Tree: ●─── Label 1 │ │ ├── item ●─── Label 2 │ ├── sub │ │ └── sub ●─── Label 3 └── item
线 + 自由浮动文本通常比方框 + 包含文本产生更清晰的结果。
根据其代表的内容选择形状——或者根本不使用形状:
| 概念类型 | 形状 | 原因 |
|---|---|---|
| 标签、描述、细节 | 无(自由浮动文本) | 排版创建层次结构 |
| 区域标题、注释 | 无(自由浮动文本) | 字体大小/粗细已足够 |
| 时间线上的标记 | 小 ellipse (10-20px) | 视觉锚点,非容器 |
| 开始、触发器、输入 | ellipse | 柔和、类似起源 |
| 结束、输出、结果 | ellipse | 完成、目的地 |
| 决策、条件 | diamond | 经典决策符号 |
| 过程、动作、步骤 | rectangle | 包含的动作 |
| 抽象状态、上下文 | 重叠的 ellipse | 模糊、类似云 |
| 层次结构节点 | 线 + 文本(无方框) | 通过线创建结构 |
规则: 默认无容器。仅当形状承载含义时才添加。目标是少于 30% 的文本元素在容器内。
颜色编码信息,而非装饰。每个颜色选择都应来自 references/color-palette.md——语义形状颜色、文本层次结构颜色和证据工件颜色都在那里定义。
关键原则:
不要发明新颜色。 如果一个概念不符合现有的语义类别,请使用主要/中性或次要颜色。
为了干净、专业的图表:
roughness: 0 — 干净、清晰的边缘。用于现代/技术性图表。roughness: 1 — 手绘、有机感觉。用于头脑风暴/非正式图表。对于大多数专业用例,默认为 0。
strokeWidth: 1 — 细、优雅。适用于线条、分隔线、微妙的连接。strokeWidth: 2 — 标准。适用于形状和主要箭头。strokeWidth: 3 — 粗体。谨慎用于强调(主要流程线、关键连接)。始终对所有元素使用 opacity: 100。 使用颜色、大小和描边宽度来创建层次结构,而不是透明度。
使用小点(10-20px 椭圆)代替完整形状,作为:
最重要的元素周围有最多的空白空间(200px+)。
引导视线:序列通常为左→右或上→下,中心辐射型为径向。
仅靠位置无法显示关系。如果 A 与 B 相关,则必须有箭头。
关键: JSON 的 text 属性仅包含可读单词。
{
"id": "myElement1",
"text": "Start",
"originalText": "Start"
}
设置:fontSize: 16, fontFamily: 3, textAlign: "center", verticalAlign: "middle"
{
"type": "excalidraw",
"version": 2,
"source": "https://excalidraw.com",
"elements": [...],
"appState": {
"viewBackgroundColor": "#ffffff",
"gridSize": 20
},
"files": {}
}
有关每种元素类型(文本、线、点、矩形、箭头)的复制粘贴 JSON 模板,请参阅 references/element-templates.md。根据每个元素的语义目的,从 references/color-palette.md 中提取颜色。
您不能仅从 JSON 判断图表。生成或编辑 Excalidraw JSON 后,您必须将其渲染为 PNG,查看图像,并修复您看到的问题——循环进行直到正确为止。这是工作流程的核心部分,而非最终检查。
cd .claude/skills/excalidraw-diagram/references && uv run python render_excalidraw.py <path-to-file.excalidraw>
这会在 .excalidraw 文件旁边输出一个 PNG。然后使用读取工具查看 PNG。
生成初始 JSON 后,运行此循环:
1. 渲染与查看 — 运行渲染脚本,然后读取 PNG。
2. 对照原始愿景审核 — 在查找错误之前,将渲染结果与您在步骤 1-4 中设计的内容进行比较。问:
3. 检查视觉缺陷:
4. 修复 — 编辑 JSON 以解决您发现的所有问题。常见修复:
x/y 坐标以修复间距和对齐points 数组添加中间路径点以绕开元素5. 重新渲染与重新查看 — 再次运行渲染脚本并读取新的 PNG。
6. 重复 — 继续循环,直到图表通过愿景检查(步骤 2)和缺陷检查(步骤 3)。通常需要 2-4 次迭代。不要仅仅因为没有关键错误就在一次通过后停止——如果构图可以更好,就改进它。
循环在以下情况下完成:
如果渲染脚本尚未设置:
cd .claude/skills/excalidraw-diagram/references
uv sync
uv run playwright install chromium
text 仅包含可读单词fontFamily: 3roughness: 0 用于干净/现代(除非请求手绘风格)opacity: 100 用于所有元素(无透明度)每周安装
1.3K
仓库
GitHub Stars
1.4K
首次出现
Mar 2, 2026
安全审计
安装于
cursor1.3K
codex1.3K
opencode1.3K
kimi-cli1.3K
gemini-cli1.3K
github-copilot1.3K
Generate .excalidraw JSON files that argue visually , not just display information.
Setup: If the user asks you to set up this skill (renderer, dependencies, etc.), see README.md for instructions.
All colors and brand-specific styles live in one file: references/color-palette.md. Read it before generating any diagram and use it as the single source of truth for all color choices — shape fills, strokes, text colors, evidence artifact backgrounds, everything.
To make this skill produce diagrams in your own brand style, edit color-palette.md. Everything else in this file is universal design methodology and Excalidraw best practices.
Diagrams should ARGUE, not DISPLAY.
A diagram isn't formatted text. It's a visual argument that shows relationships, causality, and flow that words alone can't express. The shape should BE the meaning.
The Isomorphism Test : If you removed all text, would the structure alone communicate the concept? If not, redesign.
The Education Test : Could someone learn something concrete from this diagram, or does it just label boxes? A good diagram teaches—it shows actual formats, real event names, concrete examples.
Before designing, determine what level of detail this diagram needs:
Use abstract shapes when:
Use concrete examples when:
For technical diagrams, you MUST include evidence artifacts (see below).
Before drawing anything technical, research the actual specifications.
If you're diagramming a protocol, API, or framework:
Bad: "Protocol" → "Frontend" Good: "AG-UI streams events (RUN_STARTED, STATE_DELTA, A2UI_UPDATE)" → "CopilotKit renders via createA2UIMessageRenderer()"
Research makes diagrams accurate AND educational.
Evidence artifacts are concrete examples that prove your diagram is accurate and help viewers learn. Include them in technical diagrams.
Types of evidence artifacts (choose what's relevant to your diagram):
| Artifact Type | When to Use | How to Render |
|---|---|---|
| Code snippets | APIs, integrations, implementation details | Dark rectangle + syntax-colored text (see color palette for evidence artifact colors) |
| Data/JSON examples | Data formats, schemas, payloads | Dark rectangle + colored text (see color palette) |
| Event/step sequences | Protocols, workflows, lifecycles | Timeline pattern (line + dots + labels) |
| UI mockups | Showing actual output/results | Nested rectangles mimicking real UI |
| Real input content | Showing what goes IN to a system | Rectangle with sample content visible |
| API/method names | Real function calls, endpoints | Use actual names from docs, not placeholders |
Example : For a diagram about a streaming protocol, you might show:
Example : For a diagram about a data transformation pipeline:
The key principle: show what things actually look like , not just what they're called.
Comprehensive diagrams operate at multiple zoom levels simultaneously. Think of it like a map that shows both the country borders AND the street names.
A simplified overview showing the full pipeline or process at a glance. Often placed at the top or bottom of the diagram.
Example : Input → Processing → Output or Client → Server → Database
Labeled regions that group related components. These create visual "rooms" that help viewers understand what belongs together.
Example : Grouping by responsibility (Backend / Frontend), by phase (Setup / Execution / Cleanup), or by team (User / System / External)
Evidence artifacts, code snippets, and concrete examples within each section. This is where the educational value lives.
Example : Inside a "Backend" section, you might show the actual API response format, not just a box labeled "API Response"
For comprehensive diagrams, aim to include all three levels. The summary gives context, the sections organize, and the details teach.
| Bad (Displaying) | Good (Arguing) |
|---|---|
| 5 equal boxes with labels | Each concept has a shape that mirrors its behavior |
| Card grid layout | Visual structure matches conceptual structure |
| Icons decorating text | Shapes that ARE the meaning |
| Same container for everything | Distinct visual vocabulary per concept |
| Everything in a box | Free-floating text with selective containers |
| Simple Diagram | Comprehensive Diagram |
|---|---|
| Generic labels: "Input" → "Process" → "Output" | Specific: shows what the input/output actually looks like |
| Named boxes: "API", "Database", "Client" | Named boxes + examples of actual requests/responses |
| "Events" or "Messages" label | Timeline with real event/message names from the spec |
| "UI" or "Dashboard" rectangle | Mockup showing actual UI elements and content |
| ~30 seconds to explain | ~2-3 minutes of teaching content |
| Viewer learns the structure | Viewer learns the structure AND the details |
Simple diagrams are fine for abstract concepts, quick overviews, or when the audience already knows the details. Comprehensive diagrams are needed for technical architectures, tutorials, educational content, or when you want the diagram itself to teach.
Not every piece of text needs a shape around it. Default to free-floating text. Add containers only when they serve a purpose.
| Use a Container When... | Use Free-Floating Text When... |
|---|---|
| It's the focal point of a section | It's a label or description |
| It needs visual grouping with other elements | It's supporting detail or metadata |
| Arrows need to connect to it | It describes something nearby |
| The shape itself carries meaning (decision diamond, etc.) | Typography alone creates sufficient hierarchy |
| It represents a distinct "thing" in the system | It's a section title, subtitle, or annotation |
Typography as hierarchy : Use font size, weight, and color to create visual hierarchy without boxes. A 28px title doesn't need a rectangle around it.
The container test : For each boxed element, ask "Would this work as free-floating text?" If yes, remove the container.
Before anything else, determine if this needs to be:
If comprehensive : Do research first. Look up actual specs, formats, event names, APIs.
Read the content. For each concept, ask:
For each concept, find the visual pattern that mirrors its behavior:
| If the concept... | Use this pattern |
|---|---|
| Spawns multiple outputs | Fan-out (radial arrows from center) |
| Combines inputs into one | Convergence (funnel, arrows merging) |
| Has hierarchy/nesting | Tree (lines + free-floating text) |
| Is a sequence of steps | Timeline (line + dots + free-floating labels) |
| Loops or improves continuously | Spiral/Cycle (arrow returning to start) |
| Is an abstract state or context | Cloud (overlapping ellipses) |
| Transforms input to output | Assembly line (before → process → after) |
| Compares two things | Side-by-side (parallel with contrast) |
| Separates into phases | Gap/Break (visual separation between sections) |
For multi-concept diagrams: each major concept must use a different visual pattern. No uniform cards or grids.
Before JSON, mentally trace how the eye moves through the diagram. There should be a clear visual story.
Only now create the Excalidraw elements. See below for how to handle large diagrams.
After generating the JSON, you MUST run the render-view-fix loop until the diagram looks right. This is not optional — see the Render & Validate section below for the full process.
For comprehensive or technical diagrams, you MUST build the JSON one section at a time. Do NOT attempt to generate the entire file in a single pass. This is a hard constraint — Claude Code has a ~32,000 token output limit per response, and a comprehensive diagram easily exceeds that in one shot. Even if it didn't, generating everything at once leads to worse quality. Section-by-section is better in every way.
Phase 1: Build each section
type, version, appState, files) and the first section of elements."trigger_rect", "arrow_fan_left") so cross-section references are readable.boundElements array at the same time.Phase 2: Review the whole
After all sections are in place, read through the complete JSON and check:
Fix any alignment or binding issues before rendering.
Phase 3: Render & validate
Now run the render-view-fix loop from the Render & Validate section. This is where you'll catch visual issues that aren't obvious from JSON — overlaps, clipping, imbalanced composition.
Plan your sections around natural visual groupings from the diagram plan. A typical large diagram might split into:
Each section should be independently understandable: its elements, internal arrows, and any cross-references to adjacent sections.
Central element with arrows radiating to multiple targets. Use for: sources, PRDs, root causes, central hubs.
○
↗
□ → ○
↘
○
Multiple inputs merging through arrows to single output. Use for: aggregation, funnels, synthesis.
○ ↘
○ → □
○ ↗
Parent-child branching with connecting lines and free-floating text (no boxes needed). Use for: file systems, org charts, taxonomies.
label
├── label
│ ├── label
│ └── label
└── label
Use line elements for the trunk and branches, free-floating text for labels.
Elements in sequence with arrow returning to start. Use for: feedback loops, iterative processes, evolution.
□ → □
↑ ↓
□ ← □
Overlapping ellipses with varied sizes. Use for: context, memory, conversations, mental states.
Input → Process Box → Output with clear before/after. Use for: transformations, processing, conversion.
○○○ → [PROCESS] → □□□
chaos order
Two parallel structures with visual contrast. Use for: before/after, options, trade-offs.
Visual whitespace or barrier between sections. Use for: phase changes, context resets, boundaries.
Use lines (type: line, not arrows) as primary structural elements instead of boxes:
Timelines : Vertical or horizontal line with small dots (10-20px ellipses) at intervals, free-floating labels beside each dot
Tree structures : Vertical trunk line + horizontal branch lines, with free-floating text labels (no boxes needed)
Dividers : Thin dashed lines to separate sections
Flow spines : A central line that elements relate to, rather than connecting boxes
Timeline: Tree: ●─── Label 1 │ │ ├── item ●─── Label 2 │ ├── sub │ │ └── sub ●─── Label 3 └── item
Lines + free-floating text often creates a cleaner result than boxes + contained text.
Choose shape based on what it represents—or use no shape at all:
| Concept Type | Shape | Why |
|---|---|---|
| Labels, descriptions, details | none (free-floating text) | Typography creates hierarchy |
| Section titles, annotations | none (free-floating text) | Font size/weight is enough |
| Markers on a timeline | small ellipse (10-20px) | Visual anchor, not container |
| Start, trigger, input | ellipse | Soft, origin-like |
| End, output, result | ellipse | Completion, destination |
| Decision, condition | diamond |
Rule : Default to no container. Add shapes only when they carry meaning. Aim for <30% of text elements to be inside containers.
Colors encode information, not decoration. Every color choice should come from references/color-palette.md — the semantic shape colors, text hierarchy colors, and evidence artifact colors are all defined there.
Key principles:
Do not invent new colors. If a concept doesn't fit an existing semantic category, use Primary/Neutral or Secondary.
For clean, professional diagrams:
roughness: 0 — Clean, crisp edges. Use for modern/technical diagrams.roughness: 1 — Hand-drawn, organic feel. Use for brainstorming/informal diagrams.Default to 0 for most professional use cases.
strokeWidth: 1 — Thin, elegant. Good for lines, dividers, subtle connections.strokeWidth: 2 — Standard. Good for shapes and primary arrows.strokeWidth: 3 — Bold. Use sparingly for emphasis (main flow line, key connections).Always useopacity: 100 for all elements. Use color, size, and stroke width to create hierarchy instead of transparency.
Instead of full shapes, use small dots (10-20px ellipses) as:
The most important element has the most empty space around it (200px+).
Guide the eye: typically left→right or top→bottom for sequences, radial for hub-and-spoke.
Position alone doesn't show relationships. If A relates to B, there must be an arrow.
CRITICAL : The JSON text property contains ONLY readable words.
{
"id": "myElement1",
"text": "Start",
"originalText": "Start"
}
Settings: fontSize: 16, fontFamily: 3, textAlign: "center", verticalAlign: "middle"
{
"type": "excalidraw",
"version": 2,
"source": "https://excalidraw.com",
"elements": [...],
"appState": {
"viewBackgroundColor": "#ffffff",
"gridSize": 20
},
"files": {}
}
See references/element-templates.md for copy-paste JSON templates for each element type (text, line, dot, rectangle, arrow). Pull colors from references/color-palette.md based on each element's semantic purpose.
You cannot judge a diagram from JSON alone. After generating or editing the Excalidraw JSON, you MUST render it to PNG, view the image, and fix what you see — in a loop until it's right. This is a core part of the workflow, not a final check.
cd .claude/skills/excalidraw-diagram/references && uv run python render_excalidraw.py <path-to-file.excalidraw>
This outputs a PNG next to the .excalidraw file. Then use the Read tool on the PNG to actually view it.
After generating the initial JSON, run this cycle:
1. Render & View — Run the render script, then Read the PNG.
2. Audit against your original vision — Before looking for bugs, compare the rendered result to what you designed in Steps 1-4. Ask:
3. Check for visual defects:
4. Fix — Edit the JSON to address everything you found. Common fixes:
x/y coordinates to fix spacing and alignmentpoints arrays to route around elements5. Re-render & re-view — Run the render script again and Read the new PNG.
6. Repeat — Keep cycling until the diagram passes both the vision check (Step 2) and the defect check (Step 3). Typically takes 2-4 iterations. Don't stop after one pass just because there are no critical bugs — if the composition could be better, improve it.
The loop is done when:
If the render script hasn't been set up yet:
cd .claude/skills/excalidraw-diagram/references
uv sync
uv run playwright install chromium
text contains only readable wordsfontFamily: 3roughness: 0 for clean/modern (unless hand-drawn style requested)opacity: 100 for all elements (no transparency)Weekly Installs
1.3K
Repository
GitHub Stars
1.4K
First Seen
Mar 2, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykWarn
Installed on
cursor1.3K
codex1.3K
opencode1.3K
kimi-cli1.3K
gemini-cli1.3K
github-copilot1.3K
React 组合模式指南:Vercel 组件架构最佳实践,提升代码可维护性
102,200 周安装
| Classic decision symbol |
| Process, action, step | rectangle | Contained action |
| Abstract state, context | overlapping ellipse | Fuzzy, cloud-like |
| Hierarchy node | lines + text (no boxes) | Structure through lines |