@hudsonkit/arc-mcp 0.13.3 → 0.14.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -26,6 +26,10 @@ npx -y @hudsonkit/arc-mcp
26
26
 
27
27
  ## Client setup
28
28
 
29
+ Requires Node.js 22 or newer. No account, API key, or environment configuration
30
+ is required. PNG export needs a local Chrome/Chromium installation; animation
31
+ export also needs ffmpeg.
32
+
29
33
  **Claude Code:**
30
34
 
31
35
  ```bash
@@ -96,13 +100,27 @@ ARC_MCP_HOST=127.0.0.1 ARC_MCP_PORT=5190 bun run mcp:http
96
100
  Arc doesn't run a public MCP endpoint. If you need a hosted one, open an issue
97
101
  at [github.com/hudsonkit/arc](https://github.com/hudsonkit/arc/issues).
98
102
 
103
+ ## MCP Registry
104
+
105
+ Arc's registry identity is `io.github.hudsonkit/arc`. The install metadata lives
106
+ in [`server.json`](./server.json), and the npm package declares the same
107
+ `mcpName` so the registry can verify ownership.
108
+
109
+ Maintainers can run the **Publish to npm** GitHub Actions workflow with package
110
+ scope `mcp` for an MCP-only patch release, or `all` for a coordinated release.
111
+ The workflow sets both versions before building, verifies the packed server,
112
+ publishes npm, then publishes the registry metadata using GitHub OIDC. A dry run
113
+ validates and packs without publishing. GitHub's curated MCP catalog requires
114
+ [initial onboarding](https://github.com/github/github-mcp-server/discussions/1257)
115
+ after publication to the official MCP Registry.
116
+
99
117
  ## Related packages
100
118
 
101
119
  - [`@hudsonkit/arc`](https://www.npmjs.com/package/@hudsonkit/arc) — React renderer, visual studio, `arc` CLI, ASCII renderer
102
120
  - [`@hudsonkit/arc-viewer`](https://www.npmjs.com/package/@hudsonkit/arc-viewer) — native Mermaid sequence diagrams + Mermaid import
103
121
  - [`@hudsonkit/arc-iso`](https://www.npmjs.com/package/@hudsonkit/arc-iso) — isometric renderer for vanilla JS and the browser
104
122
 
105
- Studio + docs: [arc.jdi.sh](https://arc.jdi.sh) · Source: [github.com/hudsonkit/arc](https://github.com/hudsonkit/arc)
123
+ Studio + docs: [hudsonkit.com/arc](https://hudsonkit.com/arc) · Source: [github.com/hudsonkit/arc](https://github.com/hudsonkit/arc)
106
124
 
107
125
  ## License
108
126
 
package/dist/arc-mcp.mjs CHANGED
@@ -34752,10 +34752,11 @@ function generateSVG(diagram, options = {}) {
34752
34752
  svg += ` <circle cx="${toPos.x}" cy="${toPos.y}" r="4" fill="${strokeColor}"/>
