excalidraw_skill

Overview

This skill generates Excalidraw-compatible .excalidraw.json files for diagrams like flowcharts, user journeys, system architectures, wireframes, and visual documentation. It produces fully positioned elements, arrows, and text using a 20px grid system and standard sizes so the output opens cleanly in excalidraw.com or any Excalidraw-compatible app. The files are ready to import and edit.

How this skill works

Given a diagram specification, the skill computes grid-aligned x/y coordinates, element sizes, and text centering using the provided formulas. It emits Excalidraw JSON elements (rectangles, diamonds, circles, text, arrows) with correct z-order, colors, and arrow points. The output follows the Excalidraw schema and is saved as a .excalidraw.json file that can be opened directly in Excalidraw.

When to use it

• You need a reproducible diagram exported as a .excalidraw.json file.
• You want programmatic placement and consistent spacing for many nodes.
• You need an editable base for collaborations in Excalidraw.
• You want to convert a textual flow or architecture into a visual diagram.
• You need diagrams with predictable alignment for documentation or presentations.

Best practices

• Define START_X, START_Y and grid parameters (GRID_UNIT=20, COLUMN_WIDTH, ROW_HEIGHT) before generating.
• Map each logical node to grid row/column positions and compute x/y with the position formula.
• Use standard element sizes (small, standard, large, diamond, circle) to keep visual consistency.
• Center text using the text centering formula and estimate text_width/text_height per font-size guide.
• Order elements so background shapes come first, then arrows, then foreground shapes and text to respect z-order.
• Assign stable unique IDs and incrementing seeds to avoid collisions when regenerating files.

Example use cases

• Generate a left-to-right flowchart for a signup process with three steps and arrows between steps.
• Create a decision branch diagram with a diamond node and separate yes/no paths.
• Produce a system architecture snapshot with containers, arrows for data flow, and labeled endpoints.
• Build a user journey map with start/end circles and annotated process boxes.
• Export wireframe blocks and labels as a .excalidraw.json file for rapid UI iteration.