excalidraw

Generate Excalidraw diagrams as .excalidraw JSON files with optional upload.

1|Updated May 16, 2026
One-click install
npx skills add https://github.com/devMoez/titan --skill excalidraw-devmoez
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: excalidraw
Source: https://github.com/devMoez/titan/tree/main/skills/creative/excalidraw
Command: npx skills add https://github.com/devMoez/titan --skill excalidraw-devmoez

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires cryptography, and includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill eliminates the friction of drawing diagrams by letting you produce valid Excalidraw files directly from JSON, so you can focus on structure and clarity instead of manual UI work.

Core Features & Use Cases

  • Create hand-drawn-looking diagrams as JSON: Produce architecture, flow, and sequence diagrams by writing Excalidraw element JSON and saving it into a .excalidraw file.
  • Use shareable outputs without accounts: Upload the generated .excalidraw to excalidraw.com to get a link for viewing and editing.
  • Diagram correctness guidance: Includes conventions and safeguards (such as container binding for text labels and proper element structure) to avoid blank or invalid diagrams.

Quick Start

Ask Titan to create a .excalidraw file for an architecture flow by generating valid Excalidraw JSON elements and saving them as my_diagram.excalidraw.

Frequently Asked Questions about excalidraw

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate Excalidraw diagrams from JSON without manually drawing them?

To generate Excalidraw diagrams from JSON, you compose Excalidraw element JSON with correct fields like type, id, x, y, width, and height, then save it into a .excalidraw envelope file. This produces valid hand-drawn-looking diagram artifacts directly without using the Excalidraw UI.

How do I create a shareable Excalidraw link without needing an account?

You can create a shareable Excalidraw link by uploading your generated .excalidraw JSON file to excalidraw.com using the provided client-side script. This returns a shareable link for viewing and editing the diagram, requiring no accounts or rendering libraries.

Why does my Excalidraw JSON diagram show blank or invalid text labels?

Excalidraw JSON diagrams show blank or invalid text labels when container binding is not properly applied. You must use containerId and boundElements fields to bind text labels to their parent shapes, ensuring the diagram correctness conventions are met.

Can I generate architecture and sequence diagrams as Excalidraw files?

Yes, you can generate architecture, sequence, flowchart, and concept-map diagrams as Excalidraw files. The process composes valid Excalidraw element JSON and saves it to disk, creating editable diagram artifacts for these structural visualizations.

Do I need any rendering libraries to view Excalidraw JSON diagrams?

No, you do not need rendering libraries to produce Excalidraw JSON diagrams. The Skill writes the element JSON directly to a .excalidraw file on disk, which can then be uploaded to excalidraw.com for viewing and editing.

What is the best way to automate flowchart generation as an editable Excalidraw file?

The best way to automate flowchart generation is to programmatically compose Excalidraw element JSON with correct structural fields and save it as a .excalidraw file. This bypasses manual UI drawing and outputs an editable diagram artifact directly to disk.