# Diagram Renderer
A comprehensive diagram rendering service supporting Mermaid, PlantUML, and Graphviz diagrams with an interactive web interface:
- **Streamlit Dashboard** - Interactive web interface for diagram rendering
## Features
- Automatic diagram type detection (Mermaid, PlantUML, Graphviz)
- **Self-contained rendering** - All JavaScript libraries hosted locally
- Static Mermaid.js assets (version controlled, 2.8MB)
- VizJS for Graphviz/DOT rendering (locally hosted, 1.9MB)
- PlantUML to DOT conversion and rendering
- Multiple themes for Mermaid diagrams
- Interactive Streamlit dashboard, FastAPI web app, and MCP server
- **No external CDN dependencies** - Works offline
- **AI Assistant Integration** - MCP server for Claude Desktop and other AI tools
## Installation
Install from PyPI:
```bash
# Using uv (recommended)
uv add diagram-renderer
# Using pip
pip install diagram-renderer
```
For development setup:
```bash
git clone https://github.com/djvolz/diagram-renderer.git
cd diagram-renderer
uv install
```
## Usage
### Examples
The `examples/` directory contains four demonstration applications:
**Streamlit Dashboard** - Interactive web interface:
```bash
uv sync --extra dashboard
# Run directly
uv run --extra dashboard python -m streamlit run examples/dashboard.py
# Or use the convenience script
uv run --extra dashboard ./examples/run-dashboard.py
```
**FastAPI Web App** - REST API and web interface:
```bash
uv sync --extra webapp
uv run --extra webapp python examples/cli.py webapp
# or directly: uv run --extra webapp python examples/webapp.py
```
**MCP Server** - AI assistant integration via Model Context Protocol:
```bash
uv sync --extra mcp
uv run --extra mcp python examples/cli.py mcp
# or directly: uv run --extra mcp python examples/mcp_server.py
```
**Command Line Interface** - Batch processing and automation:
```bash
# Render diagram from file
uv run python examples/cli.py render diagram.mmd
# Quick inline rendering
uv run python examples/cli.py quick "graph TD; A-->B"
# Serve a diagram with HTTP server
uv run python examples/cli.py serve diagram.mmd
# Show examples and help
uv run python examples/cli.py examples
uv run python examples/cli.py --help
```
## Supported Diagram Types
### Mermaid
- Flowcharts, Sequence diagrams, Class diagrams
- State diagrams, ER diagrams, User journey
- Gantt charts, Pie charts, and more
### PlantUML
- UML diagrams (Class, Sequence, Use Case, Activity)
- Network diagrams, Mind maps
- Gantt charts, Work breakdown structure
### Graphviz
- DOT language diagrams
- Directed and undirected graphs
- Network diagrams, organizational charts
## Configuration
### Mermaid Themes
- `default` - Default theme
- `base` - Base theme
- `dark` - Dark theme
- `forest` - Forest theme
- `neutral` - Neutral theme
## Development
The main components are:
- `diagram_renderer/` - Core diagram rendering logic and renderers
- `st_diagram.py` - Streamlit diagram component wrapper
- `examples/cli.py` - Command-line interface and app launcher
- `examples/dashboard.py` - Streamlit web interface
- `examples/webapp.py` - FastAPI REST API and web interface
- `examples/mcp_server.py` - MCP server for AI assistant integration
- `diagram_renderer/renderers/static/js/` - **Local JavaScript libraries**
- `mermaid.min.js` (2.8MB) - Mermaid diagram rendering
- `viz-full.js` (1.9MB) - Graphviz/DOT rendering
- `viz-lite.js` (11KB) - Lightweight VizJS alternative
## Demo
**Input:**
```mermaid
flowchart LR
A[diagram-renderer] --> B{Auto-detect}
B -->|Mermaid| C[Mermaid.js]
B -->|PlantUML| D[PlantUML → DOT]
B -->|Graphviz| E[VizJS]
C --> F[Interactive HTML]
D --> F
E --> F
F --> G[📱 Responsive]
F --> H[🖼 PNG Export]
F --> I[🔍 Zoom/Pan]
```
**Output:** The generated HTML includes:
- 🔍 **Interactive zoom and pan controls**
- 📱 **Responsive design**
- 🖼 **PNG export functionality**
- 🎨 **Automatic diagram type detection**
- 🔒 **Self-contained** - All JS libraries included locally (no CDN dependencies)
- ⚡ **Two output modes** - Lightweight external JS (14KB) or fully embedded (4.7MB)
Try it yourself:
```bash
uv run python examples/cli.py quick "graph TD; A-->B-->C"
```
## Examples
### Mermaid Flowchart
```mermaid
flowchart TD
A[Start] --> B{Decision}
B -->|Yes| C[Process A]
B -->|No| D[Process B]
C --> E[End]
D --> E
```
### PlantUML Class Diagram
```plantuml
@startuml
class Animal {
+String name
+int age
+makeSound()
}
class Dog {
+String breed
+bark()
}
Animal <|-- Dog
@enduml
```
### Graphviz DOT Diagram
```dot
digraph G {
A -> B;
B -> C;
C -> A;
}
```
Raw data
{
"_id": null,
"home_page": null,
"name": "diagram-renderer",
"maintainer": null,
"docs_url": null,
"requires_python": ">=3.10",
"maintainer_email": "Danny Volz <volz.developer+diagram-renderer@gmail.com>",
"keywords": "diagram, mermaid, plantuml, graphviz, visualization, renderer",
"author": null,
"author_email": "Danny Volz <volz.developer+diagram-renderer@gmail.com>",
"download_url": "https://files.pythonhosted.org/packages/25/c5/cc862c5ea88f1c27b65d4f168cb5bd7f3417e9f8fd2000451271d6fab6d8/diagram_renderer-2025.8.3.1111.tar.gz",
"platform": null,
"description": "# Diagram Renderer\n\nA comprehensive diagram rendering service supporting Mermaid, PlantUML, and Graphviz diagrams with an interactive web interface:\n\n- **Streamlit Dashboard** - Interactive web interface for diagram rendering\n\n## Features\n\n- Automatic diagram type detection (Mermaid, PlantUML, Graphviz)\n- **Self-contained rendering** - All JavaScript libraries hosted locally\n- Static Mermaid.js assets (version controlled, 2.8MB)\n- VizJS for Graphviz/DOT rendering (locally hosted, 1.9MB)\n- PlantUML to DOT conversion and rendering\n- Multiple themes for Mermaid diagrams\n- Interactive Streamlit dashboard, FastAPI web app, and MCP server\n- **No external CDN dependencies** - Works offline\n- **AI Assistant Integration** - MCP server for Claude Desktop and other AI tools\n\n## Installation\n\nInstall from PyPI:\n\n```bash\n# Using uv (recommended)\nuv add diagram-renderer\n\n# Using pip\npip install diagram-renderer\n```\n\nFor development setup:\n```bash\ngit clone https://github.com/djvolz/diagram-renderer.git\ncd diagram-renderer\nuv install\n```\n\n## Usage\n\n### Examples\n\nThe `examples/` directory contains four demonstration applications:\n\n**Streamlit Dashboard** - Interactive web interface:\n```bash\nuv sync --extra dashboard\n# Run directly\nuv run --extra dashboard python -m streamlit run examples/dashboard.py\n# Or use the convenience script\nuv run --extra dashboard ./examples/run-dashboard.py\n```\n\n**FastAPI Web App** - REST API and web interface:\n```bash\nuv sync --extra webapp\nuv run --extra webapp python examples/cli.py webapp\n# or directly: uv run --extra webapp python examples/webapp.py\n```\n\n**MCP Server** - AI assistant integration via Model Context Protocol:\n```bash\nuv sync --extra mcp\nuv run --extra mcp python examples/cli.py mcp\n# or directly: uv run --extra mcp python examples/mcp_server.py\n```\n\n**Command Line Interface** - Batch processing and automation:\n```bash\n# Render diagram from file\nuv run python examples/cli.py render diagram.mmd\n\n# Quick inline rendering\nuv run python examples/cli.py quick \"graph TD; A-->B\"\n\n# Serve a diagram with HTTP server\nuv run python examples/cli.py serve diagram.mmd\n\n# Show examples and help\nuv run python examples/cli.py examples\nuv run python examples/cli.py --help\n```\n\n## Supported Diagram Types\n\n### Mermaid\n- Flowcharts, Sequence diagrams, Class diagrams\n- State diagrams, ER diagrams, User journey\n- Gantt charts, Pie charts, and more\n\n### PlantUML\n- UML diagrams (Class, Sequence, Use Case, Activity)\n- Network diagrams, Mind maps\n- Gantt charts, Work breakdown structure\n\n### Graphviz\n- DOT language diagrams\n- Directed and undirected graphs\n- Network diagrams, organizational charts\n\n## Configuration\n\n### Mermaid Themes\n- `default` - Default theme\n- `base` - Base theme\n- `dark` - Dark theme\n- `forest` - Forest theme\n- `neutral` - Neutral theme\n\n## Development\n\nThe main components are:\n\n- `diagram_renderer/` - Core diagram rendering logic and renderers\n- `st_diagram.py` - Streamlit diagram component wrapper\n- `examples/cli.py` - Command-line interface and app launcher\n- `examples/dashboard.py` - Streamlit web interface\n- `examples/webapp.py` - FastAPI REST API and web interface\n- `examples/mcp_server.py` - MCP server for AI assistant integration\n- `diagram_renderer/renderers/static/js/` - **Local JavaScript libraries**\n - `mermaid.min.js` (2.8MB) - Mermaid diagram rendering\n - `viz-full.js` (1.9MB) - Graphviz/DOT rendering\n - `viz-lite.js` (11KB) - Lightweight VizJS alternative\n\n## Demo\n\n**Input:**\n```mermaid\nflowchart LR\n A[diagram-renderer] --> B{Auto-detect}\n B -->|Mermaid| C[Mermaid.js]\n B -->|PlantUML| D[PlantUML \u2192 DOT]\n B -->|Graphviz| E[VizJS]\n C --> F[Interactive HTML]\n D --> F\n E --> F\n F --> G[\ud83d\udcf1 Responsive]\n F --> H[\ud83d\uddbc PNG Export]\n F --> I[\ud83d\udd0d Zoom/Pan]\n```\n\n**Output:** The generated HTML includes:\n- \ud83d\udd0d **Interactive zoom and pan controls**\n- \ud83d\udcf1 **Responsive design** \n- \ud83d\uddbc **PNG export functionality**\n- \ud83c\udfa8 **Automatic diagram type detection**\n- \ud83d\udd12 **Self-contained** - All JS libraries included locally (no CDN dependencies)\n- \u26a1 **Two output modes** - Lightweight external JS (14KB) or fully embedded (4.7MB)\n\nTry it yourself:\n```bash\nuv run python examples/cli.py quick \"graph TD; A-->B-->C\"\n```\n\n## Examples\n\n### Mermaid Flowchart\n```mermaid\nflowchart TD\n A[Start] --> B{Decision}\n B -->|Yes| C[Process A]\n B -->|No| D[Process B]\n C --> E[End]\n D --> E\n```\n\n### PlantUML Class Diagram\n```plantuml\n@startuml\nclass Animal {\n +String name\n +int age\n +makeSound()\n}\nclass Dog {\n +String breed\n +bark()\n}\nAnimal <|-- Dog\n@enduml\n```\n\n### Graphviz DOT Diagram\n```dot\ndigraph G {\n A -> B;\n B -> C;\n C -> A;\n}\n```\n",
"bugtrack_url": null,
"license": null,
"summary": "A comprehensive diagram rendering service supporting Mermaid, PlantUML, and Graphviz diagrams with interactive zoom/pan controls and PNG export",
"version": "2025.8.3.1111",
"project_urls": {
"Bug Tracker": "https://github.com/djvolz/diagram-renderer/issues",
"Changelog": "https://github.com/djvolz/diagram-renderer/blob/main/CHANGELOG.md",
"Documentation": "https://github.com/djvolz/diagram-renderer#readme",
"Homepage": "https://github.com/djvolz/diagram-renderer",
"Repository": "https://github.com/djvolz/diagram-renderer.git"
},
"split_keywords": [
"diagram",
" mermaid",
" plantuml",
" graphviz",
" visualization",
" renderer"
],
"urls": [
{
"comment_text": null,
"digests": {
"blake2b_256": "fd22445db6737a47260449733a7e727b5ac6d6b9b7244b082de0d9899d4c2893",
"md5": "75ff09c69bd29e68177bfa0ccd16bdc4",
"sha256": "13a8613203310aff4606a304d8e9aa52a97563a01a04e2cdee63443cf5106a7b"
},
"downloads": -1,
"filename": "diagram_renderer-2025.8.3.1111-py3-none-any.whl",
"has_sig": false,
"md5_digest": "75ff09c69bd29e68177bfa0ccd16bdc4",
"packagetype": "bdist_wheel",
"python_version": "py3",
"requires_python": ">=3.10",
"size": 1456840,
"upload_time": "2025-08-04T09:54:38",
"upload_time_iso_8601": "2025-08-04T09:54:38.172755Z",
"url": "https://files.pythonhosted.org/packages/fd/22/445db6737a47260449733a7e727b5ac6d6b9b7244b082de0d9899d4c2893/diagram_renderer-2025.8.3.1111-py3-none-any.whl",
"yanked": false,
"yanked_reason": null
},
{
"comment_text": null,
"digests": {
"blake2b_256": "25c5cc862c5ea88f1c27b65d4f168cb5bd7f3417e9f8fd2000451271d6fab6d8",
"md5": "110ed4a03ccfab154139513ae3b44017",
"sha256": "b5969274dc702363e4f41a889216bbfee00c0d5de3851bc6df3846d60a2983f6"
},
"downloads": -1,
"filename": "diagram_renderer-2025.8.3.1111.tar.gz",
"has_sig": false,
"md5_digest": "110ed4a03ccfab154139513ae3b44017",
"packagetype": "sdist",
"python_version": "source",
"requires_python": ">=3.10",
"size": 1438997,
"upload_time": "2025-08-04T09:54:40",
"upload_time_iso_8601": "2025-08-04T09:54:40.991348Z",
"url": "https://files.pythonhosted.org/packages/25/c5/cc862c5ea88f1c27b65d4f168cb5bd7f3417e9f8fd2000451271d6fab6d8/diagram_renderer-2025.8.3.1111.tar.gz",
"yanked": false,
"yanked_reason": null
}
],
"upload_time": "2025-08-04 09:54:40",
"github": true,
"gitlab": false,
"bitbucket": false,
"codeberg": false,
"github_user": "djvolz",
"github_project": "diagram-renderer",
"travis_ci": false,
"coveralls": false,
"github_actions": true,
"lcname": "diagram-renderer"
}
JSON
