ต้นแบบ · รุ่นทดลอง: มีทุก server ในทะเบียนทางการ อัปเดตทุก 30 นาที เข้าสู่ระบบด้วย Google เพื่อเขียนรีวิวได้แล้ว
PopNx MCPที่รวม MCP สำหรับคนใช้ AI · อธิบายเป็นภาษาคน

Diagrams MCP Server

โดย mohammad-emad-devรุ่น 0.11.0i★ 1iรันบนเครื่อง
ชื่อใน registryio.github.mohammad-emad-dev/diagrams-mcp-server

วิธีติดตั้ง

ภาพรวม

คำอธิบายจากผู้ทำ (ภาษาอังกฤษตามต้นฉบับ)

Local-first MCP server for PlantUML and Mermaid diagrams with drift detection.

ใช้ทำอะไรได้

ตัวนี้ยังไม่ได้เรียบเรียงเป็นภาษาไทย ด้านล่างคือข้อเท็จจริงที่เราอ่านจาก registry

  • การเชื่อมต่อ: รันบนเครื่อง
  • ช่องทาง (transport): stdio
  • หมวด: ออกแบบ ภาพ และเสียง

ติดตั้ง

เลือกโปรแกรม AI ที่คุณใช้ แล้วคัดลอกค่าตั้งไปวาง

ผลตรวจผ่าน 2/2 · ทำงานบนเครื่องคุณ

ขั้นแรก: คุณใช้ AI ตัวไหน

เลือกแอปที่คุณใช้ ขั้นตอนจะขึ้นด้านล่าง

ต่อกับ Claude ได้ แต่ต้องเตรียมก่อน

ต้องมีคีย์ของ Diagrams MCP Server (สมัครที่เว็บของผู้ทำ อาจมีค่าใช้จ่าย) · ต้องลง Node.js ในเครื่องก่อน (ทำครั้งเดียว) · ใช้ได้เฉพาะแอป Claude บนคอม (Windows หรือ Mac) ไม่ใช่บนเว็บหรือมือถือ

  1. ลง Node.js ในเครื่อง

    ทำครั้งเดียว ใช้ได้กับทุกตัวที่ต้องใช้ Node.js

    เปิดหน้าดาวน์โหลด Node.js ↗

  2. สมัครและสร้างคีย์ของ Diagrams MCP Server

    เปิดเว็บของผู้ทำ สมัครบัญชีแล้วสร้างคีย์ (API key) เก็บไว้ ใช้ในขั้นถัดไป อาจมีค่าใช้จ่าย

    เปิดเว็บของ Diagrams MCP Server ↗

  3. เปิดไฟล์ตั้งค่าของแอป Claude บนคอม

    SettingsDeveloperEdit Config

  4. วางค่าตั้งนี้แล้วบันทึกไฟล์

    {
      "mcpServers": {
        "diagrams": {
          "command": "npx",
          "args": [
            "-y",
            "diagrams-mcp-server"
          ],
          "env": {
            "PROJECT_ROOT": "ใส่ค่าของคุณ",
            "DIAGRAMS_DIR": "ใส่ค่าของคุณ",
            "PLANTUML_SERVER_URL": "ใส่ค่าของคุณ",
            "ALLOW_REMOTE_PLANTUML": "ใส่ค่าของคุณ",
            "DISABLE_REMOTE_PLANTUML": "ใส่ค่าของคุณ"
          }
        }
      }
    }

    วางคีย์ในช่องของแอปเท่านั้น อย่าวางในแชตหรือส่งให้ใคร

  5. ปิดแอป Claude แล้วเปิดใหม่

  6. ลองเลย

    ใช้ Diagrams MCP Server บอกหน่อยว่าทำอะไรให้ฉันได้บ้าง แล้วลองทำให้ดูหนึ่งอย่าง

    ✓ ถ้า Claude บอกว่ากำลังใช้ Diagrams MCP Server หรือมีชื่อเครื่องมือของ Diagrams MCP Server ขึ้นในคำตอบ แปลว่าต่อสำเร็จ

ชื่อเมนูตรวจกับหน้าช่วยเหลือของ Anthropic เมื่อ 11 พ.ย. 2569 · หน้าจอของคุณอาจต่างเล็กน้อยตามรุ่นของแอป

