- Home
- Skills
- Agents & Orchestration
- Sketchwright: Excalidraw Diagram Engine
Works with the AI Agents you already use
Sketchwright: Excalidraw Diagram Engine
Visualizing software architecture through hand-drawn diagrams usually requires tedious manual effort or fighting with layout tools that produce overlapping boxes and crossed lines.
$19
Sketchwright: Excalidraw Diagram Engine
Example session with this skill installed
Create an architecture diagram for an e-commerce microservices platform.
Include
- Web & Mobile Clients
- API Gateway
- Auth Service with Redis session cache
- Order Service with PostgreSQL database
- RabbitMQ event bus connecting Order Service to Inventory Service
Use a clean Left-to-Right layout with semantic shapes, and save the editable diagram as ecommerce_arch.excalidraw.
- Read your context and instructions
- Compiled the sketchwright
Summary
Generated an editable Excalidraw architecture diagram scene for the e-commerce microservices platform using deterministic Sugiyama layered routing and reciprocal arrow bindings.
| Metric | Specification |
|---|---|
| Output File | ecommerce_arch.excalidraw |
| Canvas Dimensions | 1080px × 480px |
| Layout Flow | Layered (LR Left-to-Right) |
| Components | 8 nodes, 7 bound directional edges |
| Format | Native Excalidraw v2 Schema (openable in Excalidraw.com & VS Code) |
Executed Tool Call
sketchwright_create_diagram was invoked with the following specification:
{
"title": "E-Commerce Microservices Architecture",
"layout": { "algorithm": "layered", "direction": "LR" },
"nodes": [
{ "id": "client", "label": "Web & Mobile App", "shape": "rounded_rectangle" },
{ "id": "gateway", "label": "API Gateway", "shape": "rectangle" },
{ "id": "auth", "label": "Auth Service", "shape": "rectangle" },
{ "id": "orders", "label": "Order Service", "shape": "rectangle" },
{ "id": "cache", "label": "Redis Sessions", "shape": "cylinder" },
{ "id": "db_orders", "label": "PostgreSQL Orders", "shape": "cylinder" },
{ "id": "mq", "label": "RabbitMQ Broker", "shape": "rounded_rectangle" },
{ "id": "inventory", "label": "Inventory Service", "shape": "rectangle" }
],
"edges": [
{ "id": "e1", "source": "client", "target": "gateway", "label": "HTTPS/GraphQL" },
{ "id": "e2", "source": "gateway", "target": "auth", "label": "Validate JWT" },
{ "id": "e3", "source": "auth", "target": "cache", "label": "Check Token" },
{ "id": "e4", "source": "gateway", "target": "orders", "label": "REST API" },
{ "id": "e5", "source": "orders", "target": "db_orders", "label": "SQL ACID" },
{ "id": "e6", "source": "orders", "target": "mq", "label": "OrderPlaced Event" },
{ "id": "e7", "source": "mq", "target": "inventory", "label": "Consume Event" }
],
"output_path": "ecommerce_arch.excalidraw",
"overwrite": true
}
Architecture Topology
- Edge Tier: Clients securely reach the API Gateway over HTTPS/GraphQL.
- Authentication Tier: The Auth Service checks session validity against Redis.
- Transaction Tier: The Order Service handles order placement and writes to PostgreSQL.
- Asynchronous Messaging: Decoupled RabbitMQ message broker propagates events to the Inventory Service.
Next steps
- Open
ecommerce_arch.excalidrawdirectly in excalidraw.com or the VS Code Excalidraw extension. - Ask me to add or mutate nodes anytime (e.g. "Add Stripe payment gateway to Order Service").
Connects securely to your tools. The creator never sees your data.
About this skill
Visualizing software architecture through hand-drawn diagrams usually requires tedious manual effort or fighting with layout tools that produce overlapping boxes and crossed lines.
Sketchwright solves this by providing a deterministic layout engine and Model Context Protocol (MCP) server that transforms structured text or JSON specifications directly into editable Excalidraw (.excalidraw) scenes and standalone SVGs.
🚀 What It Does
- Sugiyama Layered Layout: Mathematically positions boxes, calculates rank assignments, and minimizes edge crossings so diagrams are always balanced and legible.
- Native Excalidraw v2 Schema: Generates true reciprocal arrow bindings (
startBinding,endBinding) and centered bound text containers. - Directly Editable: Open, restyle, and modify the generated
.excalidrawfiles in Excalidraw.com, Obsidian, or the VS Code Excalidraw extension. - Zero External API Costs: Generates diagrams locally—no paid third-party drawing APIs or cloud subscriptions needed.
🛠️ Supported Diagram Types
- Software & Cloud Architecture: Microservices, multi-tier web applications, API gateways, database clusters, caches.
- Data Topologies: Ingestion streams, Kafka/RabbitMQ message queues, ETL pipelines.
- Flowcharts & Decision Trees: Branching conditional logic, finite state machines, CI/CD pipelines.
📐 Semantic Shapes & Flow Directions
- Shapes: Rectangles (services), Rounded Rectangles (gateways/queues), Cylinders (databases/caches), Diamonds (decisions), and Ellipses (states/events).
- Flow Directions: Left-to-Right (
LR), Top-to-Bottom (TB), Right-to-Left (RL), and Bottom-to-Top (BT).
💡 Example Prompt for Your Agent
Once installed, simply ask your agent in plain English:
"Create an Excalidraw architecture diagram for my microservices platform: React frontend -> API Gateway -> Auth Service & Order Service -> PostgreSQL & Redis cache. Save it as
architecture.excalidraw."
Find more skills like this on the Claude Skills Marketplace, the Codex Skills Marketplace and the Gemini Skills Marketplace, or browse Claude Skills for Agents & Orchestration.
Requires MCP server host (Claude Desktop/Cursor). Limited to predefined shapes (rectangle, cylinder, etc.). No support for freehand drawing or complex grouped themes.
How to use
- 1
Connect your agent to the Agensi MCP
Copy the prompt and paste it into Claude, ChatGPT, Cursor or any agent that supports MCP. It sets up the connection for you. Manual setup
- 2
Sign in to Agensi
Your agent shows a sign-in link. Sign in and click Allow.
- 3
Ask for what you need
Your agent loads this skill and uses it on your task. It always asks before buying a skill.
Reviews
No reviews yet
Be one of the first to try it. Every listed skill goes through the trust checks below.
Security scanned
Checked by our 8-point scan before listing
Fresh listing
Recently published to Agensi
Money-back guarantee
Doesn't do what its page promises? You get your money back.
Trust & safety
Security scan
Security scan passed today
- Software
Python
Git
uv (Python tool runner)Sketchwright MCP
Zero cloud accounts or API keys required. Sketchwright runs 100% locally on your machine.
Permissions
Sketchwright only reads input diagram specs and writes .excalidraw or .svg diagram files in your workspace.