Arc

io.github.hudsonkit由 GitHub 帳號 hudsonkit 發布v0.14.1更新於 Oct 29, 2026

Author, validate, lay out, render, and diff architecture diagrams as code.

已驗證STDIO僅桌面開發者工具媒體與設計

概覽

AI 產生的概覽

Arc 讓助理以程式碼方式撰寫、驗證、自動排版、算繪與比對架構圖,可匯出 SVG、PNG、HTML、ASCII 或動畫。

可以做什麼
  • 驗證圖表並取得帶錯誤碼的診斷與修正建議
  • 對完整或最簡圖表自動排版,並對兩張圖表做結構化差異比對
  • 將圖表算繪為 SVG、PNG、HTML 片段或 ASCII 字元畫
  • 把流程動畫算繪為 GIF 或 MP4 並寫入指定輸出路徑
  • 將有效圖表轉換為具型別的 TypeScript 模組
  • 產生 Arc 工作室跳轉連結,並在搭配的工作室下發布即時檢視與已儲存的架構審查
適用情境
適合把架構圖以 JSON 形式存放在程式碼儲存庫中,希望助理檢查、排版、算繪或比較這些圖表,或把圖表交給 Arc 工作室檢視的情境。
執行需求
透過 npx 或 bunx 執行的本機 stdio 程序,需要 Node.js 22 或更新版本。不需帳號、API 金鑰或環境設定。匯出 PNG 需要本機 Chrome/Chromium(可用 ARC_CHROME 覆寫);匯出動畫另需 ffmpeg(ARC_FFMPEG)。即時檢視與審查需要版本相符的 Arc 工作室建置;HTTP 服務綁定於非回送位址時需要 ARC_MCP_TOKEN。
安裝前請注意
即時檢視與審查工具會把圖表內容發布到工作室並回傳連結;任何取得完整檢視連結的人都能讀取該圖表,審查呼叫也會回傳作者與檢視者憑證,應妥善保密。呼叫端宣告的 agent 標籤並非經驗證的身分。即時工作階段存於記憶體且會過期,需長期保留時請從工作室匯出。HTTP 模式在回送位址之外必須設定 ARC_MCP_TOKEN。

安裝

在 SourceWeft 中

  1. 開啟 儀表板中的 Arc,將其新增到工作區。
  2. 為需要使用其工具的對話啟用該服務。

Desktop only,透過 STDIO。 STDIO 服務會啟動本機處理程序,因此需要 SourceWeft 桌面主機。

其他 MCP 客戶端

參照 儲存庫 中的啟動說明。

README

[Arc]

@hudsonkit/arc-mcp

MCP server for architecture diagrams as code.

Gives AI agents the full Arc toolchain over the Model Context Protocol — author, validate, lay out, render, and diff architecture diagrams from any MCP client.

[npm version] [license]

Run it

No install needed — the server runs over stdio:

bash
npx -y @hudsonkit/arc-mcp# or: bunx @hudsonkit/arc-mcp

Client setup

Requires Node.js 22 or newer. No account, API key, or environment configuration is required. PNG export needs a local Chrome/Chromium installation; animation export also needs ffmpeg.

Claude Code:

bash
claude mcp add --scope project arc -- npx -y @hudsonkit/arc-mcp

Devin:

bash
devin mcp add arc -- npx -y @hudsonkit/arc-mcp

Any MCP client (JSON config):

json
{  "mcpServers": {    "arc": {      "command": "npx",      "args": ["-y", "@hudsonkit/arc-mcp"]    }  }}

Tools

