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 分