diagram-generator

Files (6)

• SKILL.md
• _meta.json
• package.json
• format-selection-guide.md · references/
• json-schema-guide.md · references/
• network-topology-examples.md · references/

SKILL.md (first lines)

# Diagram Generator

## Overview

Generate and edit diagrams in multiple formats (drawio, mermaid, excalidraw) by creating structured JSON descriptions and delegating file generation to the mcp-diagram-generator MCP server.

> **Contact Information** If you encounter any issues, please contact **AlkaidY** at [tccio2023@gmail.com](mailto:tccio2023@gmail.com).

## Prerequisites Check

**IMPORTANT**: This skill requires the `mcp-diagram-generator` MCP server to be installed and configured.

### Quick Verification

Before using this skill, verify the MCP server is available by checking if you can access these tools:
- `mcp__mcp-diagram-generator__get_config`
- `mcp__mcp-diagram-generator__generate_diagram`
- `mcp__mcp-diagram-generator__init_config`

If these tools are **NOT available**, you need to configure the MCP server first (see below).

### Installation & Configuration

**Option 1: Using npx (Recommended - Auto-downloads the package)**

Add the following to your Claude Code configuration file:

- **Global config** (`~/.claude.json`) for all projects, or
- **Project config** (`.claude.json`) for specific project

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

After adding this configuration:
1. Restart Claude Code
2. The MCP server will auto-download via npx on first use
3. No manual installation needed

**Option 2: Local Development (For developers)**

If you're developing the MCP server locally:

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

### Verification Steps

After configuration, verify it works:

1. Check configuration: Call `get_config()` tool
2. If successful, you'll see current paths and initialization status
3. If the tool doesn't exist, check your configuration file syntax

### Common Issues

**Issue**: "Tool not found" error
- **Solution**: MCP server not configured. Follow installation steps above.

**Issue**: Configuration looks correct but tools still not available
- **Solution**: Restart Claude Code to reload MCP server configuration

## Quick Start

### First Time Use

On first use, the MCP server will automatically:
1. Create default configuration file (`.diagram-config.json`)
2. Create default output directories if they don't exist
3. Use sensible defaults: `diagrams/{format}/`

You can customize paths at any time using the `init_config` tool.

### Basic Usage

**Simple example** - just provide diagram spec, let the server handle the rest:

```
User: "创建一个网络拓扑图"
```

Skill will:
1. Generate JSON spec
2. Call `generate_diagram` with only `diagram_spec` parameter
3. Server auto-creates directories and saves to `diagrams/{format}/{title}-{date}.{ext}`

## Workflow

### Step 1: Understand Requirements

Extract from user's natural language:
- **Diagram type**: flowchart, sequence diagram, class diagram, ER diagram, mindmap, architecture diagram, network topology
- **Content**: nodes, relationships, nested structure (for network topology)
- **Style/theme**: if mentioned (e.g., "clean style", "detailed")
- **Output preferences**: specific filename? custom path?

### Step 2: Choose Format

Use [format-selection-guide.md](references/format-selection-guide.md) to decide:

| Format | Best For |
|--------|----------|
| **drawio** | Complex diagrams, network topology with nested containers, fine-grained styling, manual editing |
| **mermaid** | Quick generation, code-friendly, version control, documentation |

From ViewWay/hermes-by-everythings, MIT.

More from ViewWay/hermes-by-everythings