ToolWhat it does
validate_diagramCoded diagnostics for ArcDiagramData — consume by code, apply a supportedFixes entry, re-validate
auto_layoutAuto-layout a full diagram or minimal input (nodeData + connectors + connectorStyles)
diff_diagramStructural DiagramDelta — feed to <ArcDiagram data={head} delta={delta} /> for a diff render
render_svgDeterministic SVG export — eleven themes, light/dark; authored flows animate via SMIL or sample at flowTime
render_pngPNG raster via a local Chrome/Chromium binary (ARC_CHROME to override, ARC_CHROME=none to disable), sampled at flowTime
render_animationGIF/MP4 flow animation to an output path via Chrome frames + ffmpeg (ARC_FFMPEG to override)
render_htmlReact component snippet, iframe embed, or standalone HTML page
render_asciiUnicode/ASCII box-art rendering for terminals and docs
diagram_to_typescriptEmit a typed ArcDiagramData TypeScript module
editor_handoffBuild URLs that open the diagram in the Arc studio
open_live_diagramOpen a live architecture view and return its stable URL and session ID
begin_live_diagram_workDeclare work before starting it, with a summary and canvas, node, or region scope
update_live_diagramPublish a complete validated diagram revision to that view
finish_live_diagram_workFinish the current work ID and leave the view idle for the next task
end_live_diagramMark the diagram complete and retain the final view
open_architecture_reviewSave a baseline and open a durable architecture review
update_architecture_reviewSave findings, evidence, decisions, questions, and summary
resume_architecture_reviewResume an interrupted review with its author capability
revoke_architecture_review_shareInvalidate the old viewer link and return a new capability

Live architecture

Start the Arc studio with bun run dev, then call open_live_diagram with { diagram, title?, agent?: { harness, name? } }. Open the returned liveUrl once. The view starts idle. Before doing diagram work, call begin_live_diagram_work with { sessionId, summary, scope? } and retain its workId. Publish complete revisions with update_live_diagram({ sessionId, diagram, message? }); keep node IDs stable so the viewer can follow each move. In your cleanup/finally path, call finish_live_diagram_work({ sessionId, workId, message? }) when the declared work ends. This leaves the same view idle and reusable. Use end_live_diagram with { sessionId, message? } only when the entire diagram session is complete.

Scope defaults to { type: "canvas" }. Use { type: "nodes", nodeIds: ["api"] } for existing boxes, or { type: "region", x: 400, y: 80, width: 200, height: 160 } for the area where new boxes will appear. A scope accepts 1–200 unique existing node IDs, each at most 200 characters. Region coordinates must be finite and within ±100000; width and height must be positive and at most 100000. Summaries are trimmed, 1–500 characters, and cannot contain control characters. Concurrent begin calls and stale finish IDs are rejected without replacing active work.

The live view belongs to the Hudson Kit Arc studio. ARC_EDITOR_URL selects the studio base URL; open_live_diagram also accepts baseUrl for an individual view, including a deployment prefix such as /arc. The MCP client name/version comes from its initialize handshake. The displayed connection ID is generated by the server; it does not claim to be the client's conversation ID.

The optional agent object declares a harness label and, if useful, an agent name for this view. For example, agent: { harness: "Codex", name: "Reviewer" } adds actor.harness and actor.displayName. These are caller-declared labels, not verified identities. They never replace the actual MCP actor.name, actor.version, or connection actor.id, and do not carry over to other views. Both labels are trimmed, limited to 1–80 characters, and reject control characters.

The local scripts/liveDiagram.control.ts driver accepts ARC_AGENT_HARNESS and optional ARC_AGENT_NAME to send these labels. Neither has a default; ARC_AGENT_NAME requires ARC_AGENT_HARNESS. The driver accepts JSON lines such as {"type":"begin","summary":"Inspect API","scope":{"type":"nodes","nodeIds":["api"]}}, then {"type":"finish","workId":"<returned ID>","message":"API checked"}. Its status command reports local session metadata. quit closes the relay; it does not claim that unfinished work succeeded.

In stdio mode the first live view starts a loopback HTTP relay on a free port. Keep the MCP process running and open the view on the same computer. The browser may request local-network or loopback-network access when a hosted HTTPS studio connects to that relay. Allow that permission for the studio. Loopback addresses are treated specially by browser mixed-content rules; arbitrary HTTP LAN or remote relay URLs do not get the same guarantee. Browser support, enterprise policy, and the studio's CSP can still prevent the connection. An all-local studio (bun run dev, ARC_EDITOR_URL=http://localhost:5188) avoids the public website-to-loopback permission boundary. For a remote relay used from an HTTPS studio, serve the relay over HTTPS. See the Local Network Access specification and Chrome's permission guidance. HTTP mode serves the stream beside /mcp, so a configured remote relay can be used from another computer. The URL fragment carries a read capability for one diagram; anyone given the full URL can read it. Only its owning MCP connection can update it. Browser requests must come from that view's configured studio origin. The HTTP server enforces ARC_MCP_TOKEN on every MCP request when set, and requires it when binding outside loopback.

