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.
Fastest browser for AI agents to run web automation tasks, always free.
Download Free life-time →
belt cli automatically finds the best tools and skills for your agent. image, video, music, tts...
one prompt install →
Free an open-source skills that make AI coding agents easier to understand, verify, and control.
Download for free →
Connect your Claude agent to live crypto prices and trading routes via 1inch
Get the MCP →
Notes, actions and memory. Without a meeting bot. First month 100% off.
Download for free →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
Fastest browser for AI agents to run web automation tasks, always free.
Download Free life-time →belt cli automatically finds the best tools and skills for your agent. image, video, music, tts...
one prompt install →Free an open-source skills that make AI coding agents easier to understand, verify, and control.
Download for free →Connect your Claude agent to live crypto prices and trading routes via 1inch
Get the MCP →Notes, actions and memory. Without a meeting bot. First month 100% off.
Download for free →Configuration
TRIDENT_API_KEYOptional Trident API key for document editing tools. Spec tools work without a key.