ChatGPT ยังต่อ Diagrams MCP Server ไม่ได้

Diagrams MCP Server ต้องติดตั้งในเครื่องคุณ แต่ ChatGPT ต่อได้เฉพาะตัวที่ทำงานบนเว็บ

คุณทำแบบนี้แทนได้

ก · ใช้แอปที่ต่อ Diagrams MCP Server ได้

  • ต้องมีคีย์ของ Diagrams MCP Server (สมัครที่เว็บของผู้ทำ อาจมีค่าใช้จ่าย) · ต้องลง Node.js ในเครื่องก่อน (ทำครั้งเดียว) · ใช้ได้เฉพาะแอป Claude บนคอม (Windows หรือ Mac) ไม่ใช่บนเว็บหรือมือถือ
  • ต้องมีคีย์ของ Diagrams MCP Server (สมัครที่เว็บของผู้ทำ อาจมีค่าใช้จ่าย) · ต้องลง Node.js ในเครื่องก่อน (ทำครั้งเดียว)
  • ต้องมีคีย์ของ Diagrams MCP Server (สมัครที่เว็บของผู้ทำ อาจมีค่าใช้จ่าย) · ต้องลง Node.js ในเครื่องก่อน (ทำครั้งเดียว)
  • ต้องมีคีย์ของ Diagrams MCP Server (สมัครที่เว็บของผู้ทำ อาจมีค่าใช้จ่าย) · ต้องลง Node.js ในเครื่องก่อน (ทำครั้งเดียว)

ข · ตัวอื่นในหมวด ออกแบบ ภาพ และเสียง ที่ต่อกับ ChatGPT ได้

เลือกจากตัวที่ใช้มากในหมวดเดียวกัน เฉพาะตัวที่ต่อด้วยที่อยู่ได้โดยไม่ต้องใส่คีย์

ต่อกับ Claude Code ได้ แต่ต้องเตรียมก่อน

ต้องมีคีย์ของ Diagrams MCP Server (สมัครที่เว็บของผู้ทำ อาจมีค่าใช้จ่าย) · ต้องลง Node.js ในเครื่องก่อน (ทำครั้งเดียว)

  1. ลง Node.js ในเครื่อง

    ทำครั้งเดียว ใช้ได้กับทุกตัวที่ต้องใช้ Node.js

    เปิดหน้าดาวน์โหลด Node.js ↗

  2. สมัครและสร้างคีย์ของ Diagrams MCP Server

    เปิดเว็บของผู้ทำ สมัครบัญชีแล้วสร้างคีย์ (API key) เก็บไว้ ใช้ในขั้นถัดไป อาจมีค่าใช้จ่าย

    เปิดเว็บของ Diagrams MCP Server ↗

  3. เปิด Terminal

    Mac: กด Command+Space พิมพ์ Terminal · Windows: เปิด PowerShell

  4. วางคำสั่งนี้แล้วกด Enter

    claude mcp add diagrams --env PROJECT_ROOT='ใส่ค่าของคุณ' --env DIAGRAMS_DIR='ใส่ค่าของคุณ' --env PLANTUML_SERVER_URL='ใส่ค่าของคุณ' --env ALLOW_REMOTE_PLANTUML='ใส่ค่าของคุณ' --env DISABLE_REMOTE_PLANTUML='ใส่ค่าของคุณ' -- npx -y diagrams-mcp-server

    แก้ “ใส่ค่าของคุณ” เป็นคีย์ของคุณก่อนกด Enter

    วางคีย์ในช่องของแอปเท่านั้น อย่าวางในแชตหรือส่งให้ใคร

  5. พิมพ์ /mcp ใน Claude Code

    ต้องเห็น Diagrams MCP Server ในรายการและขึ้นว่าเชื่อมต่อแล้ว

  6. ลองเลย

    ใช้ Diagrams MCP Server บอกหน่อยว่าทำอะไรให้ฉันได้บ้าง แล้วลองทำให้ดูหนึ่งอย่าง

    ✓ ถ้า Claude Code บอกว่ากำลังใช้ Diagrams MCP Server หรือมีชื่อเครื่องมือของ Diagrams MCP Server ขึ้นในคำตอบ แปลว่าต่อสำเร็จ

