npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2026 – Pkg Stats / Ryan Hefner

text-to-diagram

v1.3.2

Published

Archify 式图示流水线:Agent 只产出结构化 JSON(禁止坐标/DSL),本地做 Schema 校验 + 自动修复 + 证据反幻觉 + dagre/ELK 双引擎布局 + SVG/HTML/PNG/Mermaid/PlantUML/draw.io/Excalidraw 多格式导出。中文友好、零锁定、无 Chromium。

Readme

text-to-diagram

CI npm license node tests no chromium

Archify 式图示流水线:Agent 只产出结构化 JSON,排版布局编译全部交给本地程序。

30 秒体验(无需安装):

npx text-to-diagram -i graph.json -o graph.svg --html graph.html --auto
自由文本 ──Agent(加载 SKILL.md)──▶ nodes/links JSON
        │                               │
        │  ① 容错解析       ② Schema 校验 + 自动修复 + 证据溯源
        │                               │
        └───────────────────────────────┘
                                    │
              ③ 架构即测试(rules)④ 双引擎布局(dagre/ELK)⑤ 质量评分
                                    │
                    ⑥ 多视图投影 + 多格式导出 + 渲染
                                    │
                              SVG / 交互式 HTML / PNG / Mermaid / PlantUML / draw.io / Excalidraw

Agent 侧硬性禁止输出 SVG / HTML / Mermaid / 坐标尺寸;本地侧对 JSON 做 Schema 校验、id 引用检查、防重叠体检、自动修复与证据溯源,然后编译输出。


English — text-to-diagram is an Archify-style pipeline: the Agent emits only structured JSON (nodes / links / graphMeta); all layout, rendering, and validation happen locally. It deliberately forbids the model from emitting coordinates, SVG, or DSLs. The local engine validates → auto-repairs → traces evidence (anti-hallucination) → lays out with dagre/ELK → renders to SVG / interactive HTML / PNG / Mermaid / PlantUML / draw.io / Excalidraw. Chinese-friendly, lock-in-free, Chromium-free.

为什么做这个 / 差异化定位

市面上的图表工具分两派:DSL 派(Mermaid/PlantUML/D2,让模型写脆弱文法)与 AI 直接画图派(模型吐 SVG,坐标一塌糊涂)。本项目走第三条路,也是 Archify / Glyphic 引领的 2025–2026 前沿范式:

AI 只描述「图是什么意思」,引擎负责「画在哪、怎么画」。

在此范式上,本项目有四个头部项目没有的差异化护城河:

| 差异化 | 说明 | 对标 | | --- | --- | --- | | 证据反幻觉 | link.evidence 须为原文子串,否则记 evidenceIssues,--strict 判失败——把「图对不对」从玄学变可验证 | Archify/Glyphic 均未宣称 | | 机读修复单闭环 | 校验/修复结果统一成 fixList(稳定 code + appliesTo + 可执行 fix 指令),Agent 据此改源 JSON 再校验,≤2 轮收敛 | 对齐 Archify 最强牌 | | 零锁定导出 | 同一份 IR 可吐 SVG/HTML/PNG + 反向兼容 Mermaid/PlantUML/draw.io/Excalidraw,可 git diff、可换工具 | 格式锁定是 D2/Miro 的通病 | | 无 Chromium · 中文优先 | PNG 用纯 resvg 渲染(与 Glyphic 同款),随处可跑;离线中文关系抽取(P1–P6b 线索)开箱即用 | 头部项目多为英文优先 |

安装与接入

npm install text-to-diagram      # 发布后即可;当前可 git clone 后 npm install
node bin/ttg.js -i graph.json -o graph.svg --html graph.html

作为 MCP 服务接入 Claude / Cursor / CodeBuddy(发布后一行接入):

# 方式 A:npx 零安装(推荐,无需先 npm install,全局缓存一次即可复用)
claude mcp add text-to-diagram -- npx -y text-to-diagram --mcp
# 或 Cursor / Claude Desktop 的 mcp.json:
#   { "mcpServers": { "text-to-diagram": { "command": "npx", "args": ["-y", "text-to-diagram", "--mcp"] } } }