34753
34753
  `;
34754
34754
  }
34755
- if (style.label) {
34755
+ const connectorLabel = connector.label ?? style.label;
34756
+ if (connectorLabel) {
34756
34757
  const midX = (fromPos.x + toPos.x) / 2;
34757
34758
  const midY = (fromPos.y + toPos.y) / 2;
34758
- const label = brand?.upperLabels ? style.label.toUpperCase() : style.label;
34759
+ const label = brand?.upperLabels ? connectorLabel.toUpperCase() : connectorLabel;
34759
34760
  const isVertical = Math.abs(toPos.y - fromPos.y) > Math.abs(toPos.x - fromPos.x);
34760
34761
  let lx = midX, ly = midY - 8, anchor2 = "middle";
34761
34762
  if (isVertical) {
@@ -35467,7 +35468,8 @@ async function renderDiagramAnimation(diagram, options) {
35467
35468
  // package.json
35468
35469
  var package_default = {
35469
35470
  name: "@hudsonkit/arc-mcp",
35470
- version: "0.13.3",
35471
+ version: "0.14.1",
35472
+ mcpName: "io.github.hudsonkit/arc",
35471
35473
  type: "module",
35472
35474
  description: "MCP server for Arc — AI agents author, validate, render, and diff architecture diagrams as code",
35473
35475
  author: "Arach Tchoupani",
@@ -35477,7 +35479,7 @@ var package_default = {
35477
35479
  url: "https://github.com/hudsonkit/arc.git",
35478
35480
  directory: "packages/mcp"
35479
35481
  },
35480
- homepage: "https://arc.jdi.sh",
35482
+ homepage: "https://hudsonkit.com/arc",
35481
35483
  bugs: {
35482
35484
  url: "https://github.com/hudsonkit/arc/issues"
35483
35485
  },
@@ -35512,7 +35514,8 @@ var package_default = {
35512
35514
  "arc-mcp": "./dist/arc-mcp.mjs"
35513
35515
  },
35514
35516
  files: [
35515
- "dist/arc-mcp.mjs"
35517
+ "dist/arc-mcp.mjs",
35518
+ "server.json"
35516
35519
  ],
35517
35520
  scripts: {
35518
35521
  build: "bun build.mjs",
@@ -36431,292 +36434,120 @@ var arc_diagram_schema_default = {
36431
36434
  // ../../skills/arc-diagrams/SKILL.md
36432
36435
  var SKILL_default = `---
36433
36436
  name: arc-diagrams
36434
- description: Create architecture diagrams using Arc's JSON format. Use when asked to "create an architecture diagram", "draw a system diagram", "visualize the architecture", or "make a diagram of".
36437
+ description: Create and refine Arc diagrams and structured illustrations for products, processes, concepts, and software. Compose architecture maps, request paths, layered cutaways, panel cubes, comparisons, and visual explanations with editable source and a render-and-review loop.
36435
36438
  ---
36436
36439
 
