Back to Details

excalidraw-diagram

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Excalidraw 手绘图

Excalidraw Hand-drawn Diagrams

本 Skill 指导 Agent 生成标准的 Excalidraw 图表文件（
.excalidraw
JSON），在浏览器、Obsidian、VSCode 等集成了 Excalidraw 的环境中可直接打开和继续编辑。
This Skill guides Agent to generate standard Excalidraw diagram files (
.excalidraw
JSON), which can be directly opened and further edited in environments integrated with Excalidraw such as browsers, Obsidian, VSCode, etc.

使用时机

Usage Scenarios

  • 用户希望生成「手绘风」的系统架构图、模块依赖图、业务流程图、数据流图等。
  • 用户提到「画个架构图」「画流程图」「画模块关系图」「用 Excalidraw 画图」等需求。
  • 用户已有较清晰的模块/步骤/实体列表，希望整理成一张结构化示意图。
  • Users want to generate "hand-drawn style" system architecture diagrams, module dependency diagrams, business flowcharts, data flow diagrams, etc.
  • Users mention requirements such as "draw an architecture diagram", "draw a flowchart", "draw a module relationship diagram", "draw with Excalidraw", etc.
  • Users already have a clear list of modules/steps/entities and want to organize them into a structured schematic diagram.

支持图类型

Supported Diagram Types

  • 系统架构图：用户 / 前端 / 后端服务 / 数据库 / 外部系统等。
  • 业务流程图 / 近似时序图：按照步骤或事件顺序，自上而下或自左向右。
  • 数据结构 / 模块依赖图：实体之间的关联、依赖关系。
  • 自由白板草图：对论文结构、研究框架、任务分解等进行发散式可视化。
  • System Architecture Diagram: Users / frontend / backend services / databases / external systems, etc.
  • Business Flowchart / Approximate Sequence Diagram: Arranged from top to bottom or left to right according to the order of steps or events.
  • Data Structure / Module Dependency Diagram: Association and dependency relationships between entities.
  • Free Whiteboard Sketch: Divergent visualization of paper structure, research framework, task decomposition, etc.

输入格式（在聊天中的推荐写法）

Input Format (Recommended Writing Style in Chat)

请引导用户尽量按照如下结构提供信息（中文即可）：
【图类型】：系统架构图 / 流程图 / 数据结构图 / 自由草图
【内容来源】：自由描述 / 论文大纲 / 代码结构 / 接口列表 等
【核心要素】：
  • 节点：列出主要模块 / 实体 / 步骤（可分组）
  • 关系：说明谁连接谁、方向与含义（如「用户 -> Web 前端」「服务 A 调用 服务 B」）
    【布局偏好】：自上而下 / 自左向右 / 分层布局（可选）
    【分组逻辑】：按子系统、按层次（前端/后端/存储等，可选）
    【颜色规则】：不同类型节点的颜色偏好（可选，若未指定则使用默认配色）
若用户只给出自然语言描述，Agent 需先在脑中整理出「节点列表 + 关系列表」，再进行画图。
Please guide users to provide information as much as possible according to the following structure (Chinese is acceptable):
[Diagram Type]: System Architecture Diagram / Flowchart / Data Structure Diagram / Free Sketch
[Content Source]: Free description / paper outline / code structure / interface list, etc.
[Core Elements]:
  • Nodes: List main modules / entities / steps (can be grouped)
  • Relationships: Explain who connects to whom, direction and meaning (e.g. "User -> Web frontend", "Service A calls Service B")
    [Layout Preference]: Top-down / Left-to-right / Hierarchical layout (optional)
    [Grouping Logic]: By subsystem, by layer (frontend/backend/storage, etc., optional)
    [Color Rule]: Color preference for different types of nodes (optional, default color scheme will be used if not specified)
If the user only provides natural language description, the Agent needs to first sort out the "node list + relationship list" internally before drawing.

生成规则（Agent 内部步骤）