# 方式 B:本地/全局安装后,用绝对路径(调试时用,可直接看源码 bin/ttg.js --mcp)
claude mcp add text-to-diagram -- node /abs/path/to/bin/ttg.js --mcp
# 也可:npm i -g text-to-diagram && claude mcp add text-to-diagram -- text-to-diagram --mcp

暴露五个工具:ttg_validate(校验+机读修复单)、ttg_compile、ttg_compile_auto(按质量评分择优)、ttg_compile_file、ttg_text2json(文本→图,离线/LLM/三元组三通道)。Agent 闭环:产出 JSON → ttg_validate 取 fixList → 改源 → 再校验。

画廊(Gallery)

同一份 IR 多引擎、多格式输出;以下为真实渲染产物(resvg 导出的 PNG,无 Chromium 参与):

| 流程图(dagre) | 因果图(ELK 正交走线) | | --- | --- | | flow | causal | | 人物关系图(ELK) | 诸葛亮主要战争关系(ELK) | | relations | wars |

源 JSON 见 examples/gallery/*.src.json,可对照输入与产物;同目录另有矢量 *.svg。 重新生成:node examples/gallery-gen.js。

目录结构

text-to-diagram/
├── SKILL.md                  # Agent 的系统提示词(Skill 定义,含 frontmatter 可直接挂载)
├── schema/graph.schema.json  # JSON Schema 契约(draft-07,含 groups / link.evidence)
├── src/
│   ├── parse.js              # 容错解析:剥围栏/去尾逗号/修引号/补括号/半截 JSON 恢复
│   ├── repair.js             # 自动修复层:去重 id、非法类型兜底、缺失引用模糊解析、graphKind/evidence 容错
│   ├── validate.js           # ajv 校验 + 净化(剔除 Agent 夹带 x/y)+ 证据溯源 + 修复记录
│   ├── measure.js            # 纯 JS 文本度量(CJK 宽度估算、自动换行、盒子尺寸)
│   ├── layout.js             # dagre 布局 + 手动几何复用 + 自环处理 + 防重叠/超长连线体检
│   ├── layout-elk.js         # ELK 引擎(异步,ORTHOGONAL 正交走线,原生自环)
│   ├── quality.js            # 布局质量评分(交叉/弯折/长度方差/重叠/密度/方向一致)
│   ├── rules.js              # 架构即测试(maxNodes/noOrphan/forbidCycles/requireTypes…)
│   ├── views.js              # 多视图投影(Markdown / 大纲 / 邻接表 / 统计)
│   ├── render-svg.js         # SVG 渲染(6 种节点形状、5 种连线样式、分组框、图例)
│   ├── render-html.js        # 交互式 HTML(缩放/平移/悬停高亮/拖拽导出布局)
│   ├── theme.js              # light/dark 主题与类型图例文案
│   ├── compile.js            # 流水线入口(compile / compileAsync / compileAuto)
│   ├── exporters.js          # 多格式导出注册表
│   ├── export-mermaid.js / export-plantuml.js / export-drawio.js / export-excalidraw.js
│   ├── export-utils.js       # 合法 id 处理、无坐标图的网格兜底
│   ├── export-png.js         # SVG → PNG(@resvg/resvg-js,纯原生、无 Chromium)
│   └── extract.js            # 文本→图抽取:关键内容抽取 + 实体归一 + LLM/离线双通道(含关系线索表)
├── bin/
│   ├── ttg.js                # CLI:JSON → 多格式(stdin/批量/--check-only/--auto/--rules…)
│   ├── text2json.js          # 文本→图 JSON 抽取器(LLM / 离线启发式 / --tuples / --seed 通道)
│   ├── ttg.js                # CLI + MCP 统一入口:`--mcp` 即以 MCP 服务运行
│   ├── ttg-mcp.js            # MCP 服务器实现(stdio JSON-RPC 2.0):validate / compile / compile_auto / compile_file / text2json
│   └── ttg-watch.js          # 目录监听守护:*.json 变更自动重编译为 .svg/.html
├── test/
│   ├── fixtures/             # 测试种子图与规则(graph/graph-dosing/graph-groups/hongloumeng .json + rules.yaml + input-text.txt)
│   ├── smoke-test.js         # 31 项冒烟测试(解析/修复/校验/布局/渲染/多选能力)
│   ├── export-test.js        # 12 项导出测试(4 种格式 + resvg 无 Chromium PNG)
│   ├── mcp-test.js           # 10 项 MCP 服务器测试
│   ├── closure-test.js       # 4 项线条闭合测试(dagre/手工布局端点均落节点边界)
│   ├── extract-test.js       # 15 项抽取测试(三元组/实体归一/离线闭环 + 情感句式/主语回退)
│   ├── repair-test.js        # 4 项容错修复测试(graphKind/evidence≤500/类型兜底)
│   ├── visual-regression.js  # 16 项视觉回归测试(含 hongloumeng,baseline.json 对比)
│   └── baseline.json         # 回归基线快照(首次运行自动生成)
└── docs/improvement-proposal.md  # 改进方案与开源参考调研

快速开始

cd text-to-diagram
npm install

# 编译示例(dagre + SVG + 交互式 HTML)
node bin/ttg.js -i test/fixtures/graph.json -o work/graph.svg --html work/graph.html

# 因果图 + 横向布局 + ELK 正交走线引擎
node bin/ttg.js -i test/fixtures/graph-dosing.json -o work/dosing-elk.svg --engine elk --rankdir LR

# 含分组的图(虚线分组框 + 标签)
node bin/ttg.js -i test/fixtures/graph-groups.json -o work/graph-groups.svg --html work/graph-groups.html

# 多参数择优(按质量评分自动挑选 rankdir / ranksep / nodesep)
node bin/ttg.js -i test/fixtures/graph.json -o work/graph-auto.svg --auto

# 只校验不产出(含自动修复与证据溯源报告)
node bin/ttg.js -i test/fixtures/graph.json --check-only --text test/fixtures/input-text.txt

# 跑测试(88 项:smoke 31 + export 11 + mcp 7 + closure 4 + extract 15 + repair 4 + regression 16)
npm test

标准用法(Agent 流水线)

  1. Agent 侧:把 SKILL.md 挂到 Agent 的 skills 目录(如 CodeBuddy/Claude 的 .codebuddy/skills/text-to-diagram/SKILL.md)。Agent 收到长文本后,按 Skill 规则只输出 JSON。
  2. 本地侧:把 Agent 输出存为 graph.json(或管道传入),执行:
node bin/ttg.js -i graph.json -o graph.svg --html graph.html

也支持 stdin 串联:

node bin/text2json.js -f input.txt | node bin/ttg.js -i - -o out.svg --html out.html

text2json.js 是可选通道:没有 Agent 运行环境时,直接读 SKILL.md 作为 system prompt 调 OpenAI 兼容接口(OPENAI_API_KEY / OPENAI_BASE_URL / OPENAI_MODEL),并内置容错解析。长文本可用 --chunk 分块抽取再做实体对齐合并(见下文「分块抽取」)。

CLI 参数(ttg.js)

| 参数 | 说明 | 默认 | | --- | --- | --- | | -i, --input <file> | 输入 JSON,可多次;- 读 stdin | 必填 | | -o, --output <file> | 输出 SVG | 无则打印到 stdout | | --html <file> | 输出交互式 HTML | 不输出 | | --png <file> | 输出 PNG(@resvg/resvg-js,纯原生、无需 Chromium) | 不输出 | | --json <file> | 输出布局后带坐标的 JSON(调试) | 不输出 | | --mermaid <file> | 导出 Mermaid | 不输出 | | --plantuml <file> | 导出 PlantUML | 不输出 | | --drawio <file> | 导出 draw.io XML | 不输出 | | --excalidraw <file> | 导出 Excalidraw JSON | 不输出 | | --engine dagre\|elk | 布局引擎 | dagre | | --auto | 多组参数择优(按质量评分) | 关 | | --geometry <file> | 复用外部几何坐标(手工布局回写) | 不复用 | | --rules <file> | 规则即测试(.yaml/.json) | 不过滤 | | --text <file> | 原文(用于 evidence 溯源校验) | 不校验 | | --views <file.md> | 输出多视图 Markdown 摘要 | 不输出 | | --rankdir TB\|LR\|BT\|RL | 布局方向 | TB | | --theme light\|dark | 主题 | light | | --font-size <n> | 节点字号 | 14 | | --title <text> | 覆盖标题 | 取 graphMeta.title | | --legend / --no-legend | SVG 内图例 | 开 | | --check-only | 仅校验 + 体检 + 报告 | - | | --strict | 布局/规则/证据问题也判失败 | 关 | | -q, --quiet | 静默,只打印错误 | 关 |

运行结束的退出码:校验失败 / 解析失败 / --strict 下存在布局·规则·证据问题 → 非零;否则为 0,便于接入 CI。

Schema 契约要点

  • 顶层:nodes[] / links[] / graphMeta;失败信号:{"error":"cannot_extract_graph","reason":"..."}(校验器会拦截并转成人话报错)。
  • nodeType:process / decision / entity / role / state / note;linkType:sequence / condition / causal / association / feedback。
  • 分组(groups):{ id, label, members:[nodeId...], kind:"swimlane|cluster|phase" },渲染为虚线包围框 + 标签,画布自动外扩容纳。
  • 证据溯源(link.evidence):可选字符串(≤500 字),应为原文中支撑该关系的片段。若附带 --text,校验器会检查 evidence 是否为原文子串;非子串则记 evidenceIssues(--strict 下判失败),用于反幻觉(GraphRAG 式)。
  • 校验器额外做:id 唯一性、source/target 引用存在性、剔除 Agent 夹带的 x/y/width/height、重复边/孤立节点/自环告警(不阻断)。
  • 布局体检:节点矩形两两求交检测重叠、连线缺路径点、超长连线(>1200px 提示拆图)。

渲染约定

| nodeType | 形状 | linkType | 样式 | | --- | --- | --- | --- | | process | 圆角矩形 | sequence | 蓝色实线箭头 | | decision | 菱形 | condition | 橙色实线箭头 | | entity | 双线矩形 | causal | 绿色实线箭头 | | role | 胶囊形 | association | 灰色虚线、无箭头 | | state | 大圆角矩形 | feedback | 紫色虚线箭头 | | note | 便签(折角) | - | - |

节点 description 不上画面:SVG 里是悬停 <title>,HTML 里是自定义 tooltip,供人复核。groups 渲染为虚线包围框 + 标签芯片,置于节点层之下,永不遮挡图形。

图例与版面(不与图形交叉)

画布被切成三个互不包含的区域:标题区 → 图区 → 图例区,图例永不覆盖图形:

  • SVG:图例是图区下方的独立区块,上方有一条淡分隔线;图例项按可用宽度自动折行,若单行都放不下则自动扩宽整幅画布,绝不裁切。
  • HTML:图例是右侧固定侧栏(--legend-w: 188px),画布 inset 主动让位;窗口宽度 ≤780px 时自动变为底部独立条,画布同样让位。画布内嵌的 SVG 不带图例(避免重复),点「下载 SVG」导出的是带图例的完整版。
  • 自检:compile() 每次都会用图区真实包围盒(节点 + 自环弧 + 连线标签)与图例起点做比较,一旦相交会写入 layoutIssues;配合 --strict 可直接判失败。

七大新增能力

1. 容错解析 + 自动修复(tolerant parse & auto-repair)

Agent 输出常有瑕疵(尾逗号、半截 JSON、重复 id、越界类型)。本地下游不轻易拒绝,而是先救活再上报:

  • src/parse.js:extractJson 先 braceSlice 切出首个 {…}/[…](避免修正常量串时破坏合法 JSON),再依次处理:剥离 ```json 围栏与前后自然语言、去尾逗号、补缺失闭合括号、半截 JSON 恢复。
  • src/repair.js:repairGraph 对"几乎对"的图做透明修复,所有动作写入 repairs 数组,绝不静默:
    • 重复 id → 加 _2 后缀;
    • 非法 nodeType/linkType → 兜底为 process/sequence;
    • label 超过 120 字 → 截断并移入 description;
    • 引用缺失的连线 → 用 Levenshtein 模糊匹配(fuzzyResolve)改指最相似节点,实在无法解析则丢弃;
    • 缺失 label → 用 id 兜底;
    • 清理指向不存在成员的 group.members。

CLI 输出里 ~ 自动修复 N 处:… 会逐条展示,便于审计 Agent 的输出质量。

2. 证据溯源反幻觉(evidence)

link.evidence 用于约束 Agent「有关系必须能指出来源」。配合 --text <原文>:

node bin/ttg.js -i graph.json --check-only --text input.txt

校验器检查每条 evidence 是否为原文子串;非子串记 evidenceIssues,--strict 下判失败。这是把"图是否正确"从玄学变成可验证的第一道防线。

3. 布局质量评分 + --auto 择优

src/quality.js 按图绘制美学(GD 准则)计算 0–100 分:

  • 指标:连线段交叉数(segIntersect)、弯折数、连线长度均值/方差、节点重叠对数、密度、方向一致性(rankdir 一致性)。
  • 得分 = 100 减去各项惩罚;确定性、可回归(无随机)。

--auto 在 TB/LR/BT × ranksep/nodesep 多组参数下各跑一次布局,挑质量分最高者为最终输出,并把最优参数写进 stats._params。复杂图用它一键拿最优版面,无需手调。

4. 双布局引擎(dagre / ELK)

  • dagre(默认、同步):成熟稳定,适合流程/因果图。
  • ELK(--engine elk,异步):layered + ORTHOGONAL 正交走线,拐角更规整,原生支持自环(无需本地兜弧),适合干净的方框连线和泳道。

compile(dagre/手动)同步返回;compileAsync(elk/手动)异步返回;二者最终都归一为同一 laid 结构(节点 x/y/width/height + 连线 points),上层渲染与导出无差别。

5. 分组 / 泳道(groups)

groups[] 把节点圈进虚线框,渲染为包围盒 + 标签芯片,画布自动外扩:

{
  "groups": [
    { "id": "g1", "label": "研发阶段", "members": ["n1","n2"], "kind": "phase" },
    { "id": "g2", "label": "支撑资源", "members": ["n3"], "kind": "cluster" }
  ]
}

见 test/fixtures/graph-groups.json。

6. 架构即测试(rules,architecture-as-test)

用一份声明式规则集对图"体检",可纳入 CI / --rules <file>:

maxNodes: 30
maxLinks: 80
noOrphan: true
requireTypes: [process, decision]
allowedNodeTypes: [process, decision, entity, role, state, note]
requiredKinds: [flowchart]

支持:maxNodes / minNodes / maxLinks / forbidCycles(借 graphMeta.allowCycle 放行)/ forbidSelfLoop / noOrphan / requireTypes / allowedNodeTypes / requiredKinds。违规写入 stats.rules,--strict 下判失败。默认全关,写明才生效。

编写规范体检:判「好不好」,而不是「对不对」

JSON Schema 只判对不对(类型/枚举/引用)。下面这张图 Schema 校验 ok=true、0 问题,却画得很平庸—— 这些只有编写规范能拦:

# schema/authoring-rules.yaml(开箱即用)
maxLabelLength: 16              # label 字数上限,防整句塞进节点
requireDecisionOnBranch: true   # 出度≥2 必须为 decision,防隐式分支
maxOutDegree: 4                 # 单节点扇出上限,防"上帝节点"
requireLinkLabelOn: [condition] # 条件分支必须写明条件,否则等于没画
maxTypeShare: 0.8               # 任一 nodeType 占比上限,防清一色 process
requireEvidenceCoverage: 0.8    # 可选:连线证据覆盖率下限,强制可溯源
node bin/ttg.js -i graph.json -o out.svg --rules schema/authoring-rules.yaml --strict

同一张「合规但平庸」的图,两种检查的差距:

【Schema 校验】  ok=true,0 问题          ← 会直接出图
【编写规范体检】 命中 5 条                 ← 出的是平庸图
  ✗ maxLabelLength          节点 a label 22 字 > 16
  ✗ requireDecisionOnBranch 节点 a 有 2 条出边,应为 decision
  ✗ requireLinkLabelOn      连线 a→b 是 condition 却没写条件
  ✗ requireLinkLabelOn      连线 a→c 是 condition 却没写条件
  ✗ maxTypeShare            process 占比 100% > 80%

完整规范(nodeType/linkType 决策表、反模式对照、产出前自检清单)见 docs/JSON编写规范.md, 并已内置进 SKILL.md——Agent 产出 JSON 时即受其约束。

7. 多视图投影 + 多格式导出

同一份 IR(intermediate representation)可投影出多种形态(Rhizome 式"一源多视图"):

  • 多视图 Markdown(--views out.md):views.js 输出 toMarkdown / toOutline / adjacencyTable / stats 四种摘要——大纲、邻接表、关键统计,便于在文档/IM 里贴。
  • Mermaid(--mermaid out.mmd):graph 开头 + 节点 + 箭头。
  • PlantUML(--plantuml out.puml):@startuml/@enduml。
  • draw.io(--drawio out.xml):mxGraphModel XML,每个节点 id 对应一个 mxCell,可直接拖进 draw.io。
  • Excalidraw(--excalidraw out.excal):每个节点 2 个元素(矩形 + 文本),用确定性 hashSeed 生成(无 Math.random,可复现)。
  • PNG(--png out.png):@resvg/resvg-js 纯原生渲染,无需 Chromium,可在任意 Node 环境/CI/Agent 循环运行。
  • 未布局兜底:导出的图若没有 x/y,export-utils.ensureCoords 用网格自动落位,保证导出不报错。

近期健壮性增强

  • graphKind 容错兜底:repair.js 对不在枚举内的 graphMeta.graphKind(如 mindmap)自动兜底为 flowchart 并记入 repairs,不再因一个未知字段整图打回(见 test/repair-test.js)。
  • evidence 上限放宽至 ≤500 字:schema 同步上调;超限时在 repair.js 中安全截断为原文子串,既保留证据溯源/抗幻觉校验,又不再因长证据整图拒绝。
  • 文本→图抽取增强(src/extract.js):新增 P6 情感句式(A 爱/喜欢/暗恋/倾心/钟情于/迷恋 B → 恋人)、P6b 主语回退("宝玉爱黛玉,也喜欢宝钗"→主语回退为宝玉;"乙也爱丙"→紧邻动词前主语优先),并列连词兼容(与/和/跟/同/、/ 等价)。

手工布局回写(geometry reuse)

HTML 渲染支持拖拽节点微调版面;点「导出布局」下载 geometry.json({ id: {x, y} })。再用 --geometry geometry.json 重新编译:

node bin/ttg.js -i graph.json --geometry geometry.json -o tuned.svg --html tuned.html

编译器会沿用你拖好的坐标,连线改为直线,其余未固定的节点仍可自动布局补齐。适合"先自动、再手调、再定稿"的工作流。

MCP 服务器

bin/ttg.js --mcp(底层 bin/ttg-mcp.js)是 stdio JSON-RPC 2.0 服务器,可被 Agent 运行时/编辑器直接调用:

  • 工具:ttg_validate(只校验,返回 ok/errors/repairs/evidenceIssues + 机读修复单 fixList)、ttg_compile(JSON → SVG/HTML)、ttg_compile_auto(多组参数按质量评分择优)、ttg_compile_file(文件 → 落盘,支持 elk)、ttg_text2json(文本 → 图 JSON)。
  • 启动后向宿主暴露 tools/list,无需改代码即可把"文本→图"能力接入任意 MCP 客户端。
node bin/ttg.js --mcp      # 等价于 node bin/ttg-mcp.js,监听 stdin/stdout 的 JSON-RPC
claude mcp add text-to-diagram -- npx -y text-to-diagram --mcp   # 推荐:零安装接入

在 Claude Code 里用:装完 MCP 还要把协议写进 CLAUDE.md,否则它依旧会直接画 Mermaid。 完整指引见 docs/claude-code.md(含可直接粘贴的 CLAUDE.md 片段、对话示例、常见坑)。

目录监听守护(ttg-watch)

bin/ttg-watch.js 监听目录,任意 *.json 变更后防抖 300ms 自动重编译为 .svg/.html:

node bin/ttg-watch.js ./test/fixtures --output ./work

适合"边写 JSON 边看图"的迭代场景。

分块抽取(text2json --chunk)

超长文本直接丢给模型易丢失结构。text2json.js --chunk 把原文切块分别抽取子图,再用按 label+type 的实体对齐合并为一张图(GraphRAG/KGGen 式实体解析),缓解大输入的信息丢失。

视觉回归(visual-regression)

test/visual-regression.js 对 test/fixtures/*.json 计算质量评分 + 几何快照:

  • 首次运行生成 test/baseline.json;后续运行对比节点/连线数、是否重叠、质量分(±5 容差)、交叉/弯折是否恶化。
  • 改动布局/渲染逻辑后跑 npm run test:regression,能立刻发现"排版悄悄变差"。

依赖

仅四个运行时依赖:ajv(Schema 校验)、dagre(自动布局)、elkjs(ELK 引擎)、js-yaml(规则文件)。渲染层零依赖(手写 SVG 序列化)。Node ≥ 18。

测试(102 项,8 个套件)

npm test                       # 全部 8 套件
npm run test:smoke             # 31 项:解析/修复/校验/布局/渲染/多选能力
npm run test:export            # 12 项:4 种格式导出 + resvg 无 Chromium PNG
npm run test:mcp               # 10 项:MCP 服务器 initialize/ping/tools-list/validate/compile_file/compile_auto/text2json + fixList
npm run test:closure           #  4 项:线条闭合(dagre/手工布局端点均落节点边界)
npm run test:extract           # 15 项:文本→图抽取(三元组/实体归一/离线闭环 + 情感句式)
npm run test:repair            #  4 项:容错修复(graphKind/evidence≤500/类型兜底)
npm run test:rules             # 10 项:编写规范体检(超长 label / 分支未标 decision / 条件未写明 / 类型单一…)
npm run test:regression        # 16 项:visual-regression 基线对比

覆盖:容错解析(半截 JSON、尾逗号、围栏)、自动修复(重复 id/非法类型/缺失引用)、证据子串校验、dagre/ELK 双引擎、分组框、规则即测试、编写规范体检、4 种格式导出、MCP 端到端、视觉回归基线。全量跑通:102/102 通过。

开源参考

  • dagre-js —— 布局核心
  • elkjs —— ELK 正交走线引擎
  • json-diagram-compiler —— 同思路社区实现
  • mermaid —— 对比参考(文本 DSL,非强类型 JSON)
  • BAML Schema-Aligned Parsing —— 容错解析(剥离围栏/半截 JSON 恢复)思路来源
  • Instructor —— 自动修复 / "几近正确即救活"思路来源
  • GraphRAG —— 实体对齐合并、证据溯源反幻觉思路来源
  • 改进方案与调研细节见 docs/improvement-proposal.md。