excalidraw-diagram
This skill transforms text descriptions and structured information into ready-to-edit Excalidraw diagrams. It handles system architectures, process flows, data structures, and freeform sketches, outputting standard Excalidraw JSON files that open directly in browsers, Obsidian, VSCode, and other compatible environments.
Excalidraw-diagram generates hand-drawn style diagrams from your text descriptions in standard Excalidraw format.
AI-generated summary based on this skill's SKILL.md
Install
xstongxue/best-skills/excalidraw-diagram · repository language: JavaScript
git clone https://github.com/xstongxue/best-skills
cp -r best-skills/skills/excalidraw-diagram ~/.claude/skills/excalidraw-diagramFrequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
Can excalidraw-diagram generate excalidraw diagram from text description?
Yes. excalidraw-diagram transforms text descriptions into ready-to-edit Excalidraw diagrams. You provide a description of your system, process, or data structure, and the skill generates standard Excalidraw JSON output that opens directly in browsers, Obsidian, VSCode, and other compatible environments for immediate editing.
What types of diagrams can excalidraw-diagram create?
excalidraw-diagram produces system architectures, process flows, data structures, flowcharts, entity relationship diagrams, infrastructure layouts, and freeform whiteboard sketches. It specializes in hand-drawn style visuals with layered architectures, grouped nodes, and annotated connections suitable for technical documentation and design communication.
Does excalidraw-diagram output standard Excalidraw JSON files?
Yes. excalidraw-diagram produces standard Excalidraw JSON files compatible with all major editors and platforms. The generated files work seamlessly in web browsers, Obsidian plugins, VSCode extensions, and any other environment supporting Excalidraw format, ready for further editing and refinement.
How does excalidraw-diagram handle module relationships?
excalidraw-diagram converts module relationships and data structures into visual diagrams with clear connections and annotations. It supports dependency mapping, layered architecture visualization, and grouped nodes to show how components interact, making complex system designs easy to understand at a glance.
Can excalidraw-diagram create hand-drawn architecture diagrams?
Yes. excalidraw-diagram specializes in creating hand-drawn style system architecture and flow diagrams. It generates sketches with the characteristic informal aesthetic of Excalidraw while maintaining clarity and structure, perfect for technical design documentation and collaborative whiteboarding sessions.
What's the license for excalidraw-diagram?
excalidraw-diagram is released under the Apache-2.0 license, allowing free use, modification, and distribution in both open-source and commercial projects with proper attribution.
SKILL.md
rendered from the published skill — quoted content, verbatim
Excalidraw 手绘图
本 Skill 指导 Agent 生成标准的 Excalidraw 图表文件（.excalidraw JSON），在浏览器、Obsidian、VSCode 等集成了 Excalidraw 的环境中可直接打开和继续编辑。
使用时机
- 用户希望生成「手绘风」的系统架构图、模块依赖图、业务流程图、数据流图等。
- 用户提到「画个架构图」「画流程图」「画模块关系图」「用 Excalidraw 画图」等需求。
- 用户已有较清晰的模块/步骤/实体列表，希望整理成一张结构化示意图。
支持图类型
- 系统架构图：用户 / 前端 / 后端服务 / 数据库 / 外部系统等。
- 业务流程图 / 近似时序图：按照步骤或事件顺序，自上而下或自左向右。
- 数据结构 / 模块依赖图：实体之间的关联、依赖关系。
- 自由白板草图：对论文结构、研究框架、任务分解等进行发散式可视化。
输入格式（在聊天中的推荐写法）
请引导用户尽量按照如下结构提供信息（中文即可）：
【图类型】：系统架构图 / 流程图 / 数据结构图 / 自由草图
【内容来源】：自由描述 / 论文大纲 / 代码结构 / 接口列表 等
【核心要素】：
- 节点：列出主要模块 / 实体 / 步骤（可分组）
- 关系：说明谁连接谁、方向与含义（如「用户 -> Web 前端」「服务 A 调用 服务 B」）
【布局偏好】：自上而下 / 自左向右 / 分层布局（可选）
【分组逻辑】：按子系统、按层次（前端/后端/存储等，可选）
【颜色规则】：不同类型节点的颜色偏好（可选，若未指定则使用默认配色）
若用户只给出自然语言描述，Agent 需先在脑中整理出「节点列表 + 关系列表」，再进行画图。
生成规则（Agent 内部步骤）
- 解析输入，构建抽象模型
- 抽取所有节点：为每个模块/实体/步骤分配唯一 id、名称与类型。
- 抽取所有关系：source、target、可选 label（调用方式、数据流向等）。
-
确定层次信息：根据图类型与用户的布局偏好，将节点归入不同层（如「用户层 / 前端层 / 服务层 / 数据层」）。
-
简单布局策略（坐标分配）
(truncated - see the full file via the links below)
Read as markdown · JSON record · Browse the source repository
File tree — 1 file
skills/excalidraw-diagram/SKILL.md