ชื่อเมนูตรวจกับหน้าช่วยเหลือของ Anthropic เมื่อ 11 พ.ย. 2569 · หน้าจอของคุณอาจต่างเล็กน้อยตามรุ่นของแอป

ต่อกับ Cursor ได้ แต่ต้องเตรียมก่อน

ต้องมีคีย์ของ Diagrams MCP Server (สมัครที่เว็บของผู้ทำ อาจมีค่าใช้จ่าย) · ต้องลง Node.js ในเครื่องก่อน (ทำครั้งเดียว)

  1. ลง Node.js ในเครื่อง

    ทำครั้งเดียว ใช้ได้กับทุกตัวที่ต้องใช้ Node.js

    เปิดหน้าดาวน์โหลด Node.js ↗

  2. สมัครและสร้างคีย์ของ Diagrams MCP Server

    เปิดเว็บของผู้ทำ สมัครบัญชีแล้วสร้างคีย์ (API key) เก็บไว้ ใช้ในขั้นถัดไป อาจมีค่าใช้จ่าย

    เปิดเว็บของ Diagrams MCP Server ↗

  3. กดปุ่มนี้เพื่อเปิด Cursor

    เปิดใน Cursor

    Cursor จะถามยืนยันการติดตั้ง ให้กด Install

  4. ใส่คีย์ในช่องที่ว่างไว้

    ในค่าตั้งของ Diagrams MCP Server ช่อง PROJECT_ROOT, DIAGRAMS_DIR, PLANTUML_SERVER_URL, ALLOW_REMOTE_PLANTUML, DISABLE_REMOTE_PLANTUML ยังว่าง ใส่คีย์ของคุณแล้วบันทึก

    วางคีย์ในช่องของแอปเท่านั้น อย่าวางในแชตหรือส่งให้ใคร

  5. เปิดแชตของ AI ใน Cursor โหมด Agent

  6. ลองเลย

    ใช้ Diagrams MCP Server บอกหน่อยว่าทำอะไรให้ฉันได้บ้าง แล้วลองทำให้ดูหนึ่งอย่าง

    ✓ ถ้า Cursor บอกว่ากำลังใช้ Diagrams MCP Server หรือมีชื่อเครื่องมือของ Diagrams MCP Server ขึ้นในคำตอบ แปลว่าต่อสำเร็จ

ชื่อเมนูตรวจกับหน้าช่วยเหลือของ Cursor เมื่อ 11 พ.ย. 2569 · หน้าจอของคุณอาจต่างเล็กน้อยตามรุ่นของแอป

ต่อกับ VS Code ได้ แต่ต้องเตรียมก่อน

ต้องมีคีย์ของ Diagrams MCP Server (สมัครที่เว็บของผู้ทำ อาจมีค่าใช้จ่าย) · ต้องลง Node.js ในเครื่องก่อน (ทำครั้งเดียว)

  1. ลง Node.js ในเครื่อง

    ทำครั้งเดียว ใช้ได้กับทุกตัวที่ต้องใช้ Node.js

    เปิดหน้าดาวน์โหลด Node.js ↗

  2. สมัครและสร้างคีย์ของ Diagrams MCP Server

    เปิดเว็บของผู้ทำ สมัครบัญชีแล้วสร้างคีย์ (API key) เก็บไว้ ใช้ในขั้นถัดไป อาจมีค่าใช้จ่าย

    เปิดเว็บของ Diagrams MCP Server ↗

  3. กดปุ่มนี้เพื่อเปิด VS Code

    เปิดใน VS Code

    VS Code จะถามยืนยันการติดตั้ง ให้กด Install

  4. ใส่คีย์ในช่องที่ว่างไว้

    ในค่าตั้งของ Diagrams MCP Server ช่อง PROJECT_ROOT, DIAGRAMS_DIR, PLANTUML_SERVER_URL, ALLOW_REMOTE_PLANTUML, DISABLE_REMOTE_PLANTUML ยังว่าง ใส่คีย์ของคุณแล้วบันทึก

    วางคีย์ในช่องของแอปเท่านั้น อย่าวางในแชตหรือส่งให้ใคร

  5. เปิดแชตของ AI ใน VS Code โหมด Agent

  6. ลองเลย

    ใช้ Diagrams MCP Server บอกหน่อยว่าทำอะไรให้ฉันได้บ้าง แล้วลองทำให้ดูหนึ่งอย่าง

    ✓ ถ้า VS Code บอกว่ากำลังใช้ Diagrams MCP Server หรือมีชื่อเครื่องมือของ Diagrams MCP Server ขึ้นในคำตอบ แปลว่าต่อสำเร็จ

