MCP servers: Architecture & Design

Expose a company's complete design system (colors, typography, logos, components, guidelines, CSS tokens) to AI tools via MCP. Auto-parses CSS / Markdown / PDF / SVG / fonts; supports `marketing` vs `product` contexts with shared overrides; ships 12 tools, 16+ resources under `brandkit://`, and 4 prompts; stdio + SSE + Streamable HTTP transports. Install via NPM: `npx -y brandkit-mcp serve`.

claude mcp add brandkit-mcp -- npx -y brandkit-mcp serve`

AI-powered Mermaid diagram generation with 22+ diagram types including flowcharts, sequence diagrams, class diagrams, ER diagrams, architecture diagrams, state machines, and more. Features 50+ pre-built templates, advanced layout engines, SVG/PNG/PDF exports, and seamless integration with GitHub Copilot, Claude, and any MCP-compatible client. Install via NPM: `npm install -g @narasimhaponnada/mermaid-mcp-server`

Bidirectional Figma server over a local WebSocket relay: turn a selection into framework-aware code (reusing your components and tokens), or author frames, text, styles, variables, and whole screens back onto the canvas. 92 tools, any MCP client, no Dev Mode seat or paid tier.

A Model Context Protocol (MCP) server for validating Mermaid diagram syntax and providing comprehensive grammar checking capabilities

Generate beautiful Excalidraw architecture diagrams with auto-layout, architecture-aware component styling, and stateful editing. 50+ technology mappings including databases, message queues, caches, and more. No API keys required.

MCP server for AI Diagram Maker — generate flowcharts, sequence diagrams, ERDs, system/network architecture, UML, mindmap, and workflow from natural language, code, ASCII, images, or Mermaid. Inline rendering using MCP Apps UI and editable diagram URLs. Requires API key.

Create workflow, sequence, and architecture diagrams using FlowZap Code DSL. 7 tools for validation, playground URL generation, syntax docs, graph export, artifact parsing, diffing, and patching. No API key required. Install via NPM: `npx -y flowzap-mcp`

claude mcp add flowzap-mcp -- npx -y flowzap-mcp

MCP server that turns local projects or GitHub repositories into Mermaid diagrams and renders them via Kroki.

Generate premium iOS mobile UI mockups (PNG + HTML) from a single text prompt. Pairs Claude (Opus 4.7 by default) with a Playwright headless renderer. Two backends — `claude` CLI (uses your Claude Code subscription) or Anthropic API. Stdio + HTTP transports, MIT.

AI-native architecture platform for engineering teams. Describe a system in natural language (e.g. "payment service with Stripe, Kafka, PostgreSQL") → get an interactive typed diagram with 167 cloud components → export to 14 production frameworks (Java Spring Boot, Python FastAPI, Go chi, Rust Axum, .NET, Kotlin Ktor, Ruby Rails, Elixir Phoenix, Docker Compose, Terraform, Mermaid, ADR, and more). Drift detection (`sync_architecture`) scores saved diagrams against live code 0–100 with a structured diff. 9 quality-lint rules catch orphans, SPOFs, god services. Also includes a secondary persistent code-graph layer for AI coding agents (free offline via `npx tentra-mcp --local init`). Agent-as-LLM pattern — zero LLM cost on our side, zero API key on yours. 35 MCP tools. Works in Cursor, Claude Code, Codex, Windsurf.

claude mcp add tentra-mcp -- npx tentra-mcp --local init`). Agent-as-LLM pattern — zero LLM cost on our side, zero API key on yours. 35 MCP tools. Works in Cursor, Claude Code, Codex, Windsurf

Let your AI author Mermaid diagrams (flowchart, sequence, ER, mindmap) in a shared workspace, then read, comment on, embed, and present them at a clean URL — instead of pasting back hundreds of lines of prose. Hosted endpoint ` or local `npx -y @diagramzu/mcp`. 14 tools incl. diagram CRUD, version history, comments, presentation decks, and `analyze_diagram` lints.

claude mcp add diagramzu-mcp -- npx -y @diagramzu/mcp