Each stream sends the latest full snapshot immediately, including after a reconnect. Invalid updates preserve the previous state. Only explicit work is working; edits outside a declared work item stay idle. Valid updates during work preserve its scope and renew a five-minute lease. Finishing marks the work complete and the session idle. Disconnect or lease expiry marks work interrupted; ending the entire session completes any active work. A later standalone edit clears previous work metadata. These calls describe declared diagram work, not unobserved harness thinking. Unfinished diagrams remain available while their owning MCP connection stays open. Completed diagrams expire one hour after completion; unfinished diagrams expire one hour after their owner disconnects. Stopping the MCP process discards ordinary in-memory live sessions. Save/export a diagram from the studio when it needs to outlive that process.

Live tools require a matching MCP build and studio build. During development, build this checkout with bun run build:mcp and configure the client to run node /absolute/path/to/arc/packages/mcp/dist/arc-mcp.mjs; run its studio with bun run dev. Listing a tool here does not mean an older published package or the currently deployed Hudson Kit website already includes it.

Saved architecture reviews (private preview)

The private preview adds a durable review to the same Hudson Kit canvas. Follow the private preview setup to build matching studio and MCP artifacts and serve them from one private address.

Open with open_architecture_review({diagram,title,question,repository?,agent?}). Repository metadata is {name,url?,revision?}. The result includes a private author resumeToken as well as the normal sessionId and read-only viewer URL. Use the existing begin/update/finish/end tools for declared work and diagrams. Save evidence through update_architecture_review with summary, findings, decisions, and openQuestions; omitted fields stay unchanged, and supplied arrays replace the full previous list.

Findings are {id,title,detail,severity,nodeIds?,sources}, with severity info|low|medium|high. Sources are {path,line?,revision?,url?}. The studio shows those references alongside the canvas, and its Save review action downloads {schemaVersion:1,baseline,snapshot,revisions} without secrets. Source claims are author-supplied evidence, not verified by Arc itself.

Reviews persist before publishing each revision. Keep ARC_REVIEW_DIR and the private server address stable to reopen the same saved viewer link after a restart. Use resume_architecture_review({sessionId,resumeToken,agent?}) after losing the author connection. Optional agent: {harness,name?} supplies caller-declared display labels alongside the new connection's actual MCP identity. Omit it to use only that connection identity. It cannot displace a live author. Completed reviews stay read-only and keep their final author and history unchanged. revoke_architecture_review_share({sessionId}) invalidates the old viewer capability. Saved reviews are not removed by the ordinary live view's one-hour expiry.

For a terminal author, scripts/review.control.ts keeps one HTTP MCP connection open and accepts JSON lines of {id?,name,arguments}. Set ARC_MCP_URL and, if configured, ARC_MCP_TOKEN in its environment. EOF disconnects the author; finish/end calls must be explicit. Keep its output private because opening a review returns author and viewer capabilities.

Resources

URIContent
arc://schema/diagramGenerated draft-07 JSON Schema for ArcDiagramData
arc://skill/diagramsArc diagram-generation skill for agents
arc://docs/llmDense LLM briefing

Self-hosting over HTTP

The published bin runs over stdio, which is all a local client needs. To serve Arc to clients on other machines, run the Streamable HTTP server from a checkout of the repo:

bash
git clone https://github.com/hudsonkit/arc && cd arcbun installARC_MCP_HOST=127.0.0.1 ARC_MCP_PORT=5190 bun run mcp:http# MCP endpoint: http://127.0.0.1:5190/mcp · health: /health
VariableDefaultPurpose
ARC_MCP_PORT5190Port to listen on
ARC_MCP_HOST127.0.0.1Interface to bind; nonloopback binds require ARC_MCP_TOKEN
ARC_MCP_PUBLIC_URLhttp://<host>:<port>Externally reachable origin used in live stream URLs and Host validation; preserve this Host through a reverse proxy
ARC_MCP_ALLOWED_ORIGINSStudio and relay originsAdditional comma-separated browser origins permitted to use /mcp
ARC_EDITOR_URLhttp://localhost:5188Studio base used by handoffs and live views
ARC_MCP_TOKENUnsetAgent bearer credential; required outside loopback
ARC_STUDIO_DIRUnsetProduction studio build to serve beside MCP
ARC_REVIEW_DIR~/.arc/reviewsPrivate durable review storage, outside the studio build

