No More Copy-Pasting AI Output
If you've tried using AI to help with diagramming before, you know the drill: ask it to generate some JSON, copy the output, paste it into the editor, fix the formatting, and hope for the best. It works, but it's not exactly smooth.
Today we're launching the CodePic MCP Server, and it changes the entire workflow.
You can now tell your AI — right inside Cursor or Claude Desktop — something like "draw a login flow diagram," and it'll call CodePic directly to create it for you. You get back an edit link, ready to go. No window switching, no clipboard gymnastics.
What's MCP?
MCP (Model Context Protocol) is a standard that lets AI assistants call external tools. Instead of just producing text, the AI can actually take actions — like creating a diagram in CodePic.
CodePic implements an MCP server, which means any MCP-compatible AI client can connect to it and use our diagramming tools programmatically.
What Can It Do?
Once connected, your AI gets access to four tools:
- list_templates — Browse all available diagram templates (flowcharts, ER diagrams, system architecture, kanban, and 80+ more)
- create_from_template — Create a new diagram from any template
- create_diagram — Build a fully custom diagram by specifying nodes and edges
- update_diagram — Modify an existing diagram — add nodes, rename things, restructure
You drive all of this with natural language. For example:
"Create a microservices architecture diagram with user service, order service, payment service, and a message queue"
The AI figures out the right approach, builds the diagram, and hands you an edit link.
Get Started in Three Steps
Step 1: Get an API Key
Log into CodePic, go to your Dashboard, and create an API key. Keys start with cpk_.
Step 2: Configure Your AI Client
Cursor
Create .cursor/mcp.json in your project root:
{
"mcpServers": {
"codepic": {
"url": "https://codepic.cc/api/mcp/mcp",
"headers": {
"Authorization": "Bearer cpk_your_api_key_here"
}
}
}
}
Claude Desktop
Open your claude_desktop_config.json and add:
{
"mcpServers": {
"codepic": {
"type": "streamableHttp",
"url": "https://codepic.cc/api/mcp/mcp",
"headers": {
"Authorization": "Bearer cpk_your_api_key_here"
}
}
}
}
Replace cpk_your_api_key_here with your actual key.
Step 3: Start Creating
With the config in place, just describe what you want in your AI chat. A few prompts to try:
- "Draw a user login flow: enter credentials → validate → success or failure"
- "Create an ER diagram for an e-commerce database"
- "Use the system design template to create a microservices architecture diagram"
- "Add a payment service node to my last diagram"
The AI will return a link — click it and you're in the CodePic editor, ready to tweak.
How Is This Different from JSON Import?
Our existing JSON Import feature requires you to manually copy AI-generated JSON and paste it into CodePic. MCP automates that entirely — the AI talks to CodePic directly, and you just describe what you need.
JSON Import is still available, though. If your AI tool doesn't support MCP yet, or you prefer manual control, it's a solid option.
What MCP Means for Developers and Technical Writers
Before MCP, adding diagrams to documentation meant one of two workflows, both painful. Option one: draw the diagram in a separate tool, export it as an image, commit the image to the repo, and reference it in Markdown. Every update meant repeating the entire export-and-commit cycle. Option two: use diagram-as-code tools like Mermaid or PlantUML — cleaner for version control, but limited to the diagram types those tools support and the rendering quality they produce.
MCP changes this by letting AI assistants talk directly to the diagram editor. You describe what you want in natural language — "draw a sequence diagram of the OAuth flow with three participants" — and the assistant creates an editable diagram on a CodePic canvas. You can then tweak it manually, share it as a link, or export it. The source of truth is the editable canvas, not a generated image file or a code block.
For technical writers maintaining documentation with dozens of diagrams, this eliminates the slowest part of the workflow — the manual redraw. Update the diagram on the canvas, regenerate the export if needed, and the documentation stays current without someone spending an afternoon nudging rectangles.
Getting Started with CodePic MCP
Setting up the MCP integration takes about five minutes. You need an API key from the CodePic dashboard and a client that supports MCP (Claude Desktop, Cursor, or any MCP-compatible tool). Add the CodePic MCP endpoint to your client configuration, restart, and you can start creating diagrams through natural language prompts.
The available tools include listing templates, creating diagrams from templates, creating custom diagrams with nodes and edges, reading existing diagrams, and updating them. The full API reference and configuration examples are in the CodePic MCP documentation.
Real-World Use Cases
Documentation automation: A CI pipeline generates architecture diagrams from infrastructure-as-code, pushes them to CodePic via MCP, and embeds the shareable links in the team wiki. The diagrams are always current because they are regenerated on every deploy.
Meeting facilitation: During a sprint planning session, a product manager describes a new feature to the AI assistant. Within seconds, a flowchart appears on the shared CodePic canvas. The team discusses it, drags nodes around, and saves it as the sprint's reference diagram. No one touched a mouse during the creation phase.
Education and teaching: A computer science professor uses MCP to generate diagrams during lectures. Students see the diagram appear in real time as the professor describes a concept verbally. After class, the diagrams are shared as editable canvases — students can modify them as study aids.
Try It Out
The MCP server is live for all CodePic users. Head over to the MCP guide for detailed setup instructions, or just jump in and let AI draw your first diagram.
Questions or feedback? Hit the contact button in the bottom-right corner anytime.
Why This Matters for the Diagramming Ecosystem
The MCP protocol represents a shift in how AI tools interact with creative software. Before MCP, AI assistants could generate text and code, but creating visual content meant describing what you wanted and hoping the text description was enough. MCP connects the assistant directly to the canvas — the assistant becomes a collaborator who can draw, not just a describer who can suggest.
For CodePic, this means the whiteboard becomes programmable. Every feature available to a human user — adding shapes, drawing connectors, applying colors, arranging layouts — is now available to an AI assistant through a standardized protocol. This is the same architectural approach that makes CodePic templates editable: the canvas is an open surface, not a locked file format. MCP extends that openness to the API layer.
The long-term bet is that the line between "using a tool" and "asking an assistant to use the tool for you" will blur. MCP is the protocol that enables that blurring for any tool that implements it. CodePic's implementation is one of the early examples in the diagramming and whiteboard space — a category that has historically been resistant to automation because visual layout requires spatial reasoning that purely text-based AI struggled with until recently.
The MCP Ecosystem in 2026
Since the Model Context Protocol was introduced by Anthropic in late 2024, it has grown from an experimental specification to a supported standard with implementations across dozens of tools. Code editors, databases, project management platforms, and now diagramming tools have built MCP servers that let AI assistants interact with them directly.
The practical implication for users is that the assistant is no longer limited to generating text. It can query your database, create a task in your project tracker, and draw a diagram on your whiteboard — all within a single conversation. The protocol handles authentication, tool discovery, and structured data exchange, so each integration works the same way regardless of the underlying tool.
CodePic's MCP server supports listing templates, creating diagrams from templates, building custom diagrams programmatically, reading existing diagrams, and updating them. This means you can build a script that generates a diagram from live data, or ask an assistant to sketch an architecture diagram based on a conversation about your system. The diagram is always editable — the MCP tool creates it, but you own it.
MCP turns the whiteboard from a standalone tool into a programmable surface. For developers writing documentation, for educators explaining concepts, and for teams collaborating remotely, the ability to generate diagrams through natural language removes the last remaining friction between having an idea and seeing it visualized. The canvas was always the best place to think. MCP makes it the best place to think with an AI collaborator beside you.
