Open source · Apache-2.0 · MCP-native

Diagrams agents can actually edit.

An open-source diagram library where agents edit structured graphs — not Mermaid blobs, fragile JSX, or static PNGs.

Get started Star on GitHub Try the playground

$ npx -y @aigentive/wire-mcp@latest

wire-diagram · agent-router.json

CanvasSVGMermaid

Why Wire

Wire fixes the model, not the prompt.

Mermaid blobs that almost render. JSX trees that go fragile on edit. PNGs an agent can’t revise. Wire gives agents a structured graph they can read, mutate, validate, and re-render — same canonical model behind the JSX developer surface and the MCP tool surface.

Canonical JSON

One schema across React, MCP, CLI, and static renderers. from, branch, attachedTo, tone, handles, routing — semantics designed to be unambiguous to LLMs.

Same model, three surfaces

Render the same WireDiagram as an interactive canvas, a static SVG, or a Mermaid string. The toolbar on every example flips between them live.

Shared action reducer

Every human, hosted editor, CLI, and MCP edit flows through one WireAction reducer. Direct MCP tools and React gestures map to the same actions.

MCP-native

Drop Wire into any MCP client.

The MCP server ships diagram CRUD, direct action tools, atomic apply_actions, render tools, resources, and prompts over stdio or HTTP. Configure once and any compatible agent can author diagrams as structured graphs.

21 tools — create, edit, validate, render, batch apply.
Resources at wire://diagrams/{id}.{ext}.
Built-in prompts for review, simplification, and reverse-engineering.

MCP clients setup

claude_desktop_config.json

json

{
  "mcpServers": {
    "wire": {
      "command": "npx",
      "args": ["-y", "@aigentive/wire-mcp@latest"],
      "env": {
        "WIRE_STORAGE_DIR": "/absolute/path/to/diagrams"
      }
    }
  }
}

Pick a surface

Three authoring paths. Same canonical JSON.

Whichever entry point your team uses, the diagram on disk is identical. Mix and match across humans, agents, and CI.

From an agentMCP server

Any MCP-compatible agent reads and writes Wire JSON through the same reducer the editor uses.

Terminal

# stdio (default)
npx -y @aigentive/wire-mcp@latest

# or HTTP transport on :3860
npx -y @aigentive/wire-mcp@latest --http

MCP setup

From a React appReact library

Drop in WireEditor. Pass diagram + onChange. Mode flips between view and edit.

tsx

import type { WireDiagram } from "@aigentive/wire-core";
import { WireEditor } from "@aigentive/wire-react";

export function WorkflowEditor({
  diagram,
  onChange
}: {
  diagram: WireDiagram;
  onChange: (d: WireDiagram) => void;
}) {
  return <WireEditor diagram={diagram} onChange={onChange} fitView />;
}

Quickstart

From the CLIwire CLI

Generate, edit, validate, and export diagrams from a terminal. Templates included.

Terminal

npm install -g @aigentive/wire-cli

wire init my-flow --template=approval-flow
wire add ai --diagram=my-flow --title="Classify" \
  --from=incoming --model=gpt-4.1-mini
wire validate my-flow
wire export my-flow --format=svg --out=my-flow.svg

CLI reference

What’s in the box

A small surface, organized around one canonical model.

@aigentive/wire-coreSchema, validation, IDs, normalize, layout, the WireAction reducer.
@aigentive/wire-reactEditor, viewer, canvas, palette, inspector, hooks, JSX facade.
@aigentive/wire-renderersStatic SVG, PNG helpers, Mermaid, optional React Flow conversion.
@aigentive/wire-mcpMCP server over stdio + streamable-HTTP with the full tool surface.
@aigentive/wire-cliwire init · add · validate · export · ls.
apps/playgroundSelf-hostable Next.js editor, share API, and renderer service.

Get started

Start in two commands.

Install the React library or spin up the MCP server locally. Both render from the same canonical WireDiagram.

Terminal

npm install @aigentive/wire-react
npx -y @aigentive/wire-mcp@latest

Read the docs GitHub