Blueprint docs

Connect and sign in

  1. In Claude, add a custom connector with this address: 
    https://blueprint.echelonagents.ai/mcp
  2. Claude opens the Blueprint sign-in page.
  3. Enter your email address.
  4. We email you a 6-digit code. It works for 10 minutes.
  5. Enter the code. You are connected.

The two tools

render_diagram (Render a diagram): draws a spec as a PNG image. The answer also lists layout-review warnings and any icon names that were replaced by a grey lettered square. Optional: sizePreset, theme.

verify_diagram (Verify a diagram): checks a spec, or the HTML Blueprint produced, for layout problems such as a label hidden behind a node. It makes no image and does not count against your render limit.

Both only read and compute: they change nothing outside Blueprint and reach no other websites.

The spec

A spec is a JSON object. type is one of architecture, flowchart, sequence. Every type needs a title; description, sizePreset and theme (light or dark) are optional.

A decision node is drawn as a diamond; give each exit branch yes or no and the line prints YES or NO. Flowchart nodes are placed from the edges, so the order of the nodes list does not matter.

Minimal complete spec for each type

architecture

{
 "type": "architecture",
 "title": "Web app",
 "nodes": [
  {
   "id": "api",
   "label": "API",
   "icon": "server"
  },
  {
   "id": "db",
   "label": "Database",
   "icon": "database",
   "kind": "store"
  }
 ],
 "edges": [
  {
   "from": "api",
   "to": "db",
   "label": "read / write"
  }
 ]
}

flowchart

{
 "type": "flowchart",
 "title": "Password reset",
 "nodes": [
  {
   "id": "s",
   "kind": "start",
   "label": "Forgot password"
  },
  {
   "id": "v",
   "kind": "decision",
   "label": "Link valid?"
  },
  {
   "id": "n",
   "kind": "process",
   "label": "Set new password"
  },
  {
   "id": "e",
   "kind": "end",
   "label": "Show error"
  }
 ],
 "edges": [
  {
   "from": "s",
   "to": "v"
  },
  {
   "from": "v",
   "to": "n",
   "branch": "yes"
  },
  {
   "from": "v",
   "to": "e",
   "branch": "no"
  }
 ]
}

sequence

{
 "type": "sequence",
 "title": "Sign in",
 "participants": [
  {
   "id": "u",
   "label": "User"
  },
  {
   "id": "a",
   "label": "App"
  }
 ],
 "messages": [
  {
   "from": "u",
   "to": "a",
   "label": "open the app"
  },
  {
   "from": "a",
   "to": "u",
   "label": "signed in",
   "kind": "return"
  }
 ]
}

Built-in icon keys: user, browser, app, server, database, queue, cdn, worker, identity, laptop, phone, tablet, terminal and location-pin. Any other key still renders, as a grey rounded square with the first letter of the label, and is reported in the answer.

Example prompts

Example 1

"Draw the architecture of a web app: a user reaches a CDN, which forwards to an API; the API uses a database and a job queue, and a worker processes the queue and writes to the database."

Claude passes a spec like this to render_diagram:

{
 "type": "architecture",
 "title": "Web app: CDN, API, queue, worker and database",
 "sizePreset": "doc-wide",
 "theme": "light",
 "zones": [
  {
   "id": "backend",
   "label": "Backend"
  }
 ],
 "nodes": [
  {
   "id": "user",
   "label": "User",
   "sublabel": "browser",
   "kind": "input",
   "icon": "user",
   "col": 0,
   "row": 1
  },
  {
   "id": "cdn",
   "label": "CDN",
   "sublabel": "edge cache",
   "kind": "external",
   "icon": "cdn",
   "col": 1,
   "row": 1
  },
  {
   "id": "api",
   "label": "API",
   "sublabel": "stateless",
   "kind": "focal",
   "icon": "server",
   "col": 2,
   "row": 1,
   "zone": "backend"
  },
  {
   "id": "queue",
   "label": "Job queue",
   "sublabel": "async work",
   "kind": "backend",
   "icon": "queue",
   "col": 3,
   "row": 0,
   "zone": "backend"
  },
  {
   "id": "worker",
   "label": "Worker",
   "sublabel": "background jobs",
   "kind": "backend",
   "icon": "worker",
   "col": 4,
   "row": 1,
   "zone": "backend"
  },
  {
   "id": "db",
   "label": "Database",
   "sublabel": "primary store",
   "kind": "store",
   "icon": "database",
   "col": 3,
   "row": 2,
   "zone": "backend"
  }
 ],
 "edges": [
  {
   "from": "user",
   "to": "cdn",
   "label": "HTTPS",
   "style": "link"
  },
  {
   "from": "cdn",
   "to": "api",
   "label": "origin",
   "style": "primary"
  },
  {
   "from": "api",
   "to": "queue",
   "label": "enqueue",
   "style": "muted"
  },
  {
   "from": "api",
   "to": "db",
   "label": "read / write",
   "style": "muted"
  },
  {
   "from": "queue",
   "to": "worker",
   "label": "consume",
   "style": "muted"
  },
  {
   "from": "worker",
   "to": "db",
   "label": "write",
   "style": "dashed"
  }
 ]
}

