Diagrams

The Diagram MCP servers generate professional diagrams in multiple formats.

Output Formats

• Mermaid: Text-based diagrams rendered in browser

• ReactFlow: Interactive node-based diagrams

• DrawIO: Professional diagrams compatible with draw.io/Lucidchart

Cloud Stencils

Built-in icons for:

• AWS: Lambda, API Gateway, DynamoDB, S3, EC2, RDS, SQS, SNS, CloudFront, ELB, Cognito, IAM, ECS, EKS

• Azure: (Available via DrawIO)

• GCP: (Available via DrawIO)

• Kubernetes: Pods, Services, Deployments, etc.

Mermaid Diagrams

Generate text-based diagrams:

graph TD
    A[Client] --> B[Load Balancer]
    B --> C[Web Server]
    C --> D[Database]

Supported types:

• Flowcharts

• Sequence diagrams

• Class diagrams

• State diagrams

• Entity relationship diagrams

• User journey diagrams

• Gantt charts

• Pie charts

ReactFlow Diagrams

Interactive node-based diagrams with:

• Draggable nodes

• Custom node types

• Edge connections

• Zoom and pan

• Layout algorithms

Node types:

• Rectangle

• Rounded

• Diamond

• Circle

• Hexagon

• Parallelogram

• Cylinder (database)

• Document

• Cloud

DrawIO Diagrams

Professional diagrams in DrawIO XML format:

• Compatible with draw.io web app

• Compatible with Lucidchart

• Cloud provider stencils

• Auto-layout positioning

AWS Architecture Example

<mxGraphModel>
  <!-- Lambda function -->
  <mxCell id="lambda1" value="Lambda" style="shape=mxgraph.aws4.lambda_function"/>

  <!-- API Gateway -->
  <mxCell id="apigw1" value="API Gateway" style="shape=mxgraph.aws4.api_gateway"/>

  <!-- Connection -->
  <mxCell edge="1" source="apigw1" target="lambda1"/>
</mxGraphModel>

Layout Options

Direction

• Vertical (top to bottom)

• Horizontal (left to right)

• Radial (from center)

• Force-directed (physics simulation)

Auto-Layout

Automatic positioning based on:

• Node relationships

• Edge connections

• Hierarchy levels

• Grouping

Usage Examples

Architecture Diagram

Create a diagram showing:
- API Gateway receiving requests
- Lambda function processing
- DynamoDB for storage
- S3 for file uploads

Flowchart

Create a flowchart for user authentication:
1. User enters credentials
2. Validate credentials
3. If valid, generate token
4. If invalid, show error
5. Return to login

Sequence Diagram

Create a sequence diagram for:
- User -> Frontend: Login request
- Frontend -> API: Authenticate
- API -> Database: Check credentials
- Database -> API: User data
- API -> Frontend: JWT token
- Frontend -> User: Success

Integration

Via SDK

const agent = aw.createAgent({
  model: 'gpt-4o',
  tools: aw.getMCPTools().filter(t => t.name.includes('diagram'))
});

for await (const text of agent.run({
  prompt: 'Create an AWS architecture diagram for a serverless API'
})) {
  process.stdout.write(text);
}

Via Chat

Simply ask for a diagram in conversation:

• "Create a flowchart of the authentication process"

• "Draw an AWS architecture diagram"

• "Generate a sequence diagram for the checkout flow"