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.
Get a diagram link
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 type
diagram_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. - Diagram
sourcetextRequired - 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 format
output_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": "",
"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 type
diagram_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. - Diagram
sourcetextRequired - 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 format
output_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 name
filenametext - 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"
}