excalidraw

Transforms JSON input into Excalidraw diagrams such as flowcharts and architecture plans.

3|1|Updated May 19, 2026
One-click install
npx skills add https://github.com/Quill-Agent/Quill-Agent --skill excalidraw-quill-agent
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: excalidraw
Source: https://github.com/Quill-Agent/Quill-Agent/tree/main/skills/creative/excalidraw
Command: npx skills add https://github.com/Quill-Agent/Quill-Agent --skill excalidraw-quill-agent

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill simplifies the creation of hand-drawn diagrams in Excalidraw using JSON input, reducing the time and effort required to produce visually appealing diagrams.

Core Features & Use Cases

  • Hand-drawn Diagrams: Create diagrams such as architecture, flowcharts, and sequence diagrams with a hand-drawn aesthetic using JSON.
  • No Account Required: Simply write the JSON and save as a .excalidraw file, then open it on excalidraw.com.
  • Use Case: For technical documentation, quickly draw a flowchart of a software algorithm or an architectural diagram without the need for graphic design software.

Quick Start

To create a simple diagram, use the following JSON elements and save them to a file:

{
  "type": "excalidraw",
  "version": 2,
  "source": "quill-agent",
  "elements": [
    {
      "type": "rectangle",
      "id": "r1",
      "x": 100,
      "y": 100,
      "width": 200,
      "height": 100
    },
    {
      "type": "text",
      "id": "t1",
      "x": 105,
      "y": 120,
      "width": 190,
      "height": 25,
      "text": "Start",
      "fontSize": 20,
      "fontFamily": 1,
      "strokeColor": "#1e1e1e",
      "textAlign": "center",
      "verticalAlign": "middle",
      "containerId": "r1",
      "originalText": "Start",
      "autoResize": true
    }
  ],
  "appState": {
    "viewBackgroundColor": "#ffffff"
  }
}

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 input?▼

You can generate Excalidraw diagrams by writing JSON elements that define shapes and text, then using Python to process this JSON input into a `.excalidraw` file. This automates diagram creation for technical documentation.

Can I create technical flowcharts and architecture diagrams without an Excalidraw account?▼

Yes, you can create technical flowcharts and architecture diagrams without an account by processing JSON input into a `.excalidraw` file. You simply write the JSON, save the file, and open it directly on excalidraw.com.

Do I need Python to create hand-drawn diagrams for Excalidraw?▼

Yes, Python is required to process the JSON input and transform it into Excalidraw diagrams. This approach simplifies producing hand-drawn aesthetic diagrams like sequence diagrams without graphic design software.

What is the best way to automate diagram creation for technical documentation?▼

Automating diagram creation for technical documentation is best achieved by transforming JSON input into Excalidraw diagrams. This method quickly generates flowcharts of software algorithms or architectural diagrams using a structured JSON format.

Are there limitations when using JSON to build Excalidraw diagrams?▼

Building Excalidraw diagrams with JSON requires manual definition of element properties like coordinates, dimensions, and text styling. Complex technical documentation diagrams demand precise JSON structural formatting to render correctly.