Spec Driven Development
MCP Server that facilitates spec-driven development workflows, not just Vibe Coding.
คำอธิบายจากผู้ทำ (ภาษาอังกฤษตามต้นฉบับ)
Generate cloud architecture diagrams, flowcharts, and sequence diagrams.
สามเรื่องนี้ไม่รวมเป็นคะแนนเดียว เพราะความเห็น การวัด และความนิยม เป็นคนละเรื่องกัน
ตัวนี้ยังไม่ได้เรียบเรียงเป็นภาษาไทย ด้านล่างคือข้อเท็จจริงที่เราอ่านจาก registry
เลือกโปรแกรม AI ที่คุณใช้ แล้วคัดลอกค่าตั้งไปวาง
ต้องเตรียมก่อน
คุณใช้แอปไหน
เลือกแอปด้านบน เราจำไว้ให้ ครั้งหน้าปุ่มจะขึ้นว่า “ติดตั้งลง …”
ใช้ได้ทั้ง Claude บนเว็บ แอปคอมพิวเตอร์ และมือถือ:
https://diagrams-mcp-production.up.railway.app/mcpเปิด Claude Desktop → Settings → Developer → Edit Config แล้ววางค่านี้ในไฟล์ claude_desktop_config.json
{
"mcpServers": {
"diagrams": {
"command": "uvx",
"args": [
"diagrams-mcp-server"
]
}
}
}พิมพ์คำสั่งนี้ใน Terminal
claude mcp add --transport http diagrams https://diagrams-mcp-production.up.railway.app/mcpclaude mcp add diagrams -- uvx diagrams-mcp-serverวางในไฟล์ .cursor/mcp.json ของโปรเจกต์ หรือ ~/.cursor/mcp.json
{
"mcpServers": {
"diagrams": {
"url": "https://diagrams-mcp-production.up.railway.app/mcp"
}
}
}วางในไฟล์ .cursor/mcp.json ของโปรเจกต์ หรือ ~/.cursor/mcp.json
{
"mcpServers": {
"diagrams": {
"command": "uvx",
"args": [
"diagrams-mcp-server"
]
}
}
}เบราว์เซอร์จะถามก่อนเปิดแอป จากนั้นแอปแสดงค่าตั้งให้ตรวจแล้วกดยืนยัน ช่อง key เว้นว่างไว้ให้คุณใส่เอง
วางในไฟล์ .vscode/mcp.json ของโปรเจกต์
{
"servers": {
"diagrams": {
"type": "http",
"url": "https://diagrams-mcp-production.up.railway.app/mcp"
}
}
}วางในไฟล์ .vscode/mcp.json ของโปรเจกต์
{
"servers": {
"diagrams": {
"type": "stdio",
"command": "uvx",
"args": [
"diagrams-mcp-server"
]
}
}
}เบราว์เซอร์จะถามก่อนเปิดแอป จากนั้นแอปแสดงค่าตั้งให้ตรวจแล้วกดยืนยัน ช่อง key เว้นว่างไว้ให้คุณใส่เอง
ChatGPT ต่อได้เฉพาะ server ที่อยู่บนอินเทอร์เน็ต:
https://diagrams-mcp-production.up.railway.app/mcpชื่อเมนูอาจต่างกันเล็กน้อยตามแพ็กเกจและรุ่นของแอป
ตัวเลือกเก็บในคุกกี้บนเครื่องนี้ ไม่ต้องมีบัญชี
ค่าตั้งนี้สร้างจากข้อมูลใน registry ของผู้ทำ ถ้าไม่ตรงกับ README ให้เชื่อ README
ยังไม่ได้อ่านรายการเครื่องมือของตัวนี้ เราตรวจ endpoint ทีละชุดวนไป
เราตรวจจากข้อมูลที่ใครก็เปิดดูได้ ยังไม่ได้อ่านโค้ด ข้อที่ไม่เกี่ยวกับตัวนี้ไม่นับในตัวหาร · ตรวจเมื่อ 7 พ.ย. 2569
ผู้ลงทะเบียน (mskry) ไม่ใช่เจ้าของ repo (ByteOverDev) อาจเป็นคนอื่นที่นำมาลงต่อ
ยังไม่ได้อ่านข้อมูล repo จาก GitHub
ยังไม่ได้อ่านข้อมูล repo จาก GitHub
ยังไม่ได้ตรวจ เราตรวจ endpoint ทีละชุดวนไป
ยังไม่ได้ตรวจ เราตรวจ endpoint ทีละชุดวนไป
ยังไม่ได้ตรวจ เราอ่านรายการเครื่องมือตอนตรวจ endpoint
เทียบกับทุก server ที่ยังใช้งานในหมวดนี้ทั้งทะเบียน ดาวนับเฉพาะเมื่อผู้ลงทะเบียนเป็นเจ้าของ repo
จากการตรวจเบื้องต้นของเรา ผ่าน 0 จาก 1 ข้อที่ตรวจได้ เรายังไม่ได้อ่านโค้ด ก่อนใส่กุญแจหรือ token ให้ดูว่า server ขอสิทธิ์อะไร และเลือกกุญแจที่ทำได้เท่าที่จำเป็น
registry ไม่ได้ระบุว่าต้องใช้กุญแจ แต่บางตัวจะขอให้ล็อกอินตอนใช้ครั้งแรก
ได้ทั้งสองแบบ จะลงในเครื่องหรือต่อผ่านคลาวด์ก็ได้
repo บน GitHub มีการแก้โค้ดล่าสุด – และส่งรุ่นล่าสุด (0.1.2) เข้า registry 7 เดือนที่ผ่านมา
โปรแกรมที่รองรับ MCP เช่น Claude Desktop, Claude Code, Cursor และ VS Code ตัวนี้ต่อผ่าน URL จึงใช้กับโปรแกรมที่รับ remote MCP ได้ เช่น ChatGPT ที่เปิดโหมดนักพัฒนา
ในหมวดเดียวกันมี Spec Driven Development, Remote Desktop Commander, OpenTakeoff
server หมวดเดียวกันจากผู้ทำคนอื่น เรียงตามดาว
อ่านการ์ด:★ ดาว GitHubiสามเสา: รีวิว · ผลตรวจ · การใช้งานiอัปเดต = วันที่ส่งรุ่นล่าสุดเข้า registryi
MCP Server that facilitates spec-driven development workflows, not just Vibe Coding.
Remote Desktop Commander: use files, terminal and processes on your own computers from any AI app.
Construction takeoff for AI agents: load plans, set scale, measure, count, export with provenance.
ส่วนนี้คัดจาก repo ของผู้ทำตามต้นฉบับ PopNx MCP ไม่ได้ตรวจหรือรับรองเนื้อหา ตัด HTML รูปภาพ และสคริปต์ออกแล้ว ลิงก์จะพาออกนอกเว็บ
MCP server for generating cloud architecture diagrams, flowcharts, sequence diagrams, and more — powered by three rendering engines: mingrammer/diagrams, Mermaid, and PlantUML.
Graphviz is required for the default local/in-process rendering mode. Mermaid CLI and PlantUML are optional — install them only if you need those specific rendering engines locally.
| Dependency | Required for | Install |
|---|---|---|
| Graphviz | render_diagram (cloud architecture) | brew install graphviz |
| Mermaid CLI | render_mermaid (flowcharts, sequence, etc.) | npm install -g @mermaid-js/mermaid-cli |
| Java + PlantUML | render_plantuml (UML diagrams) | brew install openjdk + download plantuml.jar |
Via uvx (recommended):
uvx diagrams-mcp-server
Via pip:
pip install diagrams-mcp-server
From source:
pip install git+https://github.com/ByteOverDev/diagrams-mcp.git
Claude Desktop
Add to your claude_desktop_config.json (Settings → Developer → Edit Config):
uvx (recommended):
{
"mcpServers": { "diagrams-mcp": { "command": "uvx", "args": ["diagrams-mcp-server"] } } }
pip:
{
"mcpServers": { "diagrams-mcp": { "command": "diagrams-mcp-server" } } }
Claude Code (CLI)
Run:
claude mcp add diagrams-mcp -- uvx diagrams-mcp-server
Or add to your .mcp.json:
uvx (recommended):
{
"mcpServers": { "diagrams-mcp": { "command": "uvx", "args": ["diagrams-mcp-server"] } } }
pip:
{
"mcpServers": { "diagrams-mcp": { "command": "diagrams-mcp-server" } } }
Cursor
Add to your .cursor/mcp.json:
uvx (recommended):
{
"mcpServers": { "diagrams-mcp": { "command": "uvx", "args": ["diagrams-mcp-server"] } } }
pip:
{
"mcpServers": { "diagrams-mcp": { "command": "diagrams-mcp-server" } } }
Windsurf
Add to your ~/.codeium/windsurf/mcp_config.json:
uvx (recommended):
{
"mcpServers": { "diagrams-mcp": { "command": "uvx", "args": ["diagrams-mcp-server"] } } }
pip:
{
"mcpServers": { "diagrams-mcp": { "command": "diagrams-mcp-server" } } }
VS Code
Add to your .vscode/mcp.json:
uvx (recommended):
{
"servers": { "diagrams-mcp": { "type": "stdio", "command": "uvx", "args": ["diagrams-mcp-server"] } } }
pip:
{
"servers": { "diagrams-mcp": { "type": "stdio", "command": "diagrams-mcp-server" } } }
list_providers() → list[str] — List all diagram providers (aws, gcp, k8s, azure, onprem, etc.)list_services(provider) → list[str] — List service categories within a provider (e.g. aws → compute, database, network)list_nodes(provider, service) → list[dict] — List node classes for a provider.service pair with import pathssearch_nodes(query) → list[dict] — Search for nodes by keyword across all providers (e.g. "postgres", "lambda")render_diagram(code) → Image (PNG) — Execute a Python script using mingrammer/diagrams in a sandboxed subprocess. Returns a rendered cloud architecture diagram.render_mermaid(definition) → Image (PNG/SVG) — Render a Mermaid diagram definition (flowcharts, sequence, class, ER, state, Gantt, and more).render_plantuml(definition) → Image (PNG) — Render a PlantUML diagram definition (sequence, class, component, activity, state, deployment).find_equivalent(node, target_provider?) → dict — Find equivalent services across cloud providers (e.g. EC2 → ComputeEngine on GCP).list_categories() → list[dict] — List all 30 infrastructure role categories with mapped nodes across providers.The server provides reference documentation accessible via MCP resource URIs:
| URI | Description |
|---|---|
diagrams://reference/diagram | Diagram constructor parameters, defaults, and usage |
diagrams://reference/edge | Edge operators, labels, styling, and chaining |
diagrams://reference/cluster | Cluster nesting, styling, and graph attributes |
diagrams://reference/mermaid | Mermaid syntax examples for 6 diagram types |
diagrams://reference/plantuml | PlantUML syntax examples for 6 diagram types |
"Draw an AWS architecture with an ALB routing to two ECS services, backed by RDS and ElastiCache"
from diagrams import Diagram, Cluster
from diagrams.aws.network import ALB from diagrams.aws.compute import ECS from diagrams.aws.database import RDS, ElastiCache
with Diagram("ECS Service", direction="LR"): lb = ALB("ALB")
with Cluster("ECS Cluster"): services = [ECS("Web"), ECS("API")]
lb >> services services[0] >> ElastiCache("Cache") services[1] >> RDS("Database")
"Create a flowchart showing a CI/CD pipeline"
"Show the authentication flow between a client, API gateway, and auth service"
@startuml
Client -> "API Gateway": POST /login "API Gateway" -> "Auth Service": Validate credentials "Auth Service" --> "API Gateway": JWT token "API Gateway" --> Client: 200 OK + token Client -> "API Gateway": GET /data (Bearer token) "API Gateway" -> "Auth Service": Verify token "Auth Service" --> "API Gateway": Valid "API Gateway" --> Client: 200 OK + data @enduml
# Clone and install
git clone https://github.com/ByteOverDev/diagrams-mcp.git cd diagrams-mcp pip install -e ".[dev]"
pytest
ruff check . ruff format .
diagrams-mcp-server
For hosted deployments, the MCP server can run as a lightweight facade that delegates render work to a separate renderer service. This keeps the always-on MCP process small while Graphviz, Chromium, Mermaid CLI, Java, and PlantUML live only in the renderer image.
# Terminal 1: renderer service
RENDERER_HOST=0.0.0.0 RENDERER_PORT=8001 diagrams-renderer-server
FASTMCP_TRANSPORT=http \ FASTMCP_HOST=0.0.0.0 \ FASTMCP_PORT=8000 \ DIAGRAMS_RENDERER_MODE=remote \ DIAGRAMS_RENDERER_URL=http://127.0.0.1:8001 \ diagrams-mcp-server
Docker/Railway examples are included:
| File | Purpose |
|---|---|
Dockerfile.facade | Slim MCP facade image without renderer-only binaries |
Dockerfile.renderer | Renderer image with Graphviz, Chromium, Mermaid CLI, Java, and PlantUML |
railway.facade.toml | Example Railway facade service config |
railway.renderer.toml | Example Railway renderer service config |
Key environment variables:
| Variable | Purpose |
|---|---|
DIAGRAMS_RENDERER_MODE=remote | Makes the facade use the HTTP renderer service |
DIAGRAMS_RENDERER_URL | Renderer base URL, for example http://diagrams-renderer.railway.internal:8080 |
DIAGRAMS_IMAGE_STORE_DIR | Optional file-backed temporary image store directory |
BASE_URL | Optional public base URL used when returning absolute download links |
The render_diagram tool supports all providers from the mingrammer/diagrams library, including:
AWS, GCP, Azure, Kubernetes, On-Premise, AlibabaCloud, OCI, OpenStack, DigitalOcean, Elastic, Outscale, Generic, and Custom nodes.
Use list_providers() and search_nodes(query) to discover available nodes.
MIT