36437
- # Arc Diagrams
36438
-
36439
- Arc is a visual diagram editor for creating architecture diagrams. This skill enables you to generate Arc-compatible diagram configs that can be rendered in React applications.
36440
-
36441
- ## When to Use
36442
-
36443
- Activate this skill when the user asks to:
36444
- - "Create an architecture diagram"
36445
- - "Draw a system diagram"
36446
- - "Visualize the architecture"
36447
- - "Make a diagram showing..."
36448
- - "Design a flow diagram"
36449
-
36450
- ## Diagram Format
36451
-
36452
- Arc diagrams are JSON objects with this structure:
36453
-
36454
- \`\`\`typescript
36455
- interface ArcDiagramData {
36456
- layout: { width: number; height: number }
36457
- nodes: Record<string, NodePosition>
36458
- nodeData: Record<string, NodeData>
36459
- connectors: Connector[]
36460
- connectorStyles: Record<string, ConnectorStyle>
36461
- flows?: DiagramFlow[]
36462
- }
36463
- \`\`\`
36464
-
36465
- ## Creating a Diagram
36466
-
36467
- ### 1. Define Layout
36468
-
36469
- Set canvas dimensions (default 1600x900 for editor, smaller for exports):
36470
-
36471
- \`\`\`json
36472
- "layout": { "width": 860, "height": 400 }
36473
- \`\`\`
36474
-
36475
- ### 2. Position Nodes
36476
-
36477
- Each node needs an \`x\`, \`y\` position and \`size\`:
36478
-
36479
- \`\`\`json
36480
- "nodes": {
36481
- "frontend": { "x": 50, "y": 100, "size": "l" },
36482
- "api": { "x": 300, "y": 100, "size": "m" },
36483
- "database": { "x": 550, "y": 100, "size": "m" }
36484
- }
36485
- \`\`\`
36486
-
36487
- **Size options** (canonical — use these):
36488
- | Size | Key | Dimensions (px) |
36489
- |------|-----|-----------------|
36490
- | Extra Small | \`xs\` | 80 × 36 |
36491
- | Small | \`s\` | 110 × 48 |
36492
- | Medium | \`m\` | 160 × 75 |
36493
- | Large | \`l\` | 220 × 90 |
36494
-
36495
- Source: \`src/utils/constants.ts\` → \`NODE_SIZES\`. Do **not** use \`large\`/\`normal\`/\`small\`.
36496
-
36497
- ### 3. Define Node Data
36498
-
36499
- Each node needs an icon, name, and color:
36500
-
36501
- \`\`\`json
36502
- "nodeData": {
36503
- "frontend": {
36504
- "icon": "Monitor",
36505
- "name": "Frontend",
36506
- "subtitle": "React",
36507
- "description": "User interface",
36508
- "color": "violet"
36509
- },
36510
- "api": {
36511
- "icon": "Server",
36512
- "name": "API",
36513
- "subtitle": "Node.js",
36514
- "description": "REST endpoints",
36515
- "color": "emerald"
36516
- },
36517
- "database": {
36518
- "icon": "Database",
36519
- "name": "PostgreSQL",
36520
- "subtitle": "Storage",
36521
- "description": "Persistent data",
36522
- "color": "blue"
36523
- }
36524
- }
36525
- \`\`\`
36526
-
36527
- **Available icons (from Lucide):**
36528
- - **Devices:** Monitor, Server, Smartphone, Watch, Cloud, Cpu, Database, HardDrive
36529
- - **Network:** Wifi, Globe
36530
- - **Users:** User, Users
36531
- - **Security:** Lock, Key, Shield
36532
- - **Media:** Mic, Camera, Speaker, Headphones
36533
- - **Code:** Code, Terminal, FileCode, Folder
36534
- - **Data:** Zap, Activity, BarChart, PieChart
36535
- - **Flow:** ArrowRight, ArrowDown, RefreshCw, Repeat
36536
- - **Structure:** Box, Package, Layers, Grid
36537
- - **UI:** Settings, Bell, Mail, MessageSquare, Search, Filter
36538
- - **Actions:** Download, Upload, Play, Pause, Square, Circle
36539
-
36540
- **Available colors:**
36541
- \`violet\` | \`emerald\` | \`blue\` | \`amber\` | \`sky\` | \`zinc\` | \`rose\` | \`orange\`
36542
-
36543
- ### 4. Connect Nodes
36544
-
36545
- Define connections between nodes:
36546
-
36547
- \`\`\`json
36548
- "connectors": [
36549
- {
36550
- "from": "frontend",
36551
- "to": "api",
36552
- "fromAnchor": "right",
36553
- "toAnchor": "left",
36554
- "style": "http"
36555
- },
36556
- {
36557
- "from": "api",
36558
- "to": "database",
36559
- "fromAnchor": "right",
36560
- "toAnchor": "left",
36561
- "style": "sql"
36562
- }
36563
- ]
36564
- \`\`\`
36565
-
36566
- **Anchor positions:**
36567
- \`top\` | \`bottom\` | \`left\` | \`right\` | \`bottomLeft\` | \`bottomRight\` | \`topLeft\` | \`topRight\`
36568
-
36569
- **Optional:** Add \`"curve": "natural"\` or \`"curve": "step"\` for curved connectors.
36570
-
36571
- **Stable identity:** Give a connector an \`id\` when it may be referenced by a focus story or guided view, reviewed in a diff, or when another connector shares the same \`from\`/\`to\` pair. Without an \`id\`, a connector is only addressable by endpoint pair or array index.
36572
-
36573
- **Guided views:** when the diagram explains a flow a reader should follow in order, add \`views[]\` — \`{id, title, node?, nodes?, connectors?, mode?, caption?, steps?}\` per chapter. The player draws a chapter rail (\`showViews\`) and \`/player/<session>?view=<id>\` deep-links a chapter. A view anchored on \`node\` inherits that node's \`focusTargets\` story; declare \`nodes\`/\`connectors\`/\`mode\` to override it.
36574
-
36575
- ### 5. Animate message flows
36576
-
36577
- Add \`flows[]\` when a message or packet should travel the diagram rather than a connector merely having motion styling:
36578
-
36579
- \`\`\`json
36580
- "flows": [
36581
- {
36582
- "id": "request",
36583
- "label": "Request",
36584
- "legs": [
36585
- { "id": "client-api" },
36586
- { "id": "api-db", "pause": 0.4 }
36587
- ],
36588
- "duration": 3,
36589
- "delay": 0.2,
36590
- "hold": 0.6,
36591
- "repeat": "indefinite",
36592
- "easing": "ease-in-out",
36593
- "marker": "packet",
36594
- "color": "emerald",
36595
- "size": 11,
36596
- "trail": "wake"
36597
- }
36598
- ]
36599
- \`\`\`
36600
-
36601
- - Each leg references a connector by stable \`id\` (preferred) or endpoint \`{ "from": "...", "to": "..." }\`; add \`direction: "reverse"\` to run a leg backwards and \`pause\` to dwell between hops.
36602
- - Timing is deterministic: \`speed\` is px/s (default 160), \`duration\` is total route seconds including pauses and overrides \`speed\`, \`delay\`/\`hold\` are seconds, and \`repeat\` is a count or \`"indefinite"\`.
36603
- - \`marker\` is \`dot\` (default), \`packet\`, \`pulse\`, or \`arrow\`; \`trail\` is \`none\`, \`fade\`, or \`wake\`; \`color\`/\`size\` tune the marker.
36604
- - Standalone SVG animates via SMIL, \`render_svg\`/\`render_png\` can sample a still at \`flowTime\`, and \`arc render --format gif|mp4\` or MCP \`render_animation\` captures deterministic frames through Chrome and encodes with ffmpeg.
36605
-
36606
- ### 6. Style Connectors
36607
-
36608
- Define appearance for each connector style:
36609
-
36610
- \`\`\`json
36611
- "connectorStyles": {
36612
- "http": { "color": "amber", "strokeWidth": 2, "label": "HTTP" },
36613
- "sql": { "color": "blue", "strokeWidth": 2, "label": "SQL" },
36614
- "async": { "color": "zinc", "strokeWidth": 1.5, "dashed": true }
36615
- }
36616
- \`\`\`
36617
-
36618
- ## Complete Example
36619
-
36620
- Here's a full diagram for a typical web application:
36621
-
36622
- \`\`\`json
36623
- {
36624
- "layout": { "width": 700, "height": 300 },
36625
- "nodes": {
36626
- "client": { "x": 50, "y": 100, "size": "l" },
36627
- "api": { "x": 300, "y": 100, "size": "m" },
36628
- "cache": { "x": 300, "y": 220, "size": "s" },
36629
- "database": { "x": 520, "y": 100, "size": "m" }
36630
- },
36631
- "nodeData": {
36632
- "client": { "icon": "Monitor", "name": "Client", "subtitle": "React", "color": "violet" },
36633
- "api": { "icon": "Server", "name": "API", "subtitle": "Express", "color": "emerald" },
36634
- "cache": { "icon": "Zap", "name": "Cache", "subtitle": "Redis", "color": "amber" },
36635
- "database": { "icon": "Database", "name": "Database", "subtitle": "Postgres", "color": "blue" }
36636
- },
36637
- "connectors": [
36638
- { "from": "client", "to": "api", "fromAnchor": "right", "toAnchor": "left", "style": "http" },
36639
- { "from": "api", "to": "database", "fromAnchor": "right", "toAnchor": "left", "style": "sql" },
36640
- { "from": "api", "to": "cache", "fromAnchor": "bottom", "toAnchor": "top", "style": "cache" }
36641
- ],
36642
- "connectorStyles": {
36643
- "http": { "color": "amber", "strokeWidth": 2, "label": "HTTP" },
36644
- "sql": { "color": "blue", "strokeWidth": 2, "label": "SQL" },
36645
- "cache": { "color": "emerald", "strokeWidth": 2, "label": "cache" }
36646
- }
36647
- }
36648
- \`\`\`
36649
-
36650
- ## Layout judgment
36651
-
36652
- The contract past "does it validate": a good Arc diagram reads top-to-bottom or left-to-right in one glance. These are the composition rules \`validateDiagram\` partially enforces (\`composition/*\` warnings) and the rest is on you.
36653
-
36654
- **Budget.** ≤12 nodes per flat view. Past ~16 without \`groups\`/\`layoutHints\`/\`views\`, \`composition/too-dense\` warns — the fix is chaptering, not a bigger canvas: split into \`groups\` + \`layoutHints\` for regions, or \`views[]\` for a walkthrough.
36655
-
36656
- **One spine.** Pick one dominant flow direction and hold it: left→right for request/data paths, top→bottom for stacks and pipelines. Everything not on the spine (replicas, sidecars, observability taps) sits on a parallel lane — above/below for a horizontal spine — and reads as secondary: \`zinc\` color, \`dashed\`, thinner \`strokeWidth\`.
36657
-
36658
- **Spacing math.** \`NODE_SIZES\` are xs 80×36, s 110×48, m 160×75, l 220×90. Budget ~150–200px of horizontal pitch between connected nodes (edge gap ≈ 40–80px of clear channel for the stroke + label), ~60–100px vertically. Keep sibling nodes on one baseline and aligned to a ~50px grid when hand-placing.
36659
-
36660
- **When to autoLayout.** Call \`autoLayout()\` (or the editor's auto-layout) when node count exceeds ~8, when groups own their members via \`layoutHints\`, or when the graph is dense and any hand order will cross edges. Hand-place only when the shape itself carries meaning (a ring, a hub-and-spoke) and the node count is small.
36661
-
36662
- **Labels.** The name row is what scans. Budget by size: xs ~5, s ~9, m ~17, l ~26 chars (\`composition/label-overflow\` warns past it, and suggests the next size up). Prefer \`subtitle\` for the qualifier instead of a long name — "API" + subtitle "Express" beats "Express API Server".
36663
-
36664
- **Routing.** Anchors take the direction of travel: \`right→left\` on a horizontal spine, \`bottom→top\` on a vertical one. Never route a connector through an unrelated node (\`geometry/connector-through-node\` is an error). Diagonal corner anchors (\`bottomRight\` etc.) are for fan-out, not the spine. Give an \`id\` to any connector a focus story or view will reference, and to parallel edges sharing \`from\`/\`to\`.
36665
-
36666
- ## Validation and repair
36667
-
36668
- Always validate before handing off JSON.
36669
-
36670
- - In the repo, call \`validateDiagram(value)\` from \`src/utils/diagramDiagnostics.ts\`.
36671
- - Through MCP, call \`validate_diagram\`; it returns \`{ ok, diagnostics }\`.
36672
- - \`validateDiagramShape()\` remains the low-level shape gate; \`validateDiagram\` wraps it and adds repairable diagnostics.
36673
-
36674
- Each diagnostic has a stable \`code\`, \`severity\`, \`subject\`, human \`message\`, optional \`evidence\`, and \`supportedFixes\`.
36675
-
36676
- Repair loop:
36677
-
36678
- 1. Read \`diagnostics\`; fix \`severity: "error"\` before warnings.
36679
- 2. Apply one \`supportedFixes\` entry when offered, or make the direct correction it names.
36680
- 3. Re-validate the edited document.
36681
- 4. Repeat until no error-severity diagnostics remain; leave warnings only when intentional.
36682
-
36683
- Common codes:
36684
-
36685
- - \`shape/*\` — malformed document or entries; fix these before anything else.
36686
- - \`semantic/dangling-connector-endpoint\` — retarget \`from\`/\`to\` or remove the connector.
36687
- - \`semantic/unknown-*\` and \`semantic/duplicate-connector-id\` — use the suggested valid value or unique connector \`id\`.
36688
- - \`geometry/node-overlap\`, \`geometry/connector-through-node\`, \`geometry/node-outside-layout\` — move nodes or run \`autoLayout()\`.
36689
- - \`composition/too-dense\`, \`composition/label-overflow\` — advisory budget warnings: chapter the diagram, or resize the node.
36690
-
36691
- ## Preview and export
36692
-
36693
- - \`render_ascii\` previews a diagram in plain text without external dependencies.
36694
- - \`render_svg\` returns deterministic SVG markup; authored \`flows\` animate via SMIL by default, \`flowTime\` samples a deterministic still, and \`animateFlows: false\` disables them.
36695
- - \`render_png\` returns MCP image content when Chrome/Chromium is installed; set \`ARC_CHROME\` when it is not on \`PATH\`, and use \`flowTime\` to choose a deterministic animation frame. If it returns \`render/chrome-unavailable\`, continue with ASCII/SVG or ask the user to install Chrome/Chromium.
36696
- - \`render_animation\` writes a GIF or MP4 for diagrams with \`flows\`; set \`output\` to a \`.gif\`/\`.mp4\` path, optionally \`duration\`, \`fps\`, \`scale\`, \`theme\`, and \`mode\`. It needs Chrome/Chromium plus ffmpeg (\`ARC_CHROME\`/\`ARC_FFMPEG\`).
36697
- - \`render_html\` emits paste-ready output: \`format=component\` for a React TSX component, \`format=iframe\` for a studio embed tag, or \`format=html\` for a standalone SVG page.
36698
- - The CLI equivalent is \`arc render diagram.json --out artifact.gif --duration 4 --fps 12\`.
36699
-
36700
- ## Output
36701
-
36702
- When generating a diagram, output:
36703
- 1. The complete JSON config
36704
- 2. Brief explanation of the architecture shown
36705
- 3. Suggest the user save it as a \`.arc.json\` file or paste into the Arc editor
36706
-
36707
- ## TypeScript Export
36708
-
36709
- For React projects, diagrams can be exported as TypeScript:
36710
-
36711
- \`\`\`typescript
36712
- import type { ArcDiagramData } from '@hudsonkit/arc'
36713
-
36714
- const diagram: ArcDiagramData = {
36715
- // ... config here
36716
- }
36717
-
36718
- export default diagram
36719
- \`\`\`
36440
+ # Arc diagrams and illustrations
36441
+
36442
+ Make the reader understand a product, process, system, or relationship. Deliver an
36443
+ editable source and a rendered visual whose labels survive the intended display
36444
+ size. Arc can carry a technical illustration beyond a boxes-and-arrows inventory;
36445
+ choose the representation from the explanation.
36446
+
36447
+ ## Establish the explanation
36448
+
36449
+ Infer the audience, destination, and one question the image must answer from the
36450
+ request. Ask only when a missing fact would change the result. For example:
36451
+ “Where does a request wait when all connections are busy?” is a useful brief.
36452
+ “Show everything in the backend” needs a selected path or several views.
36453
+
36454
+ For a real system, inspect its code or supplied evidence before drawing ownership,
36455
+ direction, timing, or trust boundaries. Label hypothetical examples as illustrative.
36456
+ Keep measurements and scale honest; do not invent throughput, latency, or capacity.
36457
+
36458
+ ## Select the representation
36459
+
36460
+ - **Architecture, boundaries, request paths, comparisons:** Arc architecture
36461
+ JSON (\`ArcDiagramData\`). Read [diagram authoring](references/diagram-authoring.md).
36462
+ - **Layers, physical containment, spatial hierarchy:** tiered isometric
36463
+ \`DiagramConfig\`. Read [spatial illustrations](references/spatial-illustrations.md).
36464
+ This is a separate format; do not send it to \`arc check\` or \`arc render\`.
36465
+ - **A concept revealed through three faces:** a graphite panel cube with outward
36466
+ separation and fine callouts. Read [panel cubes](references/panel-cubes.md).
36467
+ Use \`ArcPanelCube\` or \`renderPanelCubeSvg\`; this family has its own renderer.
36468
+ - **Ordered exchanges:** the native Mermaid sequence player when the reader
36469
+ needs message order. Check the installed viewer API and supported syntax.
36470
+ - **Cause and effect:** a small deterministic state model plus an Arc projection.
36471
+ Counts, highlights, and motion must derive from the same model. A static figure
36472
+ can show selected states without building an application.
36473
+
36474
+ Read [composition patterns](references/composition-patterns.md) when choosing a
36475
+ layout or improving an illustration. It maps each pattern to a working example.
36476
+ Use custom SVG/HTML framing for titles, captions, leaders, and insets when useful;
36477
+ keep the technical drawing and its source editable. Photographs and freeform
36478
+ pictorial art need another medium; do not force them into Arc nodes.
36479
+
36480
+ ## Compose deliberately
36481
+
36482
+ Use one dominant reading direction and one focal relationship. Place secondary
36483
+ systems on a quieter lane. Group by ownership or function, not arbitrary proximity.
36484
+ Use the same color for the same role across panels; combine color with labels,
36485
+ stroke patterns, or shapes. Depth must encode a layer or containment relationship.
36486
+
36487
+ Aim for at most 12 nodes in a flat view. Split larger stories into regions or
36488
+ chapters. Use automatic layout for dense graphs; hand placement is appropriate
36489
+ when spatial arrangement carries meaning. Arc's standard node sizes are
36490
+ \`xs\` 80×36, \`s\` 110×48, \`m\` 160×75, \`l\` 220×90. Compute pitch from the actual node
36491
+ width plus a clear connector channel, typically 60–100px. Long labels need more
36492
+ room or a subtitle, not smaller type.
36493
+
36494
+ Give referenced connectors stable IDs. Use \`views\` for chapters and \`flows\` for
36495
+ message travel. Inspect the installed schema before adding fields. Arc architecture
36496
+ JSON and tiered isometric JSON have different shapes and rendering entry points.
36497
+
36498
+ ## Render and review
36499
+
36500
+ A valid document is not evidence of a good illustration. Complete this loop:
36501
+
36502
+ 1. **Validate the source.** For architecture JSON, run \`arc check figure.arc.json\`
36503
+ or MCP \`validate_diagram\`. Resolve errors first; explain intentional warnings.
36504
+ In the source checkout, use \`bun scripts/arc-cli.ts\` in place of \`arc\`.
36505
+ 2. **Render the artifact.** For example:
36506
+ \`\`\`sh
36507
+ arc render figure.arc.json --out figure.svg --theme engineering --mode light
36508
+ arc render figure.arc.json --out figure.png --theme engineering --mode light --scale 2
36509
+ \`\`\`
36510
+ MCP equivalents are \`render_svg\` and \`render_png\`. PNG uses Chrome/Chromium;
36511
+ \`ARC_CHROME\` selects it. For tiered isometric or panel cube output use the
36512
+ corresponding SVG renderer described in the references.
36513
+ 3. **Open the render.** Inspect the actual PNG or browser-rendered SVG, at its
36514
+ intended display width and a reduced width. For a README, check roughly
36515
+ 720px and 360px. Inspect the intended light/dark surfaces where relevant.
36516
+ Source inspection, successful rendering, and ASCII previews do not establish
36517
+ visual quality. If visual inspection is unavailable, report that limitation.
36518
+ 4. **Review together:**
36519
+ - Can a reader identify the subject and main path without the prose?
36520
+ - Are labels legible, unclipped, and clearly attached to their objects?
36521
+ - Are crossings, tangencies, overlaps, and accidental visual groupings absent?
36522
+ - Do arrows, boundaries, layers, and comparison states tell the truth?
36523
+ - Is emphasis reserved for the mechanism being explained?
36524
+ - Does the export preserve the crop, fonts, contrast, and whitespace?
36525
+ 5. **Repair causes.** Shorten labels, widen lanes, split panels, or change the
36526
+ composition. Do not shrink the whole figure to hide a crowded layout. Make
36527
+ one batched correction pass, render again, and confirm it. Stop after that
36528
+ confirmation unless a concrete unresolved defect or user feedback requires
36529
+ further work; name any remaining limitation.
36530
+
36531
+ For authored animation, inspect start, a meaningful transition, and end at fixed
36532
+ \`flowTime\` values. Use motion to explain order or causality; provide a readable
36533
+ still when the destination cannot play it. GIF/MP4 need Chrome and ffmpeg.
36534
+ For a panel cube, inspect \`progress\` at 0, 0.5, and 1; confirm that the faces stay
36535
+ attached to their callouts. Test hover, keyboard activation, touch controls, and
36536
+ reduced motion when delivering an interactive view.
36537
+
36538
+ ## Deliver
36539
+
36540
+ Return the rendered artifact, its editable source, and a short caption explaining
36541
+ what the reader should notice. Include alt text for embedded images. State what
36542
+ was validated and visually inspected; do not call an unviewed render approved.
36543
+ Use the requested destination and format. A new illustration does not authorize
36544
+ publishing a site or releasing a package.
36545
+
36546
+ The installed folder includes references and examples. If reading only the MCP
36547
+ \`arc://skill/diagrams\` resource, relative files may not be exposed: retrieve them
36548
+ from the matching package's \`skills/arc-diagrams/\` folder or the repository's
36549
+ [skill directory](https://github.com/hudsonkit/arc/tree/main/skills/arc-diagrams),
36550
+ and check version compatibility before using a newer API.
36720
36551
  `;