Generation Rules (Agent Internal Steps)

  1. 解析输入，构建抽象模型
    • 抽取所有节点：为每个模块/实体/步骤分配唯一 id、名称与类型。
    • 抽取所有关系：source、target、可选 label（调用方式、数据流向等）。
    • 确定层次信息：根据图类型与用户的布局偏好，将节点归入不同层（如「用户层 / 前端层 / 服务层 / 数据层」）。
  2. 简单布局策略（坐标分配）
    • 不追求复杂自动排版，只需给出「合理、可读」的初始位置：
      • 系统架构图：自上而下三层或多层排列，同层节点在一条水平线上。
      • 流程图：按步骤顺序纵向或横向排列，用箭头串联。
      • 数据结构图：以核心实体为中心，相关实体围绕，保持连线不明显交叉。
    • 粗略设定 
      x, y
      坐标，例如：同层 y 固定、x 按索引递增；不同层 y 按层级间距递增。
  3. Excalidraw 元素生成约定（含默认箭头与配色）
    • 节点元素（默认样式）：
      • 使用 
        rectangle
        或 
        round rectangle
        表示模块/实体/步骤。
      • 每个节点由一个图形元素 + 一个文本元素组成（文本大致居中叠加在矩形上）。
      • 默认配色约定（若用户未特别指定）：
        • 输入 / 输出：白底黑框（
          backgroundColor: "transparent"
          ，
          strokeColor: "#1e1e1e"
          ）。
        • 计算模块 / 中间层（如 Encoder / Decoder / FFN 等）：浅色背景 + 黑色描边（例如 
          backgroundColor: "#f5f5ff"
          或类似），同一类模块颜色一致。
        • 分组大框（如「Encoder Stack」「Decoder Stack」）：圆角矩形、白底黑框，用文本在框内顶部标注标题。
      • 可使用 
        groupIds
        将同一子系统下的节点分到同一分组，方便用户后续整体移动。
    • 连线元素（默认箭头）：
      • 使用 
        arrow
        连接相关节点，
        points
        按起点到终点直线或略带折线。
      • 默认方向：从「数据流/调用发起方」指向「接收方」，例如输入 → 嵌入 → Encoder → Decoder → 输出。
      • 核心主流程使用较粗黑色箭头（
        strokeWidth
        稍大），辅助关系可以用细线或浅色。
      • 如有必要，可增加短文本元素标注连线含义（如「调用」「写入」「Attention」等）。
    • 整体风格：
      • 依赖 Excalidraw 的手绘渲染风格，不需要手动模拟抖动。
      • 控制元素数量，优先保持结构清晰而非堆满细节；对于类似 Transformer 这类结构，推荐只画出主要块和主干箭头。
  4. Excalidraw 文件结构要求
    • 顶层应符合 Excalidraw 官方 
      .excalidraw
      JSON 结构，至少包含： 
      • type: "excalidraw"
      • version
        与 
        source
        （可标注为 
        "cursor-skill-excalidraw-diagram"
        ）
      • elements
        : 图元数组
      • appState
        与 
        files
        （若无图片等，可给出合理的默认空结构）
    • 所有元素 id 必须唯一，推荐使用简单的前缀 + 递增数字或 UUID 风格字符串。
  1. Parse input and build abstract model
    • Extract all nodes: Assign unique id, name and type to each module/entity/step.
    • Extract all relationships: source, target, optional label (call method, data flow direction, etc.).
    • Determine layer information: According to the diagram type and user's layout preference, classify nodes into different layers (e.g. "user layer / frontend layer / service layer / data layer").
  2. Simple layout strategy (coordinate allocation)
    • Do not pursue complex automatic typesetting, only need to give a "reasonable and readable" initial position:
      • System architecture diagram: Arranged in three or more layers from top to bottom, nodes of the same layer are on a horizontal line.
      • Flowchart: Arranged vertically or horizontally in the order of steps, connected in series with arrows.
      • Data structure diagram: Take the core entity as the center, related entities surround it, and keep the connections from obvious crossing.
    • Roughly set 
      x, y
      coordinates, for example: y of the same layer is fixed, x increases according to the index; y of different layers increases according to the layer spacing.
  3. Excalidraw element generation convention (including default arrows and color matching)
    • Node elements (default style):
      • Use 
        rectangle
        or 
        round rectangle
        to represent modules/entities/steps.
      • Each node consists of a graphic element + a text element (the text is roughly centered and superimposed on the rectangle).
      • Default color matching convention (if not specified by the user):
        • Input / output: white background with black border (
          backgroundColor: "transparent"
          , 
          strokeColor: "#1e1e1e"
          ).
        • Computing module / middle layer (such as Encoder / Decoder / FFN, etc.): light color background + black stroke (e.g. 
          backgroundColor: "#f5f5ff"
          or similar), modules of the same type have the same color.
        • Large grouping frame (such as "Encoder Stack", "Decoder Stack"): rounded rectangle, white background with black border, mark the title with text at the top of the frame.
      • You can use 
        groupIds
        to group nodes under the same subsystem into the same group, which is convenient for users to move as a whole later.
    • Connection elements (default arrows):
      • Use 
        arrow
        to connect related nodes, 
        points
        are straight or slightly folded from the start point to the end point.
      • Default direction: Point from the "data flow/call initiator" to the "receiver", for example Input → Embedding → Encoder → Decoder → Output.
      • Core main processes use thicker black arrows (slightly larger 
        strokeWidth
        ), and auxiliary relationships can use thin lines or light colors.
      • If necessary, you can add short text elements to mark the meaning of the connection (such as "call", "write", "Attention", etc.).
    • Overall style:
      • Rely on Excalidraw's hand-drawn rendering style, no need to manually simulate jitter.
      • Control the number of elements, prioritize keeping the structure clear rather than filling with details; for structures like Transformer, it is recommended to only draw the main blocks and main arrows.
  4. Excalidraw file structure requirements
    • The top layer should conform to Excalidraw's official 
      .excalidraw
      JSON structure, including at least: 
      • type: "excalidraw"
      • version
        and 
        source
        (can be marked as 
        "cursor-skill-excalidraw-diagram"
        )
      • elements
        : diagram element array
      • appState
        and 
        files
        (if there are no pictures, etc., a reasonable default empty structure can be given)
    • All element ids must be unique, it is recommended to use a simple prefix + incrementing number or UUID style string.

