Nano Banana - Kroki Diagram Rendering

Overview

Render text-based diagrams to PNG, SVG, PDF, or JPEG using Kroki.io. Supports 27 diagram languages including Mermaid, PlantUML, GraphViz, D2, Excalidraw, and more.

Key Features:

• 27 diagram languages in one tool
• PNG, SVG, PDF, JPEG output
• Zero dependencies (Python stdlib only)
• Free, open-source rendering service
• Reads from file, inline text, or stdin

When to Use This Skill

Use this skill only when the user explicitly asks for:

• Rendering a text-based diagram to an image file (PNG/SVG)
• A specific diagram language (PlantUML, GraphViz/DOT, D2, etc.)
• Converting diagram source code to a visual image

Do NOT use this skill when:

• The user just wants Mermaid in a markdown file (Claude generates this natively)
• The user wants an AI-generated diagram from a description (use the diagram skill instead)
• The user wants a creative image (use the image skill instead)

Quick Start

# Render Mermaid to PNG
python3 skills/kroki/scripts/render_diagram.py -t mermaid -o flowchart.png --source '
flowchart LR
    A[User] --> B[API Gateway]
    B --> C[Auth Service]
    B --> D[Order Service]
    C --> E[(Database)]
    D --> E
'

# Render PlantUML sequence diagram
python3 skills/kroki/scripts/render_diagram.py -t plantuml -o sequence.svg --source '
@startuml
Alice -> Bob: Authentication Request
Bob --> Alice: Authentication Response
Alice -> Bob: Another request
@enduml
'

# Render from a file
python3 skills/kroki/scripts/render_diagram.py -t graphviz -i architecture.dot -o architecture.png

# Render D2 diagram
python3 skills/kroki/scripts/render_diagram.py -t d2 -o system.svg --source '
server: Web Server
database: PostgreSQL
cache: Redis

server -> database: queries
server -> cache: reads
'

# List all 27 supported types
python3 skills/kroki/scripts/render_diagram.py --list-types

Supported Diagram Types

Output Formats

Some types (bpmn, excalidraw, nomnoml, svgbob) only support SVG — the script auto-switches.

Input Methods

# From file
python3 render_diagram.py -t mermaid -i diagram.mmd -o output.png

# Inline source
python3 render_diagram.py -t graphviz -o graph.png --source 'digraph G {A->B->C}'

# From stdin (pipe)
cat diagram.puml | python3 render_diagram.py -t plantuml -o output.svg

Self-Hosted Server

Use --server to point to a self-hosted Kroki instance:

python3 render_diagram.py -t mermaid -i flow.mmd -o flow.png --server http://localhost:8000

Python API

from skills.kroki.scripts.render_diagram import render_diagram

# Render Mermaid to PNG
render_diagram(
    source="flowchart LR\n  A-->B-->C",
    diagram_type="mermaid",
    output_path="flow.png"
)

# Render PlantUML to SVG
render_diagram(
    source="@startuml\nA -> B: hello\n@enduml",
    diagram_type="plantuml",
    output_path="seq.svg"
)

Comparison: kroki vs diagram Skills

Rule of thumb: If you have the diagram source code → use kroki. If you have a description and want AI to create it → use diagram.

Troubleshooting

"Kroki API error (400)"

Your diagram source has a syntax error. Check the syntax for your diagram type.

"Connection error"

Kroki.io may be temporarily unavailable. Try again, or use --server with a self-hosted instance.

SVG-only types

Some types (bpmn, excalidraw, nomnoml, svgbob) only support SVG output. The script auto-switches to SVG if you request PNG for these types.