36721
36552
 
36722
36553
  // ../../docs/llm.txt
package/package.json CHANGED
@@ -1,6 +1,7 @@
1
1
  {
2
2
  "name": "@hudsonkit/arc-mcp",
3
- "version": "0.13.3",
3
+ "version": "0.14.1",
4
+ "mcpName": "io.github.hudsonkit/arc",
4
5
  "type": "module",
5
6
  "description": "MCP server for Arc — AI agents author, validate, render, and diff architecture diagrams as code",
6
7
  "author": "Arach Tchoupani",
@@ -10,7 +11,7 @@
10
11
  "url": "https://github.com/hudsonkit/arc.git",
11
12
  "directory": "packages/mcp"
12
13
  },
13
- "homepage": "https://arc.jdi.sh",
14
+ "homepage": "https://hudsonkit.com/arc",
14
15
  "bugs": {
15
16
  "url": "https://github.com/hudsonkit/arc/issues"
16
17
  },
@@ -45,7 +46,8 @@
45
46
  "arc-mcp": "./dist/arc-mcp.mjs"
46
47
  },
47
48
  "files": [
48
- "dist/arc-mcp.mjs"
49
+ "dist/arc-mcp.mjs",
50
+ "server.json"
49
51
  ],
50
52
  "scripts": {
51
53
  "build": "bun build.mjs",
package/server.json ADDED
@@ -0,0 +1,32 @@
1
+ {
2
+ "$schema": "https://static.modelcontextprotocol.io/schemas/2025-12-11/server.schema.json",
3
+ "name": "io.github.hudsonkit/arc",
4
+ "title": "Arc",
5
+ "description": "Author, validate, lay out, render, and diff architecture diagrams as code.",
6
+ "version": "0.14.1",
7
+ "websiteUrl": "https://hudsonkit.com/arc",
8
+ "repository": {
9
+ "url": "https://github.com/hudsonkit/arc",
10
+ "source": "github",
11
+ "subfolder": "packages/mcp"
12
+ },
13
+ "icons": [
14
+ {
15
+ "src": "https://raw.githubusercontent.com/hudsonkit/arc/main/public/arc-mark.svg",
16
+ "mimeType": "image/svg+xml",
17
+ "sizes": [
18
+ "any"
19
+ ]
20
+ }
21
+ ],
22
+ "packages": [
23
+ {
24
+ "registryType": "npm",
25
+ "identifier": "@hudsonkit/arc-mcp",
26
+ "version": "0.14.1",
27
+ "transport": {
28
+ "type": "stdio"
29
+ }
30
+ }
31
+ ]
32
+ }