create_diagram

io.github.abelce/codepic · Verify this server

Create a custom CodePic hand-drawn style diagram by specifying nodes and edges. Requires API Key authentication. Returns a public view URL. **THIS IS THE DEFAULT TOOL FOR ANY USER-DESCRIBED DIAGRAM.** Whenever the user describes a diagram they want ("draw an A/B test flowchart", "帮我画一个登录流程", "a system architecture with a load balancer and 3 servers", etc.), build it here from their description. Do NOT fall back to `create_from_template` / `list_templates` unless the user explicitly asked for a template. When responding to the user, present the returned URL as a clickable markdown link (e.g. `[Open in CodePic →](URL)`) so the user can click it directly in their AI client (Cursor / Claude / etc.). **Container nesting (IMPORTANT — use whenever possible):** - Set `parentId` on a node to nest it inside another node. ANY node type can be a container. - The parent automatically becomes draggable-as-a-group and users can keep dropping elements into it. - Good container types: `frame` (clean group box), `rect`/`rounded-rect` (module boundary), `package` (UML package), `swimlane` (process lane). - Use absolute canvas coordinates for all nodes — child coordinates are auto-converted to parent-relative. - **Rule**: whenever 2+ nodes logically belong to the same module / component / region, create a container node first and set `parentId` on each child. **Design tips for beautiful diagrams:** - Use semantic types: `button-primary` for CTA buttons (auto blue), `diamond` for decisions - Pick a color palette and apply it consistently — light fill + darker stroke of the same hue: • Blue: fillColor #e3f2fd / #bbdefb, strokeColor #1565c0, fontColor #1565c0 (or #ffffff on dark fill) • Green: fillColor #e8f5e9 / #c8e6c9, strokeColor #2e7d32, fontColor #1b5e20 • Purple: fillColor #f3e5f5 / #e1bee7, strokeColor #6a1b9a, fontColor #4a148c • Neutral: fillColor #f8fafc / #f1f5f9, strokeColor #475569, fontColor #1e293b - Each semantic group (decisions, processes, I/O) should share a fill color to create visual hierarchy - Dark fill (e.g. #1565c0, #ef4444) → fontColor #ffffff; light fill → fontColor #111827