generate_diagram
Create technical diagrams, flowcharts, and architectural mockups from natural language descriptions. Customize diagram type, style, layout, and detail level for clear 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)Executes the generate_diagram tool by constructing a specialized prompt and delegating to the ImageGenerator for actual image creation.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 (registration)Registers the generate_diagram tool with its input schema in the list of available tools.{ 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:666-681 (helper)Helper function that builds a detailed, specialized prompt string for generating diagrams based on user arguments.private buildDiagramPrompt(args?: DiagramPromptArgs): string { 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)TypeScript interface defining the shape of arguments for the diagram prompt builder, matching the tool's inputSchema.export interface DiagramPromptArgs { prompt?: string; type?: string; style?: string; layout?: string; complexity?: string; colors?: string; annotations?: string; }