输出格式

Output Format

Agent 输出必须严格分为两部分：
  • Part 1 [Diagram Explanation]：
    • 用中文简要说明本图的层次结构、各类节点的含义以及主要连线关系（约 1–2 段）。
    • 若对用户输入有合理补充或抽象，也在此处说明，方便用户校对。
  • Part 2 [Excalidraw JSON]：
    • 输出一个完整、可直接保存为 
      .excalidraw
      文件      的 JSON。
    • 仅输出 JSON 内容本身，不添加注释、Markdown 代码块标记或额外说明文字。
    • 确保 JSON 语法正确、无多余逗号，能被 Excalidraw 正常解析。
The Agent output must be strictly divided into two parts:
  • Part 1 [Diagram Explanation]:
    • Briefly explain the hierarchical structure of the diagram, the meaning of various nodes and the main connection relationships in Chinese (about 1-2 paragraphs).
    • If there are reasonable supplements or abstractions to the user's input, also explain here to facilitate user proofreading.
  • Part 2 [Excalidraw JSON]:
    • Output a complete JSON that can be directly saved as a 
      .excalidraw
      file      .
    • Only output the JSON content itself, do not add comments, Markdown code block markers or additional explanatory text.
    • Ensure that the JSON syntax is correct, there are no extra commas, and it can be parsed normally by Excalidraw.

注意事项

Notes

  • 若用户未指定图类型或布局偏好，优先按照「自上而下、多层结构」生成，保持直观清晰。
  • 若节点过多或关系复杂，应主动做聚合与分组（例如将多个内部模块归为一个「子系统」节点），避免图面过于拥挤。
  • 若用户希望后续在 Draw.io 中使用，可提示其：Excalidraw 导出的 SVG/PNG 可再导入 Draw.io，但本 Skill 专注于生成 Excalidraw 原生文件。
  • 若用户只是想「手绘草稿」而不在乎结构严谨，可适度放宽布局与分组，只需保证元素不完全重叠即可。
  • If the user does not specify the diagram type or layout preference, it is preferred to generate according to the "top-down, multi-layer structure" to keep it intuitive and clear.
  • If there are too many nodes or complex relationships, you should actively aggregate and group them (for example, classify multiple internal modules into a "subsystem" node) to avoid overcrowding the diagram.
  • If the user wants to use it in Draw.io later, you can remind them: SVG/PNG exported from Excalidraw can be imported into Draw.io again, but this Skill focuses on generating Excalidraw native files.
  • If the user just wants a "hand-drawn draft" and does not care about strict structure, you can moderately relax the layout and grouping, just ensure that the elements do not completely overlap.

参考资源

Reference Resources

  • Excalidraw 官方仓库：
    https://github.com/excalidraw/excalidraw
  • 在线应用示例：
    https://excalidraw.com/
  • Excalidraw official repository: 
    https://github.com/excalidraw/excalidraw
  • Online application example: 
    https://excalidraw.com/