skills.rest
superfhp
superfhpCOMMUNITY
Explore all skills by this author →
GitHub

excalidraw

Create Excalidraw diagrams from JSON and save .excalidraw files.

Updated May 8, 2026
Search Tags:#json#visualization#diagrams#flowcharts#Excalidraw
One-click install
npx skills add https://github.com/superfhp/lumi-agent --skill excalidraw-superfhp
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: excalidraw
Source: https://github.com/superfhp/lumi-agent/tree/main/skills/creative/excalidraw
Command: npx skills add https://github.com/superfhp/lumi-agent --skill excalidraw-superfhp

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill allows users to create hand-drawn diagrams directly through JSON input, streamlining the process of visualizing data and concepts.

Core Features & Use Cases

  • JSON-based diagram creation: Generate Excalidraw-compatible JSON to create various diagrams like flowcharts, architecture diagrams, and more.
  • Direct editing: Convert JSON to .excalidraw files for direct editing on excalidraw.com.
  • Use Case: Design a complex system architecture diagram by providing the JSON structure as input to the Skill.

Quick Start

Write the JSON structure for a diagram and save it as a .excalidraw file using write_file.

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

To generate Excalidraw diagrams from JSON, you define the diagram structure using JSON and execute the Skill to output a .excalidraw file. This enables creating flowcharts and architectural diagrams without manual drawing.

Can I create flowcharts using JSON input?▼

Yes, you can create flowcharts using JSON input. The Skill parses your JSON-based diagram structure to automatically generate corresponding flowchart elements and saves the output as an editable file.

What is the best way to automate architectural diagram creation?▼

Automating architectural diagram creation is best done by writing a JSON structure that defines the system components and using the Skill to save it as an .excalidraw file. This bypasses manual drawing entirely.

Does this JSON visualization approach work with excalidraw.com?▼

Yes, the JSON visualization approach works with excalidraw.com. The Skill outputs a .excalidraw file that you can directly open and edit on the excalidraw.com platform for further refinement.

Do I need to manually draw sequence diagrams if I have the JSON structure?▼

No, you do not need to manually draw sequence diagrams if you have the JSON structure. The Skill converts your JSON definition directly into a .excalidraw file, automating the visualization process.

Related Skills

Explore More Design & Creative Skills→
ooiyeefeiooiyeefei
472

excalidraw

Generates Excalidraw-compatible JSON architecture diagrams from analyzed codebases.

Community
Basic
fikriaffikriaf

excalidraw

Generate hand-drawn style diagrams in Excalidraw JSON format.

Community
Basic
RamanEbrahimiRamanEbrahimi
3

hypothesis-generation

Generate structured scientific hypotheses from observational data using a scientific method framework.

Community
Advanced
vuminhieuvuminhieu

mermaidjs-v11

Render Mermaid.js v11 diagrams to SVG, PNG, or PDF via CLI.

Community
Intermediate