ชื่อเมนูตรวจกับหน้าช่วยเหลือของ VS Code เมื่อ 11 พ.ย. 2569 · หน้าจอของคุณอาจต่างเล็กน้อยตามรุ่นของแอป

โปรแกรมอื่นที่ใช้ MCP ได้ เช่น Windsurf, Zed หรือ Gemini CLI มีวิธีเพิ่มต่างกัน ดูวิธีของแต่ละตัวในหน้ารวมโปรแกรม

ดูโปรแกรมที่ใช้ MCP ทั้งหมด →

ค่าตั้งแบบไฟล์ JSON อยู่ในหัวข้อ “สำหรับคนเขียนโค้ด” ด้านล่าง

ติดตรงไหน? ถามคนที่ใช้ Diagrams MCP Server อยู่💬 พูดคุย →
สำหรับคนเขียนโค้ด: คำสั่ง Terminal และค่าตั้ง JSON

ติดตั้งในเครื่อง

Claude Code

claude mcp add diagrams --env PROJECT_ROOT='ใส่ค่าของคุณ' --env DIAGRAMS_DIR='ใส่ค่าของคุณ' --env PLANTUML_SERVER_URL='ใส่ค่าของคุณ' --env ALLOW_REMOTE_PLANTUML='ใส่ค่าของคุณ' --env DISABLE_REMOTE_PLANTUML='ใส่ค่าของคุณ' -- npx -y diagrams-mcp-server

Claude Desktop (claude_desktop_config.json)

{
  "mcpServers": {
    "diagrams": {
      "command": "npx",
      "args": [
        "-y",
        "diagrams-mcp-server"
      ],
      "env": {
        "PROJECT_ROOT": "ใส่ค่าของคุณ",
        "DIAGRAMS_DIR": "ใส่ค่าของคุณ",
        "PLANTUML_SERVER_URL": "ใส่ค่าของคุณ",
        "ALLOW_REMOTE_PLANTUML": "ใส่ค่าของคุณ",
        "DISABLE_REMOTE_PLANTUML": "ใส่ค่าของคุณ"
      }
    }
  }
}

Cursor (~/.cursor/mcp.json)

{
  "mcpServers": {
    "diagrams": {
      "command": "npx",
      "args": [
        "-y",
        "diagrams-mcp-server"
      ],
      "env": {
        "PROJECT_ROOT": "ใส่ค่าของคุณ",
        "DIAGRAMS_DIR": "ใส่ค่าของคุณ",
        "PLANTUML_SERVER_URL": "ใส่ค่าของคุณ",
        "ALLOW_REMOTE_PLANTUML": "ใส่ค่าของคุณ",
        "DISABLE_REMOTE_PLANTUML": "ใส่ค่าของคุณ"
      }
    }
  }
}

VS Code (mcp.json)

{
  "servers": {
    "diagrams": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "-y",
        "diagrams-mcp-server"
      ],
      "env": {
        "PROJECT_ROOT": "ใส่ค่าของคุณ",
        "DIAGRAMS_DIR": "ใส่ค่าของคุณ",
        "PLANTUML_SERVER_URL": "ใส่ค่าของคุณ",
        "ALLOW_REMOTE_PLANTUML": "ใส่ค่าของคุณ",
        "DISABLE_REMOTE_PLANTUML": "ใส่ค่าของคุณ"
      }
    }
  }
}

ค่าที่ต้องใส่เอง

  • PROJECT_ROOT env
    Project root to attach to (defaults to the working directory).
  • DIAGRAMS_DIR env
    Diagrams directory, relative to PROJECT_ROOT unless absolute (default: diagrams).
  • PLANTUML_SERVER_URL env
    Override for the opt-in remote PlantUML fallback.
  • ALLOW_REMOTE_PLANTUML env
    Set to true to allow the remote PlantUML fallback when no local CLI is installed.
  • DISABLE_REMOTE_PLANTUML env
    Set to true to always disable the remote PlantUML fallback.