Example 2

"Make a flowchart of sign-up with email verification: validate the email, send a 6-digit code, check it, and create the account."

Claude passes a spec like this to render_diagram:

{
 "type": "flowchart",
 "title": "Sign-up with email verification",
 "sizePreset": "doc-wide",
 "theme": "light",
 "nodes": [
  {
   "id": "start",
   "kind": "start",
   "label": "Start sign-up",
   "col": 1,
   "row": 0
  },
  {
   "id": "form",
   "kind": "io",
   "label": "Enter email and password",
   "col": 1,
   "row": 1
  },
  {
   "id": "d1",
   "kind": "decision",
   "label": "Email valid?",
   "col": 1,
   "row": 2
  },
  {
   "id": "err",
   "kind": "end",
   "label": "Show form error",
   "sublabel": "stay on the form",
   "col": 2,
   "row": 2
  },
  {
   "id": "send",
   "kind": "process",
   "label": "Send 6-digit code",
   "icon": "server",
   "col": 1,
   "row": 3
  },
  {
   "id": "d2",
   "kind": "decision",
   "label": "Code correct?",
   "col": 1,
   "row": 4
  },
  {
   "id": "retry",
   "kind": "end",
   "label": "Ask for the code again",
   "sublabel": "up to 5 tries",
   "col": 2,
   "row": 4
  },
  {
   "id": "create",
   "kind": "process",
   "label": "Create account",
   "icon": "database",
   "col": 1,
   "row": 5
  },
  {
   "id": "done",
   "kind": "end",
   "label": "Signed in",
   "col": 1,
   "row": 6
  }
 ],
 "edges": [
  {
   "from": "start",
   "to": "form"
  },
  {
   "from": "form",
   "to": "d1"
  },
  {
   "from": "d1",
   "to": "err",
   "branch": "no"
  },
  {
   "from": "d1",
   "to": "send",
   "branch": "yes"
  },
  {
   "from": "send",
   "to": "d2"
  },
  {
   "from": "d2",
   "to": "retry",
   "branch": "no"
  },
  {
   "from": "d2",
   "to": "create",
   "branch": "yes"
  },
  {
   "from": "create",
   "to": "done",
   "accent": true
  }
 ]
}

Example 3

"Show a sequence diagram of a user signing in to an app through an identity provider: the app redirects to the provider, then exchanges the returned authorization code for an access token."

Claude passes a spec like this to render_diagram:

{
 "type": "sequence",
 "title": "Sign in with an identity provider",
 "sizePreset": "doc-wide",
 "theme": "light",
 "participants": [
  {
   "id": "user",
   "label": "User",
   "sublabel": "browser",
   "kind": "input",
   "icon": "user"
  },
  {
   "id": "app",
   "label": "App",
   "sublabel": "web app",
   "kind": "focal",
   "icon": "app"
  },
  {
   "id": "idp",
   "label": "Identity provider",
   "sublabel": "sign-in service",
   "kind": "external",
   "icon": "identity"
  }
 ],
 "messages": [
  {
   "from": "user",
   "to": "app",
   "kind": "sync",
   "label": "open the app"
  },
  {
   "from": "app",
   "to": "idp",
   "kind": "sync",
   "link": true,
   "label": "redirect to sign-in"
  },
  {
   "from": "idp",
   "to": "app",
   "kind": "sync",
   "label": "authorization code"
  },
  {
   "from": "app",
   "to": "idp",
   "kind": "sync",
   "label": "exchange code"
  },
  {
   "from": "idp",
   "to": "app",
   "kind": "return",
   "label": "access token"
  },
  {
   "from": "app",
   "to": "user",
   "kind": "sync",
   "accent": true,
   "label": "signed in"
  }
 ],
 "activations": [
  {
   "participant": "app",
   "from": 0,
   "to": 5
  },
  {
   "participant": "idp",
   "from": 1,
   "to": 4
  }
 ]
}

Limits

Help

See support.