Kroki

App · 2 actions

Turn text into diagrams with Kroki: flowcharts, sequence and architecture diagrams, charts and more from Mermaid, PlantUML, Graphviz, D2, BPMN, Excalidraw and Vega-Lite. Save them as SVG, PNG, PDF or JPEG files, or get an image link to post in chat or email.

Make a kroki.io link that shows a diagram as an image, for a chat message or an email to embed. Nothing is saved. The link is checked to draw, so a mistake in the diagram stops the step. Very large diagrams are too long for a link; render those instead.

Inputs

Diagram typediagram_typetextRequired
The language the diagram is written in.One of: mermaid, plantuml, graphviz (Graphviz (DOT)), d2, bpmn, excalidraw, vegalite (Vega-Lite), vega, c4plantuml (C4 (PlantUML)), structurizr, and 19 more. Default: mermaid.
DiagramsourcetextRequired
The diagram's text, written in the language chosen in Diagram type. Kroki's examples for every type are at https://kroki.io/examples.html.
Image formatoutput_formattext
SVG stays sharp at any size and works with every diagram type. Choose PNG for email and chat apps, which don't all show SVG. The choices follow the diagram type.One of: svg, png, pdf, jpeg. Default: svg.

Outputs

content_typetext
The image's file type, e.g. image/png.
diagram_typetext
The diagram type, e.g. mermaid.
htmltext
The image as an HTML <img> tag, for email bodies.
image_urltext
A kroki.io address that shows the diagram as an image, for a chat message or an email to embed.
markdowntext
The image as Markdown, for chat apps and documents.
output_formattext
The image format: svg, png, pdf or jpeg.
Example output
{
  "content_type": "image/png",
  "diagram_type": "mermaid",
  "html": "<img src=\"https://kroki.io/mermaid/png/eNpLL0osyFAIceFSUHCM9i9KSS1SKMhJTE5NiVXQ1bVTcKr2zFMoLslPzravBSpxAgnWRKYW1yg4RwdnZBYoZJbEwsX98msUXKKdEpOzdfNBJsUCADx6HMc=\" alt=\"Mermaid diagram\">",
  "image_url": "https://kroki.io/mermaid/png/eNpLL0osyFAIceFSUHCM9i9KSS1SKMhJTE5NiVXQ1bVTcKr2zFMoLslPzravBSpxAgnWRKYW1yg4RwdnZBYoZJbEwsX98msUXKKdEpOzdfNBJsUCADx6HMc=",
  "markdown": "![Mermaid diagram](https://kroki.io/mermaid/png/eNpLL0osyFAIceFSUHCM9i9KSS1SKMhJTE5NiVXQ1bVTcKr2zFMoLslPzravBSpxAgnWRKYW1yg4RwdnZBYoZJbEwsX98msUXKKdEpOzdfNBJsUCADx6HMc=)",
  "output_format": "png"
}

Render a diagram

Draw a diagram from its text (Mermaid, PlantUML, Graphviz, D2 and more) and save it as an SVG, PNG, PDF or JPEG file that later steps can attach, upload or send. A kroki.io link to the image comes with it.

Inputs

Diagram typediagram_typetextRequired
The language the diagram is written in.One of: mermaid, plantuml, graphviz (Graphviz (DOT)), d2, bpmn, excalidraw, vegalite (Vega-Lite), vega, c4plantuml (C4 (PlantUML)), structurizr, and 19 more. Default: mermaid.
DiagramsourcetextRequired
The diagram's text, written in the language chosen in Diagram type. Kroki's examples for every type are at https://kroki.io/examples.html.
Image formatoutput_formattext
SVG stays sharp at any size and works with every diagram type. Choose PNG for email and chat apps, which don't all show SVG. The choices follow the diagram type.One of: svg, png, pdf, jpeg. Default: svg.
File namefilenametext
What to call the file. Left empty, it is named after the diagram type, such as mermaid-diagram.png.

Outputs

content_typetext
File type of the diagram.
diagram_typetext
The diagram type, e.g. mermaid.
document_reftext
Reference to the saved diagram, for use by a later step.
documentslist
The diagram file, in the shape steps that send or upload files expect.
filenametext
Name the diagram was saved under.
image_urltext
A kroki.io address that shows the diagram as an image, for a chat message or an email to embed. Empty when the diagram is too long for a link.
output_formattext
The image format: svg, png, pdf or jpeg.
size_bytesnumber
Size of the file in bytes.
urltext
Download link for the saved diagram.
Example output
{
  "content_type": "image/png",
  "diagram_type": "mermaid",
  "document_ref": "doc_5c1e0b7a9d2f48e3b6a4c8d01f2e3a4b",
  "documents": [
    {
      "content_type": "image/png",
      "document_ref": "doc_5c1e0b7a9d2f48e3b6a4c8d01f2e3a4b",
      "filename": "mermaid-diagram.png",
      "size_bytes": 14250,
      "url": "/actions/core/serve-document/doc_5c1e0b7a9d2f48e3b6a4c8d01f2e3a4b?teamId=6512a1b2c3d4e5f600000001"
    }
  ],
  "filename": "mermaid-diagram.png",
  "image_url": "https://kroki.io/mermaid/png/eNpLL0osyFAIceFSUHCM9i9KSS1SKMhJTE5NiVXQ1bVTcKr2zFMoLslPzravBSpxAgnWRKYW1yg4RwdnZBYoZJbEwsX98msUXKKdEpOzdfNBJsUCADx6HMc=",
  "output_format": "png",
  "size_bytes": 14250,
  "url": "/actions/core/serve-document/doc_5c1e0b7a9d2f48e3b6a4c8d01f2e3a4b?teamId=6512a1b2c3d4e5f600000001"
}

On this page