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