Summary
Exposes Trident's text-based diagramming language through MCP, letting Claude parse, generate, and manipulate architecture diagrams using a simple 2D DSL. You can ask the assistant to create diagrams with containers, nodes, connections, and annotations, then export them as SVG or PNG. The format is straightforward: declare containers and nodes with coordinates, draw arrows between them, and add labels inline. Useful when you're sketching system architecture or data flows in chat and want actual rendered output instead of ASCII art. The public core includes the parser and read-only renderer, while the full platform at tridentchart.com adds collaboration features.
Keep your Mac awake while Claude Code and 40+ AI agents run. Sleeps when they're idle.
One time payment $9 →
Integrate web data into your AI product. One API to scrape website & brand data.
Get API Key Now →
Agent, run crypto. Access onchain data & trade routes via 1inch.
Install now →
On Capafy, your Skill runs online 24/7 as an agent product, and you get paid every time someone uses it.
Start earning →
Trident — Public
Open-source core of Trident — a text-based diagramming tool.
This repo contains the parser, serializer, and read-only renderer. No auth, no collaboration, no dependencies.
What's here
| File | Purpose |
|---|---|
parser.js | Parses Trident markup text → graphData object |
trident-serializer.js | Serializes graphData → Trident markup text |
renderer-oss.js | Read-only renderer: SVG, PNG, interactive canvas |
spec.md | Full language specification |
example.md | Working diagram examples |
demo.html | Browser demo (open directly, no build step) |
Quick start
<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>
Open demo.html directly in a browser to see it running.
Markup format
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]
See spec.md for the full grammar and example.md for complete working diagrams.
License
MIT
Featured
Keep your Mac awake while Claude Code and 40+ AI agents run. Sleeps when they're idle.
One time payment $9 →Integrate web data into your AI product. One API to scrape website & brand data.
Get API Key Now →Agent, run crypto. Access onchain data & trade routes via 1inch.
Install now →On Capafy, your Skill runs online 24/7 as an agent product, and you get paid every time someone uses it.
Start earning →Configuration
TRIDENT_API_KEYOptional Trident API key for document editing tools. Spec tools work without a key.