ค่าตั้งนี้สร้างจากข้อมูลใน registry ของผู้ทำ ถ้าไม่ตรงกับ README ให้เชื่อ README

สรุป

ดาวน์โหลดต่อสัปดาห์i
86/สัปดาห์
licensei
ไม่ระบุ license
การเชื่อมต่อ
รันบนเครื่อง
รุ่นล่าสุดi
0.11.0
ส่งเข้า registryi
19 ต.ค. 2569
แก้โค้ดล่าสุดi
19 ต.ค. 2569
ผู้ทำ
mohammad-emad-dev
แพ็กเกจ
npm: diagrams-mcp-server
เว็บผู้ทำ
github.com
สถานะใน registry
ใช้งานอยู่

ใช้กับโปรแกรมไหนได้

ดูจากแบบการต่อของ server ตัวนี้ และเอกสารของผู้ทำโปรแกรมแต่ละตัว ตรวจเมื่อ 10 พ.ย. 2569

ติดตั้งบนเครื่องได้ใน

ClaudeGooseLM StudioMsty StudioCherry StudioCursorVS Code + GitHub CopilotVisual StudioWindsurf (Devin Desktop)ZedKiroClineContinueJetBrains AI AssistantClaude CodeCodex CLIGemini CLIOpenCodenodecodeWarpLibreChatRaycast

ดูโปรแกรมทั้งหมดพร้อมข้อดีข้อเสีย →

คู่มือที่เกี่ยวข้อง

ทำอะไรได้บ้าง

รันในเครื่องคุณ รายการเครื่องมือจะขึ้นในแอป AI หลังติดตั้ง

ผลตรวจเบื้องต้นi

เราตรวจจากข้อมูลที่ใครก็เปิดดูได้ ยังไม่ได้อ่านโค้ด ข้อที่ไม่เกี่ยวกับตัวนี้ไม่นับในตัวหาร · ตรวจเมื่อ 12 พ.ย. 2569

  • ✓ ผ่าน

    ตัวตนผู้ทำตรงกับ repo

    ชื่อใน registry ยืนยันด้วยบัญชี GitHub mohammad-emad-dev ซึ่งเป็นเจ้าของ repo

  • ✓ ผ่าน

    ยังมีคนดูแล

    มีการแก้โค้ดล่าสุด 23 วันที่ผ่านมา

  • … ยังไม่ตรวจ

    มีสัญญาอนุญาต (license)

    ยังไม่ได้อ่านข้อมูล repo จาก GitHub

  • – ไม่เกี่ยว

    endpoint ตอบ

    ตัวนี้รันบนเครื่องคุณ ไม่มี endpoint บนอินเทอร์เน็ต

  • – ไม่เกี่ยว

    ล็อกอินแบบ OAuth

    ตัวนี้รันบนเครื่อง ใช้ค่าที่ตั้งในเครื่องแทน

  • … ยังไม่ตรวจ

    คำอธิบายเครื่องมือไม่มีคำสั่งแอบแฝง

    รันในเครื่องคุณ เราอ่านรายการเครื่องมือได้เฉพาะตัวที่มี endpoint บนอินเทอร์เน็ต

พูดคุย

ถาม แชร์เคล็ดลับ หรือแจ้งว่าใช้ไม่ได้ เรียงตามที่คนกดว่ามีประโยชน์

ยังไม่มีใครโพสต์ ถามหรือแชร์เป็นคนแรกได้เลย

ข้อความในส่วนนี้เขียนโดยผู้ใช้ ไม่ใช่ทีม PopNx

เข้าสู่ระบบด้วย Google เพื่อโพสต์

รีวิวจากผู้ใช้

ยังไม่มีรีวิว

เข้าสู่ระบบด้วย Google เพื่อเขียนรีวิว

เทียบกับตัวอื่นในหมวด ออกแบบ ภาพ และเสียงi

  • ดาวมากกว่า 77% ของอีก 2936 ตัวในหมวดนี้
  • ส่งรุ่นใหม่เข้า registry ล่าสุดกว่า 58% ของอีก 2936 ตัวในหมวดนี้
  • ผลตรวจเบื้องต้นดีกว่าหรือเท่ากับ 100% ของอีก 2936 ตัวในหมวดนี้

