Excalidraw Hand-drawn Diagrams

.excalidraw

Usage Scenarios

• 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)

• 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)

Generation Rules (Agent Internal Steps)

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

• 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

• 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 official repository:

  https://github.com/excalidraw/excalidraw

• Online application example:

  https://excalidraw.com/