generate_diagram
Create technical diagrams and flowcharts from descriptions using customizable types, styles, and layouts for architectural mockups and visual documentation.
Instructions
Generate technical diagrams, flowcharts, and architectural mockups
Input Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
| prompt | Yes | Description of the diagram content and structure | |
| type | No | Type of diagram to generate | flowchart |
| style | No | Visual style of the diagram | professional |
| layout | No | Layout orientation | hierarchical |
| complexity | No | Level of detail in the diagram | detailed |
| colors | No | Color scheme | accent |
| annotations | No | Label and annotation level | detailed |
| preview | No | Automatically open generated images in default viewer |
Implementation Reference
- mcp-server/src/server.ts:584-597 (handler)Handler case for the generate_diagram tool. Constructs a specific ImageGenerationRequest using buildDiagramPrompt and delegates to the image generator.case "generate_diagram": { const diagramRequest: ImageGenerationRequest = { prompt: this.buildDiagramPrompt(args), outputCount: 1, mode: "generate", preview: args?.preview as boolean, noPreview: (args?.noPreview as boolean) || (args?.["no-preview"] as boolean), }; response = await this.imageGenerator.generateTextToImage(diagramRequest); break; }
- mcp-server/src/server.ts:395-459 (schema)Input schema and description for the generate_diagram tool, provided in the listTools response.{ name: "generate_diagram", description: "Generate technical diagrams, flowcharts, and architectural mockups", inputSchema: { type: "object", properties: { prompt: { type: "string", description: "Description of the diagram content and structure", }, type: { type: "string", enum: [ "flowchart", "architecture", "network", "database", "wireframe", "mindmap", "sequence", ], description: "Type of diagram to generate", default: "flowchart", }, style: { type: "string", enum: ["professional", "clean", "hand-drawn", "technical"], description: "Visual style of the diagram", default: "professional", }, layout: { type: "string", enum: ["horizontal", "vertical", "hierarchical", "circular"], description: "Layout orientation", default: "hierarchical", }, complexity: { type: "string", enum: ["simple", "detailed", "comprehensive"], description: "Level of detail in the diagram", default: "detailed", }, colors: { type: "string", enum: ["mono", "accent", "categorical"], description: "Color scheme", default: "accent", }, annotations: { type: "string", enum: ["minimal", "detailed"], description: "Label and annotation level", default: "detailed", }, preview: { type: "boolean", description: "Automatically open generated images in default viewer", default: false, }, }, required: ["prompt"], }, },
- mcp-server/src/server.ts:667-681 (helper)Helper function that builds a specialized prompt for diagram generation based on tool input parameters.const basePrompt = args?.prompt || "system diagram"; const type = args?.type || "flowchart"; const style = args?.style || "professional"; const layout = args?.layout || "hierarchical"; const complexity = args?.complexity || "detailed"; const colors = args?.colors || "accent"; const annotations = args?.annotations || "detailed"; let prompt = `${basePrompt}, ${type} diagram, ${style} style, ${layout} layout`; prompt += `, ${complexity} level of detail, ${colors} color scheme`; prompt += `, ${annotations} annotations and labels`; prompt += ", clean technical illustration, clear visual hierarchy"; return prompt; }
- mcp-server/src/types.ts:64-72 (schema)Type definition for the arguments used in the diagram prompt builder.export interface DiagramPromptArgs { prompt?: string; type?: string; style?: string; layout?: string; complexity?: string; colors?: string; annotations?: string; }