เทียบกับทุก server ที่ยังใช้งานในหมวดนี้ทั้งทะเบียน ดาวนับเฉพาะเมื่อผู้ลงทะเบียนเป็นเจ้าของ repo

คำถามที่พบบ่อย

Diagrams MCP Server ปลอดภัยไหม?

จากการตรวจเบื้องต้นของเรา ผ่าน 2 จาก 2 ข้อที่ตรวจได้ เรายังไม่ได้อ่านโค้ด ก่อนใส่กุญแจหรือ token ให้ดูว่า server ขอสิทธิ์อะไร และเลือกกุญแจที่ทำได้เท่าที่จำเป็น

ต้องใช้กุญแจหรือรหัสอะไรบ้าง?

registry ไม่ได้ระบุว่าต้องใช้กุญแจ แต่บางตัวจะขอให้ล็อกอินตอนใช้ครั้งแรก

ตัวนี้รันบนเครื่องหรือบนคลาวด์?

รันบนเครื่องของคุณ โปรแกรม AI จะเปิด server ขึ้นมาเองเมื่อใช้ ข้อมูลไม่ต้องผ่านเซิร์ฟเวอร์ของผู้ทำ (ยกเว้นตัวที่ไปเรียกบริการออนไลน์ต่อ)

ยังมีคนดูแลอยู่ไหม?

repo บน GitHub มีการแก้โค้ดล่าสุด 23 วันที่ผ่านมา และส่งรุ่นล่าสุด (0.11.0) เข้า registry 23 วันที่ผ่านมา

ใช้กับโปรแกรมไหนได้บ้าง?

โปรแกรมที่รองรับ MCP เช่น Claude Desktop, Claude Code, Cursor และ VS Code ตัวนี้ต้องมี Node.js ในเครื่องด้วย

มีตัวไหนใช้แทนได้บ้าง?

ในหมวดเดียวกันมี Next AI Draw.io, Pascal 3D Editor, screenpipe

ตัวที่ใช้แทนได้

server หมวดเดียวกันจากผู้ทำคนอื่น เรียงตามดาว

อ่านการ์ด:↓ ดาวน์โหลดต่อสัปดาห์i★ ดาว GitHubiสามเสา: รีวิว · ผลตรวจ · การใช้งานiอัปเดต = วันที่ส่งรุ่นล่าสุดเข้า registryi

Next AI Draw.io

draw.io diagrams your AI agent draws on a live browser canvas that you can also edit by hand

โดย DayuanJiangใช้กันมาก↓ 21.7K/สัปดาห์★ 36.9Kอัปเดต 5 วันที่ผ่านมา

รันบนเครื่อง

Pascal 3D Editor

สร้าง ตรวจ และบันทึกฉากอาคาร 3 มิติที่แก้ไขได้ ด้วย Pascal

โดย pascalorgใช้กันมาก↓ 1K/สัปดาห์★ 25.4Kอัปเดต วันนี้

บนเครื่องหรือคลาวด์✓ pascal.app

screenpipe

Search your local screen recordings, audio transcripts, and computer activity from screenpipe.

โดย screenpipeใช้กันมาก↓ 6.6K/สัปดาห์★ 22.3Kอัปเดต 9 วันที่ผ่านมา

รันบนเครื่อง

README จากผู้ทำ

เปิดอ่าน README

ส่วนนี้คัดจาก repo ของผู้ทำตามต้นฉบับ PopNx MCP ไม่ได้ตรวจหรือรับรองเนื้อหา ตัด HTML รูปภาพ และสคริปต์ออกแล้ว ลิงก์จะพาออกนอกเว็บ

DIAGRAMS MCP SERVER ===================

Engineering documentation for a local first MCP server that keeps PlantUML and Mermaid diagrams beside the code they describe

The server gives an MCP client a controlled interface for reading and maintaining diagram source and for comparing that source with a codebase It also produces reviewable diagram drafts and rendered exports Source files remain the editable record of the architecture

READING PATHS =============

Start with installation and the diagram workflow to connect a client and review changes Choose your editor or assistant from the supported clients Read the system model and configuration to understand process boundaries and renderer requirements Use tool contracts and operational limits when integrating or troubleshooting For contribution work follow source organization and the engineering documentation index The index separates current guidance from historical design and handoff records

PROJECT STATUS ==============

