Works with the AI Agents you already use

    Claude CodeClaude CodeCursorCursorCodex CLICodex CLIDeepSeekDeepSeekMuseMuse+22 more

    Sketchwright: Excalidraw Diagram Engine

    1

    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

    Secure checkout via Stripe

    Money-back guarantee

    Converts to your local currency at checkout

    Security scanned
    Sketchwright: Excalidraw Diagram Engine

    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.

    MetricSpecification
    Output Fileecommerce_arch.excalidraw
    Canvas Dimensions1080px × 480px
    Layout FlowLayered (LR Left-to-Right)
    Components8 nodes, 7 bound directional edges
    FormatNative 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

    1. Edge Tier: Clients securely reach the API Gateway over HTTPS/GraphQL.
    2. Authentication Tier: The Auth Service checks session validity against Redis.
    3. Transaction Tier: The Order Service handles order placement and writes to PostgreSQL.
    4. Asynchronous Messaging: Decoupled RabbitMQ message broker propagates events to the Inventory Service.

    Next steps

    • Open ecommerce_arch.excalidraw directly 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 .excalidraw files 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. 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. 2

      Sign in to Agensi

      Your agent shows a sign-in link. Sign in and click Allow.

    3. 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
    PythonGituv (Python tool runner)Sketchwright MCP

    Zero cloud accounts or API keys required. Sketchwright runs 100% locally on your machine.

    Permissions

    Write Files
    Network Access
    Terminal / Shell
    Read Files

    Sketchwright only reads input diagram specs and writes .excalidraw or .svg diagram files in your workspace.

    Listedtoday

    What's inside

    Frequently Asked Questions

    Unlike typical AI-generated SVGs that are difficult to modify, Sketchwright produces native .excalidraw files. This allows you to open the diagram in any Excalidraw editor to manually move nodes, change colors, or add hand-drawn annotations after the engine has handled the complex layout.

    Standard LLMs often struggle with spatial reasoning, leading to overlapping boxes and tangled lines. Sketchwright uses a deterministic Sugiyama layout engine to calculate exact node positions and routing, ensuring professional, readable architectures every time.

    This skill is an MCP (Model Context Protocol) server designed to work with AI agents and platforms that support the MCP standard, such as Claude Desktop. It requires the `uv` or `uvx` package manager to be installed on your host system for execution.

    Yes, the skill includes an incremental update feature. You can use the update tool to add or remove specific nodes and edges without redrawing the entire diagram from scratch, preserving the general flow of your existing architecture.

    The skill generates structured software architecture shapes including services (rectangles), databases (cylinders), and decision points (diamonds). You can also specify the flow direction, such as Top-to-Bottom or Left-to-Right, to suit your documentation style.

    New in Agents & Orchestration