SuperAPI AI Directory
Partner中文AI newsFavorites
Skillsexcalidraw-diagram

excalidraw-diagram

Design & creation

View repository

Updated 10-16 01:56

About this skill

Excalidraw hand-drawn diagrams

This Skill guides the Agent to generatestandard Excalidraw diagram files（.excalidraw JSON), which can be directly opened and further edited in environments that integrate Excalidraw , such as browsers, Obsidian, VSCode, etc.

When to use

  • The user wants to generate "hand-drawn style" system architecture diagrams, module dependency diagrams, business flowcharts, data flow diagrams, etc.
  • The user mentions needs such as "draw an architecture diagram", "draw a flowchart", "draw a module relationship diagram", "draw with Excalidraw", etc.
  • The user already has a relatively clear list of modules/steps/entities and wants to organize it 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 top-to-bottom or left-to-right according to the order of steps or events.
  • Data structure / module dependency diagram: associations and dependencies between entities.
  • Freeform whiteboard sketch: divergent visualization of paper structure, research framework, task decomposition, etc.

Input format (recommended way to write in chat)

Please guide the user to provide information according to the following structure as much as possible (Chinese is fine):

[Diagram type]: system architecture diagram / flowchart / data structure diagram / freeform sketch
[Content source]: free description / paper outline / code structure / interface list, etc.
[Core elements]:

  • Nodes: list the 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-to-bottom / left-to-right / layered layout (optional)
    [Grouping logic]: by subsystem, by layer (frontend/backend/storage, etc., optional)
    [Color rules]: color preferences for different types of nodes (optional; if unspecified, use the default color scheme)

If the user only provides a natural language description, the Agent needs to first organize a "node list + relationship list" in its mind, and then draw the diagram.

Generation rules (Agent internal steps)

  1. Parse the input and build an abstract model

    • Extract all nodes: assign a 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 the user's layout preference, assign nodes to different layers (e.g., "user layer / frontend layer / service layer / data layer").

  2. Simple layout strategy (coordinate assignment)

    • Do not pursue complex automatic layout; just provide a "reasonable, readable" initial position:
      • System architecture diagram: arranged top-to-bottom in three or more layers, with nodes in the same layer on one horizontal line.
      • Flowchart: arranged vertically or horizontally in step order, connected in series with arrows.
      • Data structure diagram: centered on the core entity, with related entities around it, keeping the connecting lines from crossing noticeably.
    • Roughly set x, y coordinates, for example: for the same layer, y is fixed and x increases by index; for different layers, y increases by the layer spacing.

  3. Excalidraw element generation conventions (including default arrows and color scheme)

    • Node elements (default style)：

      • Use rectangle or round rectangle to represent modules/entities/steps.
      • Each node consists of one shape element + one text element (the text is roughly centered and overlaid on the rectangle).
      • Default color scheme conventions (unless the user specifies otherwise):
        • Input / Output: white background with black border (backgroundColor: "transparent"，strokeColor: "#1e1e1e"）。
        • Computation modules / intermediate layers (such as Encoder / Decoder / FFN, etc.): light-colored background + black stroke (for example backgroundColor: "#f5f5ff" or similar), with the same color for modules of the same type.
        • Large grouping boxes (such as "Encoder Stack" and "Decoder Stack"): rounded rectangles, white background with black border, with the title labeled using text at the top inside the box.
      • You can use groupIds to group nodes under the same subsystem into the same group, making it convenient for the user to move them as a whole later.

    • Connector elements (default arrows)：

      • Use arrow to connect related nodes,points as a straight line or a slightly bent polyline from the start point to the end point.
      • Default direction: from the "data flow/call initiator" to the "receiver", for example input → embedding → Encoder → Decoder → output.
      • Use thicker black arrows for the core main flow (strokeWidth slightly larger), and auxiliary relationships can use thin lines or light colors.
      • If necessary, short text elements can be added to label the meaning of the connections (such as "call", "write", "Attention", etc.).

    • Overall style：

      • Rely on Excalidraw's hand-drawn rendering style; there is no need to manually simulate jitter.
      • Control the number of elements, prioritizing a clear structure over filling it with details; for structures like Transformer, it is recommended to draw only the main blocks and the main arrows.

  4. Excalidraw file structure requirements

    • The top level should conform to the official Excalidraw .excalidraw JSON structure, containing at least:
      • type: "excalidraw"
      • version and source(can be labeled as "cursor-skill-excalidraw-diagram"）
      • elements: element array
      • appState and files(if there are no images, etc., a reasonable default empty structure can be provided)
    • All element ids must be unique; it is recommended to use a simple prefix + incrementing number or a UUID-style string.

Output format

The Agent output must be strictly divided into two parts:

  • Part 1 [Diagram Explanation]：

    • Briefly explain in Chinese the hierarchical structure of this diagram, the meaning of each type of node, and the main connection relationships (about 1–2 paragraphs).
    • If there are reasonable additions or abstractions to the user's input, also explain them here so the user can proofread easily.

  • Part 2 [Excalidraw JSON]：

    • Output acomplete JSON that can be directly saved as a .excalidraw file.
    • Output only the JSON content itself, without adding comments, Markdown code block markers, or extra explanatory text.
    • Ensure the JSON syntax is correct, with no extra commas, and can be parsed normally by Excalidraw.

Notes

  • If the user does not specify a diagram type or layout preference, prioritize generating in a "top-down, multi-layer structure" to keep it intuitive and clear.
  • If there are too many nodes or the relationships are complex, proactively aggregate and group them (for example, group multiple internal modules into a single "subsystem" node) to avoid making the diagram too crowded.
  • If the user wants to use it later in Draw.io, you can remind them: SVG/PNG exported from Excalidraw can be imported into Draw.io, but this Skill focuses on generating native Excalidraw files.
  • If the user just wants a "hand-drawn draft" and does not care about structural rigor, the layout and grouping can be relaxed appropriately, as long as the elements do not completely overlap.

Reference Resources

  • Excalidraw official repository:https://github.com/excalidraw/excalidraw
  • Online application example:https://excalidraw.com/