The project is a technical preview Version zero eleven zero contains fifteen tools Check the installed package version when comparing its behavior with this guide

Version zero ten zero adds nullable and array scaffold labels and corrects sequence sender ownership when caller names collide across files

The package declares Node 18 or newer as its runtime requirement Current main continuous integration checks Node 20 and Node 22 and Node 24 on Ubuntu and Windows The TypeScript compiler is a development dependency rather than a required production dependency

INSTALLATION AND CLIENT CONNECTION ==================================

Install the published server with npm:

npm install -g diagrams-mcp-server

Run guided setup from the project directory:

diagrams-mcp-server setup

Supported MCP clients


Choose a client below for noninteractive setup Install the selected client before using its integration The table describes the setup methods implemented by this server

ClientSetup commandSetup behavior
Claude Codediagrams-mcp-server setup --client claude-code --yesRuns claude mcp add or prints the command if registration cannot run
Codexdiagrams-mcp-server setup --client codex --yesRuns codex mcp add or prints the command if registration cannot run
Cursordiagrams-mcp-server setup --client cursor --yesWrites the diagrams entry to Cursor configuration
VS Codediagrams-mcp-server setup --client vscode --yesWrites the diagrams entry to workspace configuration
OpenCodediagrams-mcp-server setup --client opencode --yesPrints instructions for opencode mcp add requiring a manual step
Antigravitydiagrams-mcp-server setup --client antigravity --yesWrites the diagrams entry to Antigravity configuration

Project scope and verification


For a Cursor configuration pinned to the current project:

diagrams-mcp-server setup --client cursor --scope project --yes

Global scope is the default and leaves PROJECT_ROOT out of the server entry The server then uses the working directory supplied by the launching client Project scope places PROJECT_ROOT in the configuration so the server stays attached to one codebase An explicit --project-root also pins the root VS Code setup writes project configuration OpenCode setup prints instructions only so configure its project environment manually when a fixed PROJECT_ROOT is required

After setup reload the client configuration and inspect its available tools Use diagrams_list to confirm the diagrams root before creating files An empty inventory is valid for a new project

Other stdio MCP clients can launch diagrams-mcp-server directly or use npx with arguments -y diagrams-mcp-server The server command accepts no tool requests through ordinary CLI arguments Tool calls travel through the MCP connection

For available startup and setup options:

diagrams-mcp-server --help diagrams-mcp-server setup --help

WORKING WITH DIAGRAMS =====================

Start by discovering existing diagrams with diagrams_list Read the selected source with diagrams_get before proposing a change Use diagrams_diff to compare the existing source with a proposed revision Then apply the reviewed revision through diagrams_update Use diagrams_create for a new diagram and diagrams_delete for explicit removal

Create refuses an existing target Update operates on an existing diagram Storage validates recognized diagram extensions and source structure These checks establish basic dialect shape rather than full language correctness Use rendering and human review to inspect the resulting diagram

For a new architecture draft use diagrams_generate on a narrow code scope For a call flow draft use diagrams_generate_sequence For a blank design use diagrams_template These tools return source for review without saving a diagram Pass reviewed source to diagrams_create when you decide to persist it

Run diagrams_check_consistency after a code change to inspect declaration evidence for diagram entities Treat unmatched names as review prompts An unmatched name can reflect unsupported syntax or incomplete scanning rather than an architectural defect

This workflow connects the tools through explicit review steps The arrows describe a suggested user workflow rather than an automatic pipeline Generation and comparison do not save files on your behalf

flowchart TB

accTitle: Diagram review workflow accDescr: Read or draft source then review and compare before explicitly saving and rendering and checking consistency stored["Read existing diagram source"] --> review["Review source"] draft["Generate or template a draft"] --> review review --> compare["Compare revisions when needed"] compare --> save["Explicit create or update"] save --> render["Render and inspect"] render --> check["Check consistency against code"] check -->|Revise when needed| review

SYSTEM MODEL ============

An MCP client starts the server as a child process and exchanges protocol messages over standard input and standard output Startup diagnostics use standard error so they do not occupy the protocol stream

The project root defines the code analysis boundary The diagrams root defines the diagram storage boundary Custom template definitions are read separately beneath the project root These roots are resolved once when the server starts Diagram paths supplied to tools are relative to the diagrams root Code scopes supplied to analysis tools are relative to the project root

