Diagram Generator

What This Skill Does

The Diagram Generator skill, developed by matthewyin, empowers users to create and modify a variety of diagrams directly from simple text descriptions or by editing existing files. It supports popular formats like Draw.io, Mermaid, and Excalidraw, catering to diverse diagram needs including flowcharts, sequence diagrams, class diagrams, ER diagrams, mind maps, architecture diagrams, and network topologies. The skill leverages a dedicated MCP server, mcp-diagram-generator, to handle the generation process. This approach optimizes token usage and ensures consistent output. Diagrams are automatically saved to a diagrams/{format}/ directory within your project, with options for custom paths and automatic directory creation. This skill is ideal for quickly visualizing concepts, documenting processes, or designing system architectures.

Installation

Prerequisite: The mcp-diagram-generator MCP server must be installed and configured. You can verify its availability by checking for the tools mcp__mcp-diagram-generator__get_config, mcp__mcp-diagram-generator__generate_diagram, and mcp__mcp-diagram-generator__init_config.

Recommended Installation (using npx): Add the following configuration to your ~/.claude.json (global) or .claude.json (project-specific) file:

{
  "mcpServers": {
    "mcp-diagram-generator": {
      "command": "npx",
      "args": ["-y", "mcp-diagram-generator"]
    }
  }
}

After adding this configuration, restart your Claude Code environment. The MCP server will be automatically downloaded via npx upon its first use.

Local Development Installation: If you are developing the MCP server locally, use the following configuration, replacing the path with the absolute path to your local installation:

{
  "mcpServers": {
    "mcp-diagram-generator": {
      "command": "node",
      "args": ["/absolute/path/to/mcp-diagram-generator/dist/index.js"]
    }
  }
}

Verification: After configuring, test the setup by calling the get_config() tool. A successful call will display the current paths and initialization status. If you receive a "Tool not found" error, double-check your configuration file syntax and ensure the MCP server is correctly installed and accessible.

Use Cases

• Software Design: Generate class diagrams or sequence diagrams to outline software architecture and interactions.
• Process Documentation: Create flowcharts to visually represent business processes or user workflows.
• Data Modeling: Design Entity-Relationship (ER) diagrams for databases.
• Brainstorming: Develop mind maps to explore ideas and concepts.
• System Architecture: Visualize network topologies or complex system components.
• Editing Existing Diagrams: Quickly modify existing .drawio, .mmd, or Excalidraw files by updating their structured descriptions.

Example Prompts

1. "Create a Mermaid sequence diagram showing a user logging into a web application, including the browser, web server, and database."
2. "Generate a Draw.io flowchart for a simple employee onboarding process: Start -> HR Approval -> IT Setup -> Welcome Email -> End."
3. "Load the existing Excalidraw file named 'network-diagram.excalidraw' and add a new server labeled 'Backup Server' connected to the main switch."

Tips & Limitations

• Clarity is Key: Provide clear and concise text descriptions for natural language diagram creation. The more specific your prompt, the better the generated diagram.
• File Paths: Be mindful of the default output path (diagrams/{format}/). You can specify custom paths for more organized storage.
• MCP Server Dependency: This skill relies on the mcp-diagram-generator MCP server. Ensure it is correctly installed and running to avoid errors.
• Format Support: While versatile, ensure your request aligns with the capabilities of Draw.io, Mermaid, or Excalidraw syntax when describing complex elements.
• Editing: For editing existing files, the skill works by generating a new version based on the provided instructions. It does not perform in-place edits on the original file directly.