Trident

io.github.alexeibespalov由 GitHub 帳號 alexeibespalov 發布v1.0.2更新於 Oct 24, 2026

Create and edit collaborative architecture diagrams with any AI assistant using the Trident 2D DSL.

已驗證Streamable HTTP可網頁執行效率與工作流開發者工具媒體與設計

概覽

AI 產生的概覽

Trident 讓 AI 助理透過文字 DSL 撰寫、驗證與編輯 Trident 2D 架構圖,包含即時協作文件。

可以做什麼
學習 Trident DSL:取得完整規格、產生指南、綜合範例與快速入門指南,並取得產生標記的驗證清單。讀取即時文件:以 Trident 標記開啟文件,取得節點、容器、連線與註解 ID 的結構化 JSON 摘要,並查看近期變更紀錄。編輯圖形實體:新增、更新與刪除節點、容器、連線及文字註解。調整畫布:重新定位或縮放背景圖片。算圖與溝通:將目前文件匯出為 PNG,並向人類協作者發布建議或說明。
適用情境
當你希望助理產生 Trident 圖形標記、檢查正確性,或與人類協作者一起讀取和修改即時 Trident 文件時使用。規格與指南工具即使沒有 API 金鑰,也能用於從零開始產生圖表。
執行需求
可作為遠端端點執行,也可透過 npm 套件 trident-mcp 以 npx 在本機執行(需要 Node.js)。編輯與變更紀錄工具需要有效的編輯存取權杖;選用的 Trident API 金鑰透過環境變數 TRIDENT_API_KEY 提供。規格與指南工具無需金鑰。
安裝前請注意
編輯工具會修改共享的即時文件,其他協作者會立即看到:節點、容器、連線與註解可被新增、更新或刪除,刪除節點會一併移除相關連線。這些操作需要編輯存取權杖與選用 API 金鑰,應視為機密。若希望由人類決定是否修改,優先使用建議工具。

安裝

在 SourceWeft 中

  1. 開啟 儀表板中的 Trident,將其新增到工作區。
  2. 為需要使用其工具的對話啟用該服務。

Web executable,透過 Streamable HTTP。 遠端服務在工作區中設定後即可從網頁執行環境執行。

交給代理程式安裝

把這段提示詞貼上到 Claude Code、Codex、Cursor 等代理程式,或 SourceWeft 對話中。代理程式會讀取該伺服器的安裝指南,先向你展示發布者、端點和登入方式,經你同意後再把它新增到你的客戶端。金鑰不會寫進任何命令。

閱讀 https://sourceweft.com/mcp/io.github.alexeibespalov%2Ftrident/install.md,並按其中說明把這個 MCP 伺服器接入我的客戶端。修改任何設定之前,先告訴我它的發布者、端點和登入方式,等我確認。不要把 API 金鑰寫進命令或我會提交的檔案;問我金鑰應從哪裡取得。

檢視代理程式所依據的安裝指南

其他 MCP 客戶端

把它新增到你客戶端的 mcpServers 設定中。

{
  "mcpServers": {
    "trident": {
      "type": "http",
      "url": "https://mcp.tridentchart.com/mcp"
    }
  }
}

README

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

FilePurpose
parser.jsParses Trident markup text → graphData object
trident-serializer.jsSerializes graphData → Trident markup text
renderer-oss.jsRead-only renderer: SVG, PNG, interactive canvas
spec.mdFull language specification
example.mdWorking diagram examples
demo.htmlBrowser demo (open directly, no build step)

Quick start