The architecture separates protocol handling from services and external resources Responses return through the tool adapter to the connected client

flowchart TB

accTitle: System architecture accDescr: MCP requests pass through strict schemas and adapters to storage and analysis and rendering services client["MCP client"] <-->|stdio| server["CLI and MCP server"] server --> schemas["Strict input schemas"] schemas --> adapters["Tool adapters"] adapters --> store["Diagram storage"] adapters --> analysis["Analysis and generation"] adapters --> rendering["Rendering service"] store --> diagrams[("Diagrams root")] analysis --> code[("Project root")] rendering --> external["Local commands or opt in PlantUML endpoint"]

Tool adapters own protocol contracts and response formatting Services own filesystem operations and analysis and source generation Renderers invoke external command line tools through a separate command boundary Expected domain failures become tool errors Unexpected failures return a generic error and are logged through the shared error handling layer

CONFIGURATION AND RENDERING ===========================

PROJECT_ROOT selects the codebase used for analysis Its default is the server process working directory

DIAGRAMS_DIR selects the diagrams root Its default is the diagrams directory beneath PROJECT_ROOT A relative value is resolved beneath PROJECT_ROOT An absolute value selects a separate storage location Restart the server after changing either root

Rendering requires a working external renderer on PATH PlantUML uses the plantuml command Mermaid uses the mmdc command from the Mermaid CLI package The server package does not install either renderer for you External renderer packages have their own runtime requirements

To install the Mermaid command:

npm install -g @mermaid-js/mermaid-cli

PlantUML rendering prefers the local command When that command is missing remote fallback remains disabled unless ALLOW_REMOTE_PLANTUML is exactly true DISABLE_REMOTE_PLANTUML set to exactly true overrides that permission PLANTUML_SERVER_URL selects the remote endpoint when fallback is enabled The default endpoint is the public PlantUML rendering service

Remote fallback sends diagram source to the configured server Mermaid rendering always uses the local command A local renderer execution failure is an error rather than a reason to retry remotely Rendering uses temporary files that are cleaned up after the operation

Renderer selection follows the decision chart below Remote permission means ALLOW_REMOTE_PLANTUML is exactly true while DISABLE_REMOTE_PLANTUML is not true Only a missing local PlantUML command reaches that decision

flowchart TB

accTitle: Renderer selection accDescr: Mermaid uses mmdc while PlantUML uses a local CLI or an explicitly permitted remote endpoint dialect{"Dialect"} -->|Mermaid| mermaid["Run local mmdc"] dialect -->|PlantUML| local{"Local plantuml command"} local -->|Available| plantuml["Run local plantuml"] local -->|Missing| permission{"Remote fallback allowed"} permission -->|No| failure["Return a render error"] permission -->|Yes| remote["Send source to configured endpoint"]

TOOL CONTRACTS ==============

The chart groups the fifteen tools by their primary purpose It describes the tool surface rather than project completion

pie showData

accTitle: Tool categories accDescr: Five storage tools and three rendering tools and two analysis tools and four diagram drafting and template tools and one code drafting tool title Tool categories "Diagram storage" : 5 "Rendering and sharing" : 3 "Analysis and comparison" : 2 "Diagram drafting and templates" : 4 "Code drafting" : 1

Inventory and source access


diagrams_list supports type_filter and zero based offset pagination An explicit limit accepts 1 through 500 Omitting limit returns all remaining matches The response distinguishes the page count from the total and reports has_more so callers can continue without guessing

diagrams_get returns complete source unless max_chars requests a window An explicit window accepts 1 through 100000 UTF-16 code units The response reports offset and returned_chars and total_chars together with is_partial and has_more An offset beyond the source is an error

diagrams_create and diagrams_update and diagrams_delete are the explicit diagram mutation tools All fifteen tools in the current checkout reject unknown input arguments Clients should use the tool schemas exposed by MCP discovery as the exact argument reference

Analysis and comparison


diagrams_check_consistency compares extracted diagram names with source declaration evidence and reports matched files and analyzer tiers Its extractors include language specific declaration patterns and a generic whole word fallback The optional TypeScript compiler improves selected analysis paths The result remains heuristic and does not establish runtime correct

ตัดมาแค่ช่วงต้น อ่านต่อใน repo