trident

Trident — Public

Trident 的开源核心——一款基于文本的图表工具。

此仓库包含解析器、序列化器和只读渲染器。不包含身份验证、协作功能或依赖项。

---

此处包含的内容

文件	用途
parser.js	将 Trident 标记文本解析为 graphData 对象
trident-serializer.js	将 graphData 序列化为 Trident 标记文本
renderer-oss.js	只读渲染器：SVG、PNG、交互式画布
spec.md	完整的语言规范
example.md	可运行的图表示例
demo.html	浏览器演示（直接打开，无需构建）

---

快速开始

<script type="module">
import { Trident2DParserV2 } from './parser.js';
import { renderToSVG, renderToPNG, mountViewer } from './renderer-oss.js';

const parser = new Trident2DParserV2();

const markup = `trident
container backend color:#4A90E2 label:"Backend"
node api[API Server] in backend at (150, 100)
node db[Database]   in backend at (350, 100)
api --> |Query| db`;

// SVG string
const svg = await renderToSVG(markup, parser);

// Interactive canvas with zoom + pan (no editing)
await mountViewer(document.getElementById('diagram'), markup, parser);

// PNG blob (2× retina)
const blob = await renderToPNG(markup, parser, { scale: 2 });
</script>

在浏览器中直接打开 demo.html，即可查看运行效果。

---

标记格式

trident

container <id> [color:<hex>] [label:"<text>"] [at (<x>, <y>)]
node <id>(<icon>)[<label>] [in <container>] [at (<x>, <y>)] [color:<hex>]
<source> --> <target>
<source> -->|<label>| <target>
text <id> "<content>" at (<x>, <y>) [style:stickyNote|textBody]

完整语法请参阅 spec.md，可运行的完整图表请参阅 example.md。

---

许可证

MIT