Spec Driven Development
MCP Server that facilitates spec-driven development workflows, not just Vibe Coding.
作者による説明(英語の原文)
Generate Mermaid diagrams and charts from Mermaid syntax, validated locally.
この3つを1つのスコアにまとめることはしません。意見、測定、人気はそれぞれ別のものだからです。
このサーバーのやさしい解説はまだ書いていません。以下はレジストリから読み取った事実です。
使っているAIアプリを選んで、設定をコピーしてください。
必要なもの
どのアプリを使っていますか?
上でアプリを選んでください。選んだアプリを覚えておくので、次からはボタンに「…にインストール」と表示されます。
Claude Desktop → Settings → Developer → Edit Config を開き、claude_desktop_config.json にこれを貼り付けます
{
"mcpServers": {
"diagramport": {
"command": "npx",
"args": [
"-y",
"@reneturcios/diagramport",
"mcp"
]
}
}
}ターミナルでこれを実行します
claude mcp add diagramport -- npx -y @reneturcios/diagramport mcpプロジェクトの .cursor/mcp.json、または ~/.cursor/mcp.json に貼り付けます
{
"mcpServers": {
"diagramport": {
"command": "npx",
"args": [
"-y",
"@reneturcios/diagramport",
"mcp"
]
}
}
}ブラウザがアプリを開いてよいか確認し、そのあとアプリが設定を表示して確認を求めます。キーの値は空欄のままなので、自分で入力してください。
プロジェクトの .vscode/mcp.json に貼り付けます
{
"servers": {
"diagramport": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"@reneturcios/diagramport",
"mcp"
]
}
}
}ブラウザがアプリを開いてよいか確認し、そのあとアプリが設定を表示して確認を求めます。キーの値は空欄のままなので、自分で入力してください。
これはパソコンで動くサーバーですが、ChatGPTがつなげるのはインターネット上のサーバーだけです。ほかのアプリを選んでください。
選んだアプリは、この端末のCookieに保存されます。アカウントは不要です。
この設定は、作者のレジストリ登録情報から作成しています。READMEと違う場合は、READMEに従ってください。
パソコンで動くサーバーです。インストールすると、ツール一覧がAIアプリに表示されます。
誰でも見られる情報をチェックしており、コードは読んでいません。当てはまらない項目は数に入れていません。 · 2026年11月7日にチェック
レジストリ名は、リポジトリを所有するGitHubアカウント CloudCorpRecords で確認済みです
このリポジトリはまだGitHubから読み取っていません
このリポジトリはまだGitHubから読み取っていません
これはパソコンで動くため、インターネット上のエンドポイントはありません
パソコンで動き、代わりにローカルの設定を使います
パソコンで動くサーバーです。ツール一覧を読み取れるのは、インターネット上のエンドポイントがある場合だけです
レジストリでこのカテゴリにある有効なすべてのサーバーと比較しています。スターは、公開者がリポジトリの所有者である場合だけ数えます。
当てはまる基本チェック1項目のうち1項目に合格しました。コードは読んでいません。キーやトークンを追加する前に、サーバーがどんなアクセスを求めているかを確認し、必要な権限だけを持つキーを使ってください。
レジストリには必須のキーは載っていません。ただし、最初に使うときにサインインを求めるサーバーもあります。
あなたのパソコンで動きます。必要なときにAIアプリが起動し、データは作者のサーバーを通りません(サーバー自体がオンラインサービスを呼び出す場合を除きます)。
GitHubリポジトリの最終更新は–、最新バージョン(0.1.0)がレジストリに届いたのは5 日前です。
Claude Desktop、Claude Code、Cursor、VS CodeなどのMCP対応アプリで使えます。パソコンにNode.js, Dockerも必要です。
同じカテゴリには:Spec Driven Development, Remote Desktop Commander, AvaHR
同じカテゴリで、ほかの作者が作ったサーバー。スターの多い順。
カードの見方:★ GitHubスターi3つの柱:レビュー · チェック · 利用状況i更新=最新バージョンをレジストリに公開した日i
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.
Read hiring data and create inactive assessment and questionnaire drafts for human review.
作者のリポジトリから書かれたとおりにコピーしたものです。PopNx MCPは内容を確認・推奨していません。HTML、画像、スクリプトは取り除いています。リンクはこのサイトの外へ移動します。
diagramport generates Mermaid diagrams and charts from Mermaid syntax. Give it a diagram — graph TD; A-->B; and friends — and it hands back the form you asked for: the syntax itself, a shareable mermaid.ink link, or a rendered image produced by a renderer command you configure on your own machine.
Everything except rendering is local logic that always works: the syntax is validated before anything else happens, and the share links are built from the diagram text without any network call.
npx @reneturcios/diagramport generate --mermaid "graph TD; A-->B;" --output-type mermaid
Or run the container image:
docker run -i ghcr.io/cloudcorprecords/diagramport
The container defaults to the MCP server (see below). Pass CLI arguments to use it as a CLI instead.
# Validate syntax only (exit 1 with the reason when invalid)
diagramport validate --mermaid "graph TD; A-->B; A-->C; B-->D; C-->D;"
diagramport generate --mermaid "graph TD; A-->B;" --output-type mermaid
diagramport generate --mermaid "graph TD; A-->B;" --output-type svg_url diagramport generate --mermaid "graph TD; A-->B;" --output-type png_url
diagramport generate --mermaid "graph TD; A-->B;" --output-type base64 diagramport generate --mermaid "graph TD; A-->B;" --output-type file
diagramport --version
Exit codes: 0 on success, 1 when the syntax is invalid or rendering fails (the error names the problem), 2 for usage errors.
One bin serves both faces. The mcp subcommand starts a stdio MCP server:
npx -y @reneturcios/diagramport mcp
MCP client configuration:
{
"mcpServers": { "diagramport": { "command": "npx", "args": ["-y", "@reneturcios/diagramport", "mcp"] } } }
| Tool | Input | What it returns |
|---|---|---|
generate_mermaid_diagram | mermaid (string, required) — the mermaid diagram syntax; theme (string, optional, default default); backgroundColor (string, optional, default white); outputType (string, optional, default base64) — one of base64, svg, mermaid, file, svg_url, png_url | Depends on outputType: mermaid returns the validated syntax as text; svg_url / png_url return a public mermaid.ink link; base64 returns the rendered PNG image as a base64 encoded string; svg returns the rendered SVG markup; file saves the rendered PNG image to disk and returns its path. |
Syntax is checked locally before any output is produced. The first non-empty line must start with a known diagram type (graph, flowchart, sequenceDiagram, classDiagram, stateDiagram, stateDiagram-v2, erDiagram, journey, userJourney, gantt, pie, gitGraph, mindmap, timeline, quadrantChart, requirementDiagram, C4Context), and quotes and brackets must be balanced (brackets inside a double-quoted label do not count). Invalid syntax is reported as an error naming the reason — it is never passed on to a renderer or a link builder. This is a structural sanity check, not a full Mermaid parse.
For svg_url and png_url, diagramport builds the link locally: the payload is the base64url encoding of the UTF-8 diagram text, appended to https://mermaid.ink/svg/ (SVG) or https://mermaid.ink/img/ (PNG). Anyone opening the link gets the diagram rendered by mermaid.ink; diagramport itself makes no network call to build it.
diagramport bundles no renderer — rendering a diagram to an image needs a Mermaid engine and, typically, a headless browser, which are deliberately left to the operator. The base64, svg, and file output types render through a local command named by the DIAGRAMPORT_RENDERER_COMMAND environment variable. The command receives the diagram text on stdin and must write the rendered image bytes to stdout:
export DIAGRAMPORT_RENDERER_COMMAND="my-mermaid-renderer --format png"
diagramport generate --mermaid "graph TD; A-->B;" --output-type base64
With no renderer configured, those output types return an error naming DIAGRAMPORT_RENDERER_COMMAND. Image bytes are never invented or stubbed. file output is written under DIAGRAMPORT_OUTPUT_DIR when set, otherwise ./diagrams/, with a timestamped .png file name.
npm install
npm run build # tsc -> dist/ npm test # node test runner over test/*.test.ts, no network, fake renderer only npm run dev # run the CLI from source via tsx
MIT — see LICENSE.