Excalidraw Flowchart
Create Excalidraw flowcharts from descriptions. Use when user asks to "create a flowchart", "draw a diagram", "visualize a process", "make a flow diagram", "architecture diagram", or discusses workflow/process visualization. Supports DSL, DOT/Graphviz, and JSON formats.
Why use this skill?
Easily generate professional flowcharts and architecture diagrams with the Excalidraw Flowchart skill. Transform text into visual diagrams for documentation.
Install via CLI (Recommended)
clawhub install openclaw/skills/skills/swiftlysingh/excalidraw-flowchartWhat This Skill Does
The Excalidraw Flowchart skill empowers OpenClaw to translate natural language descriptions of processes, workflows, and architectures into visual diagrams compatible with Excalidraw. By leveraging a custom Domain Specific Language (DSL), the skill programmatically constructs nodes, edges, decision diamonds, and complex flow structures. Users can generate professional-grade, editable architecture diagrams and flowcharts without needing to drag-and-drop elements manually in a GUI, allowing for rapid documentation and iterative design.
Installation
To enable this skill, run the following command in your terminal or via the OpenClaw management console:
clawhub install openclaw/skills/skills/swiftlysingh/excalidraw-flowchart
Ensure that you have Node.js installed on your system. The skill utilizes the @swiftlysingh/excalidraw-cli package, which can be executed via npx for immediate use or installed globally via npm install -g @swiftlysingh/excalidraw-cli for performance optimization in high-frequency environments.
Use Cases
This skill is ideal for software engineers, system architects, and project managers. Use it to visualize microservice architectures, map out user onboarding flows, document API decision trees, or sketch out sequence diagrams during brainstorming sessions. It effectively turns complex text-based requirements into clear visual references.
Example Prompts
- "Create a flowchart that illustrates the user login process, starting from the landing page, checking for an active session, and branching based on whether the user is authenticated or requires registration."
- "Can you visualize the system architecture for a serverless web application including a frontend client, a load balancer, multiple Lambda functions, and a DynamoDB instance?"
- "Make a flow diagram for my team's sprint planning workflow, specifically showing the steps from backlog refinement to ticket completion, including a decision point for QA approval."
Tips & Limitations
For best results, keep your DSL descriptions structured. Use the '@direction' directive to control layout flow (e.g., Left-to-Right or Top-to-Bottom). While the skill excels at standard flowchart structures, avoid overly nested diagrams to maintain readability within the Excalidraw canvas. Always verify the output by opening the resulting .excalidraw file in your preferred browser at https://excalidraw.com to perform final adjustments or styling tweaks. The skill does not support complex 3D rendering or non-standard drawing types beyond the defined DSL nodes.
Metadata
Not sure this is the right skill?
Describe what you want to build — we'll match you to the best skill from 16,000+ options.
Find the right skillPaste this into your clawhub.json to enable this plugin.
{
"plugins": {
"official-swiftlysingh-excalidraw-flowchart": {
"enabled": true,
"auto_update": true
}
}
}Tags(AI)
Flags: file-write