Arc doesn't run a public MCP endpoint. If you need a hosted one, open an issue at github.com/hudsonkit/arc.

MCP Registry

Arc's registry identity is io.github.hudsonkit/arc. The install metadata lives in server.json, and the npm package declares the same mcpName so the registry can verify ownership.

Maintainers can run the Publish to npm GitHub Actions workflow with package scope mcp for an MCP-only patch release, or all for a coordinated release. The workflow sets both versions before building, verifies the packed server, publishes npm, then publishes the registry metadata using GitHub OIDC. A dry run validates and packs without publishing. GitHub's curated MCP catalog requires initial onboarding after publication to the official MCP Registry.

Related packages

Studio + docs: hudsonkit.com/arc · Source: github.com/hudsonkit/arc

License

MIT

來源:packages/mcp/README.md,提交 24ea394

工具

10

validate_diagram

Validate an ArcDiagramData document. Returns coded diagnostics — consume by `code`, apply one `supportedFixes` entry, re-validate. `ok` is false while any error-severity diagnostic remains.

輸入參數diagram必填severity

diff_diagram

Structural diff of two Arc diagrams. Returns a DiagramDelta — added/removed/moved/changed nodes, connector adds/removes/changes (keyed by connector id or from→to), connectorStyles and groups deltas, layoutChanged. Feed it to <ArcDiagram data={head} delta={delta} /> for a diff render.

輸入參數base必填head必填

auto_layout

Run Arc auto-layout on a diagram. Pass a full diagram or minimal input (nodeData + connectors + connectorStyles).

輸入參數input必填

render_ascii

Render an Arc diagram as monospace ASCII/Unicode box art.

輸入參數charsetdiagram必填maxWidth

render_svg

Render an Arc diagram as deterministic SVG markup using the package export path.

輸入參數modethemediagram必填paddingflowTimeincludeGridanimateFlowsbackgroundColor

render_png

Render an Arc diagram as a PNG via an installed Chrome/Chromium binary. Returns MCP image content plus render metadata. Set ARC_CHROME if Chrome is not on PATH.

輸入參數modescalethemediagram必填paddingflowTimeincludeGridbackgroundColor

render_animation

Render diagram flows as a GIF or MP4 artifact. Uses deterministic frame captures through Chrome plus ffmpeg; requires an `output` path because video payloads are too large for MCP text.

輸入參數fpsmodescalethemeformatoutput必填diagram必填paddingdurationincludeGridbackgroundColor

render_html

Render an Arc diagram as a React component snippet, iframe embed, or standalone HTML page.

輸入參數modethemetitlewidthformatheightbaseUrldiagram必填paddingdataNamesessionIdincludeGrid另有 3 個

diagram_to_typescript

Convert a valid Arc diagram JSON into a TypeScript module that exports ArcDiagramData.

輸入參數diagram必填exportName

editor_handoff

Build URLs to open a diagram in the Arc studio. Returns a hash-based editor URL and showcase link.

輸入參數viewbaseUrldiagram必填sessionId

版本歷史

1
  1. v0.14.1最新Oct 26, 2026

評分

已滿足適用檢查項的 90%

該評分衡量此收錄條目的完整程度,依據註冊中心條目、端點與公開來源計算得出。它不是對伺服器本身的評價,也不表示伺服器安全或目前可用:可連通性是帶日期的檢查結果,評分也不包含安裝量或使用者評價。

  • 近 30 天內可連通25 分
  • 已宣告認證方式10 分

    請在註冊中心條目中宣告憑證請求標頭,或保持端點能夠回應探測,以便判定其認證方式。

  • 已列出工具必需15 分
  • 描述必需15 分
  • 圖示10 分
  • 文件15 分
  • 授權條款10 分