{
  "markdown": "# CodePic MCP\n\n> Let your AI coding agent draw **editable** diagrams — not another Mermaid snippet you have to paste.\n\n[![Server](https://img.shields.io/badge/MCP-Streamable_HTTP-blue)](https://codepic.cc/tools/mcp)\n[![Website](https://img.shields.io/badge/website-codepic.cc-111)](https://codepic.cc)\n[![License](https://img.shields.io/badge/license-MIT-green)](LICENSE)\n\nGenerate editable hand-drawn diagrams from Cursor, Claude Desktop, and other MCP clients.\n\nCodePic MCP lets an AI coding agent create diagrams directly in CodePic instead of returning static images, Mermaid snippets, or JSON that you have to paste manually. The result opens in the CodePic editor, where you can still move shapes, edit labels, adjust connectors, share a read-only link, and export PNG or JSON.\n\n## Quick Start\n\nIt's a remote Streamable HTTP server — no local install. First create a free API key (the `cpk_...` token) at **https://codepic.cc/settings/api-keys** (sign in → *New API key* → copy), then add the config for your client and replace `cpk_your_api_key_here`.\n\n### Cursor\n\nCreate `.cursor/mcp.json` in your project:\n\n```json\n{\n  \"mcpServers\": {\n    \"codepic\": {\n      \"url\": \"https://codepic.cc/api/mcp/mcp\",\n      \"headers\": {\n        \"Authorization\": \"Bearer cpk_your_api_key_here\"\n      }\n    }\n  }\n}\n```\n\n### Claude Code\n\nAdd it with one command:\n\n```bash\nclaude mcp add --transport http codepic https://codepic.cc/api/mcp/mcp \\\n  --header \"Authorization: Bearer cpk_your_api_key_here\"\n```\n\n### Claude Desktop\n\nAdd CodePic to your `claude_desktop_config.json`:\n\n```json\n{\n  \"mcpServers\": {\n    \"codepic\": {\n      \"type\": \"streamableHttp\",\n      \"url\": \"https://codepic.cc/api/mcp/mcp\",\n      \"headers\": {\n        \"Authorization\": \"Bearer cpk_your_api_key_here\"\n      }\n    }\n  }\n}\n```\n\n### VS Code (GitHub Copilot)\n\nAdd CodePic to `.vscode/mcp.json`:\n\n```json\n{\n  \"servers\": {\n    \"codepic\": {\n      \"type\": \"http\",\n      \"url\": \"https://codepic.cc/api/mcp/mcp\",\n      \"headers\": {\n        \"Authorization\": \"Bearer cpk_your_api_key_here\"\n      }\n    }\n  }\n}\n```\n\n### Codex CLI\n\nAdd CodePic to `~/.codex/config.toml`:\n\n```toml\n[mcp_servers.codepic]\nurl = \"https://codepic.cc/api/mcp/mcp\"\n\n[mcp_servers.codepic.headers]\nAuthorization = \"Bearer cpk_your_api_key_here\"\n```\n\n### Windsurf\n\nAdd CodePic to `~/.codeium/windsurf/mcp_config.json`:\n\n```json\n{\n  \"mcpServers\": {\n    \"codepic\": {\n      \"serverUrl\": \"https://codepic.cc/api/mcp/mcp\",\n      \"headers\": {\n        \"Authorization\": \"Bearer cpk_your_api_key_here\"\n      }\n    }\n  }\n}\n```\n\n### Cline\n\nOpen Cline's MCP settings (`cline_mcp_settings.json`) and add:\n\n```json\n{\n  \"mcpServers\": {\n    \"codepic\": {\n      \"type\": \"streamableHttp\",\n      \"url\": \"https://codepic.cc/api/mcp/mcp\",\n      \"headers\": {\n        \"Authorization\": \"Bearer cpk_your_api_key_here\"\n      }\n    }\n  }\n}\n```\n\n### Other clients\n\nAny MCP client that supports remote Streamable HTTP works — point it at the endpoint `https://codepic.cc/api/mcp/mcp` with header `Authorization: Bearer cpk_...`.\n\n## Available MCP Tools\n\n- `list_templates` - list available diagram templates.\n- `create_from_template` - create a new diagram from a template.\n- `create_diagram` - create a custom diagram with nodes and edges.\n- `get_diagram` - fetch the current diagram structure by `documentId` before making targeted follow-up edits.\n- `update_diagram` - update an existing diagram by replacing, adding, or removing nodes and edges.\n\n## Iterate on an Existing Diagram\n\nUse `get_diagram` when you already have a CodePic document and want the AI agent to inspect it before changing it. This keeps the workflow grounded in the current diagram instead of guessing from memory.\n\nExample prompt:\n\n```text\nUse get_diagram to inspect document <documentId>, then update the diagram by adding a Redis cache between the API server and Postgres database.\n```\n\n## Examples\n\n| Example | What It Generates | Prompt |\n|---|---|---|\n| [System architecture](examples/system-architecture.md) | Next.js SaaS architecture diagram | Next.js + Supabase + Postgres + R2 + Stripe + Vercel |\n| [Database ER diagram](examples/database-er-diagram.md) | SaaS billing data model | Users, teams, subscriptions, invoices, payments |\n| [OAuth sequence flow](examples/oauth-sequence-flow.md) | PKCE login sequence diagram | Browser, app server, identity provider, database |\n| [CI/CD pipeline](examples/cicd-pipeline.md) | GitHub Actions deployment pipeline | Type-check, lint, build, preview, production |\n| [Data pipeline](examples/data-pipeline.md) | Analytics pipeline diagram | Segment, Snowflake, dbt, Metabase |\n| [Iterate existing diagram](examples/iterate-existing-diagram.md) | Read an existing document, then update it | `get_diagram` + `update_diagram` |\n\n## Useful Links\n\n- CodePic: https://codepic.cc\n- MCP guide: https://codepic.cc/tools/mcp\n- API keys (get yours): https://codepic.cc/settings/api-keys\n- ER diagram maker: https://codepic.cc/tools/er-diagram-maker\n- Flowchart maker: https://codepic.cc/tools/flowchart-maker\n- Wireframe tool: https://codepic.cc/tools/wireframe-tool\n\n## Community Post Angle\n\nIf you share this project, lead with the workflow:\n\n> I connected Cursor to a diagram editor through MCP, so it can generate editable architecture diagrams instead of Mermaid text.\n\nAvoid generic product claims like \"best diagram tool\". Developer communities respond better to a concrete workflow and real examples.\n\n## License\n\nMIT — see [LICENSE](LICENSE).\n\n",
  "bytes": 5459,
  "sha": "a55305d9da295b65b0d1084532b7d080bb5178fd0bcc183a6ac27c65c4e9e238",
  "repo_slug": "abelce/codepic-mcp",
  "fonte": "repo",
  "truncated": false,
  "api": "https://agentalog.com/api/listings/mcp_io_github_abelce_codepic_6c4a1a6c/readme"
}