Introduction

Common methods for drawing architecture and flowcharts all come with trade-offs: using screenshot tools to draw manually often leads to misaligned elements and lines; online drawing tools often require account logins for exporting and sharing; and rendering libraries generate neat “engineering drawing” styles that lack the feel of a hand-drawn whiteboard.

The “Excalidraw Hand-drawn Diagrams” Skill takes a different approach: you directly write standard Excalidraw element JSON, save it as a .excalidraw file, and drag it into excalidraw.com to view, edit, export, and share. No accounts, API keys, or rendering libraries are required throughout the process. The following section introduces its capabilities and usage.

What is this

“Excalidraw Hand-drawn Diagrams” is a Skill published on SkillHub with coordinates @org-b6kzcl68/excalidraw, version 1.0.0, category design-media, source enterprise, and publisher Chongqing Tanguang Network Media Co., Ltd. It solves the problem by turning “drawing a hand-drawn style schematic” into “writing structured JSON,” making diagram creation reproducible, versionable, and shareable.

Core Capabilities

  1. Supports all element formats: rectangles, ellipses, diamonds, arrows, container-bound labels, independent text, etc., can all be generated.
  2. Built-in specifications to avoid pitfalls when writing JSON manually: warnings on label binding, coordinate quick reference for arrow binding, z-order drawing sequence, font size and minimum size standards, and a seven-category semantic color palette.
  3. Includes script usage for uploading and sharing links, allowing you to obtain a shareable link after generating the file.
  4. Zero external dependencies: The Skill tag is requires_api_key=false, and no API key is needed at runtime.

Installation and Activation

Official Address:

https://api.skillhub.cn/org-b6kzcl68/excalidraw

SkillHub Page:

https://www.skillhub.cn/skills/org-b6kzcl68/excalidraw

Skill Coordinates:

@org-b6kzcl68/excalidraw

Note: Both addresses failed to fetch during this verification. The information above is derived from pre-fetched data. The source material does not specify installation command differences for Cursor, Codex CLI, or Claude Code, so unverified commands are omitted here. Please refer to the SkillHub page instructions for specific activation methods.

Typical Usage

The workflow is “Write elements → Save file → Drag into excalidraw.com”.

  1. Write JSON according to the Excalidraw element format. The basic fields for a single element are as follows (field names and values adhere to the official Excalidraw .excalidraw format):
{
  "type": "rectangle",
  "id": "rect1",
  "x": 0,
  "y": 0,
  "width": 200,
  "height": 120,
  "roughness": 1,
  "strokeColor": "#000000",
  "backgroundColor": "transparent",
  "strokeWidth": 1,
  "boundElements": []
}
  1. Place the elements into the elements array of a .excalidraw file and save it as a .excalidraw file.
  2. Drag the file into https://excalidraw.com to view and continue editing.
  3. When sharing is required, use the upload and share link script included in the Skill to obtain a shareable link.

The key points for writing are exactly the specifications built into the Skill: the binding relationship between containers and labels, coordinates for arrow binding, element z-order, font size and minimum size, and the color palette. These are the areas where manual JSON writing is most prone to errors.

Scenarios and Notes

Suitable for: People who need to draw architecture diagrams, flowcharts, sequence diagrams, concept maps, or any hand-drawn style schematics and want the results to be directly shareable. Since it uses structured JSON, it is also suitable for batch maintenance within scripts or repositories.

Notes:

  1. Diagrams are generated via handwritten JSON; element positions, sizes, and binding relationships must be written correctly by yourself. The Skill’s role is to provide specifications and pitfall warnings, not automatic layout.
  2. The built-in specifications for binding, z-order, font size, and color schemes must be read and used first; otherwise, issues such as labels not following containers, misaligned arrows, and incorrect element occlusion order may occur.
  3. According to the SkillHub page, this Skill has a rating of 100,000, 1,403 downloads, and 0 installations. As a newly launched Skill, it is recommended to validate the workflow with a small diagram before batch processing.

Conclusion

The value of “Excalidraw Hand-drawn Diagrams” lies in turning drawing into writing JSON: there are no barriers regarding accounts or keys, and the output is a .excalidraw file that can be dragged into excalidraw.com for further modification, export, and sharing. If you have a batch of scenarios requiring hand-drawn style schematics, you can start trying it here.

Official Address: https://api.skillhub.cn/org-b6kzcl68/excalidraw