html
<script type="module">import { Trident2DParserV2 } from './parser.js';import { renderToSVG, renderToPNG, mountViewer } from './renderer-oss.js';
const parser = new Trident2DParserV2();
const markup = `tridentcontainer 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 stringconst 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

來源:README.md,提交 fc30a29

工具

23

get_trident_spec

Trident Spec

Returns the complete Trident 2D specification including grammar, syntax rules, coordinate system, containers, nodes, connections, shapes, and icon reference. Use this when you need deep understanding of the Trident DSL.

無需輸入參數。

get_generator_guide

Generator Guide

Returns LLM-optimized instructions for generating Trident diagrams, including quick reference, critical rules (especially Y-axis!), spacing guidelines, common patterns, color conventions, and error prevention checklist. Use this before generating Trident markup (a whole diagram as text). Not needed up front in a live session that edits a document with add_node / add_connection — load it there only for domain conventions (BPMN/UML/flowchart layout, ERD, C4).

無需輸入參數。

get_comprehensive_example

Comprehensive Example

Returns a comprehensive Trident example demonstrating all syntax features including containers, nodes (traditional and bracket-style syntax), diamond/rectangle shapes, icons, connections with labels, routing modes, cards, and text annotations. Use this to see all features in action.

無需輸入參數。

validate_trident

Validate Diagram

Returns a comprehensive validation checklist for Trident diagrams covering syntax rules, semantic rules, best practices, and common mistakes to avoid. Use this after generating a diagram to verify correctness.

輸入參數diagram

get_quick_start

Quick Start

Returns a condensed 2-minute quick-start guide with minimal working examples, core syntax reference, and key concepts. Use this for rapid learning when you need to generate simple diagrams quickly.

無需輸入參數。

open_document

Open Document

Opens a live Trident document and returns its full contents as Trident markup DSL — the human-readable text format used to author diagrams. Use this to READ and UNDERSTAND the diagram: its structure, labels, connections, and layout. Do NOT rely on this to enumerate entity IDs for programmatic use — the DSL can be very large and the output may be truncated. To get a complete, structured list of all entity IDs and counts, use get_document_summary instead. Requires a valid access token.

輸入參數token必填agentIduserName

get_document_summary

Document Summary

Returns a complete structured summary of a Trident document as JSON: all node IDs, container IDs, connection IDs, annotation IDs, labels, and entity counts. Use this for PROGRAMMATIC OPERATIONS — it is never truncated regardless of diagram size, so you always get every entity ID. Use this before any bulk update, delete, or enumeration task. To read and understand the diagram as a human-readable diagram, use open_document instead. Requires a valid access token.

輸入參數token必填

get_recent_changes

Recent Changes

Returns the recent change history for a live Trident document. Each entry shows who made the change, what was changed, and when. Useful for understanding what edits have been made by AI agents or human collaborators. Requires a valid access token.

輸入參數limitsincetoken必填

add_node

Add Node

Adds a new node (entity) to a live Trident document. The node appears immediately for all collaborators. Requires a valid editor access token. Before adding nodes: call open_document to understand the diagram layout and pick sensible positions; call get_document_summary to get all existing entity IDs so you can avoid duplicates. IMPORTANT: if this node belongs inside a container, pass node.container on THIS call — do NOT create the node without a container and reparent it later via update_node. Orphaned nodes appear immediately to all live collaborators and create unnecessary visual churn.

輸入參數node必填token必填agentId必填userNameaction_explanation

update_node

Update Node

Updates properties of an existing node in a live Trident document. Only the fields you provide are changed; others are preserved. Use get_document_summary to get all node IDs before calling this. Requires a valid editor access token.

輸入參數token必填nodeId必填agentId必填changes必填userNameaction_explanation

delete_node

Delete Node

Removes a node from a live Trident document. All connections to/from this node are also removed automatically. Use get_document_summary to get all node IDs before calling this. This action is reversible via Ctrl+Z in the Trident editor. Requires a valid editor access token.

輸入參數token必填nodeId必填agentId必填userNameaction_explanation

add_container

Add Container

Adds a new container (group/swimlane) to a live Trident document. Containers visually group related nodes. Use get_document_summary to check existing container IDs before adding to avoid duplicates. Requires a valid editor access token. To build an ERD (entity-relationship diagram), add one container per table with kind:"erd" and an x/y position, then add each field with add_node (container:<table id>, no x/y) — rows are stacked and the table sized automatically — and join TABLES (never rows) with add_connection using an ERD pair type such as "one_to_many".

輸入參數token必填agentId必填userNamecontainer必填action_explanation

update_container

Update Container

Updates properties of an existing container in a live Trident document. Only provided fields are changed. Use get_document_summary to get all container IDs before calling this. Requires a valid editor access token. This is also how you RESIZE a container: set width/height (and x/y to keep it centred over its nodes) — do this whenever you add or move nodes outside a fixed-size container.

輸入參數token必填agentId必填changes必填userNamecontainerId必填action_explanation

delete_container

Delete Container

Removes a container from a live Trident document. By default, nodes inside are detached (kept on the diagram without a container). Pass deleteNodes: true to remove the container's nodes as well. Use get_document_summary to get all container IDs before calling this. Requires a valid editor access token.

輸入參數token必填agentId必填userNamecontainerId必填deleteNodesaction_explanation

add_connection

Add Connection

Adds a connection (arrow/edge) between two nodes or containers in a live Trident document. Use get_document_summary to get valid source and target IDs before calling this. Requires a valid editor access token. For ERD relationships, connect the two TABLE containers (field rows are rejected as endpoints) and set type to an ERD pair such as "one_to_many".

輸入參數token必填agentId必填userNameconnection必填action_explanation

delete_connection

Delete Connection

Removes a connection from a live Trident document. Provide either the connectionId, or both source and target node IDs to find and remove the matching connection. Use get_document_summary to get all connection IDs before calling this. Requires a valid editor access token.

輸入參數token必填sourcetargetagentId必填userNameconnectionIdaction_explanation

get_document_png

Export as PNG

Renders the current state of a live Trident document as a PNG image directly from the Yjs collaborative session — bypassing Firestore, which may be stale. Returns a base64-encoded PNG. Use this to visually verify that diagram edits look correct before or after making changes.

輸入參數token必填

add_annotation

Add Annotation

Adds a text annotation to a live Trident document. Two visual styles: style:stickyNote (default — post-it card with colored background, good for notes/callouts) or style:textBody (plain transparent text, good for diagram titles and section labels). Ideal for architectural notes, decision records, section labels, or TODO markers. Appears immediately for all collaborators. Requires a valid editor access token.

輸入參數token必填agentId必填userNameannotation必填action_explanation

update_annotation

Update Annotation

Updates an existing text annotation in a live Trident document. Only the fields you provide are changed. Use get_document_summary to get all annotation IDs before calling this. Requires a valid editor access token.

輸入參數token必填agentId必填changes必填userNameannotationId必填action_explanation

delete_annotation

Delete Annotation

Removes a text annotation from a live Trident document. Use get_document_summary to get all annotation IDs before calling this. Requires a valid editor access token.

輸入參數token必填agentId必填userNameannotationId必填action_explanation

update_canvas_graphic

Update Canvas Graphic

Repositions or resizes a background image (canvas graphic) in a live Trident document. Use open_document to get the canvas graphic ID and current dimensions — it appears as: image <id> "<url>" at (x, y) width:W height:H. The position at (x, y) is the TOP-LEFT corner. USE THIS BEFORE placing many geographically-positioned nodes: if the background map is small (e.g. width < 700), scale it up so nodes have room to breathe and do not overlap. Requires a valid editor access token.

輸入參數token必填agentId必填changes必填userNamecanvasGraphicId必填action_explanation

make_suggestion

Make Suggestion

Posts a visible suggestion to human collaborators watching the document WITHOUT making any changes to the diagram. Use this when you observe something worth flagging — a potential mistake, an improvement, or a question — but want the human to decide. The suggestion appears as a bold "SUGGESTION:" callout in the UI with a radar pulse animation on your presence dot for 10 seconds. Does NOT mutate the diagram. Requires a valid viewer or editor access token.

輸入參數token必填agentId必填entityIduserName必填suggestion必填

explain

Explain Element

Delivers an explanation payload to human collaborators watching the document, optionally anchored to a specific node or container. Use this when you want to explain what a diagram element represents, why it exists, or how it relates to other parts of the system — without suggesting a change. The explanation appears in the UI attributed to you. Does NOT mutate the diagram. Requires a valid viewer or editor access token. IMPORTANT: this tool automatically pauses (3–15 s, proportional to explanation length) before returning, so the human has time to read. Do NOT add your own artificial delays between explain calls — the pacing is built in.

輸入參數token必填agentId必填entityIduserName必填explanation必填

版本歷史

1
  1. v1.0.2最新Sep 16, 2026

評分

已滿足適用檢查項的 90%

該評分衡量此收錄條目的完整程度,依據註冊中心條目、端點與公開來源計算得出。它不是對伺服器本身的評價,也不表示伺服器安全或目前可用:可連通性是帶日期的檢查結果,評分也不包含安裝量或使用者評價。

  • 近 30 天內可連通必需25 分
  • 已宣告認證方式必需10 分
  • 已列出工具必需15 分
  • 描述必需15 分
  • 圖示10 分
  • 文件15 分
  • 授權條款10 分

    請在儲存庫或註冊中心條目中宣告授權條款。