kroki.io

Kroki turns a textual description into a rendered diagram. To create one, open kroki.io, pick a diagram type, write the description in that type's syntax, and let the service render it — then copy the resulting image or link. This works for anyone who can write the source syntax; no local installation is required to use the hosted service.

What you need before you start

• A diagram description written in a supported syntax (for example, a PlantUML, Mermaid, Graphviz, or other supported diagram language).
• Access to kroki.io in a browser, or a way to call the Kroki service from your own tools if you want to automate rendering.
• A clear idea of the diagram you want, since Kroki renders what the text describes rather than offering a drag-and-drop canvas.

Steps to create a diagram

1. Open Kroki and choose a diagram type

Go to kroki.io. The site is built around the idea of creating diagrams from textual descriptions, and it lists the diagram types it supports along with examples and a cheat sheet. Use those sections to confirm the syntax family you want before writing anything.

2. Write your diagram description

Enter your source text in the chosen diagram language. For example, a flowchart in Mermaid starts from a graph or flowchart declaration, while a PlantUML sequence diagram starts from @startuml. The exact keywords depend on the type you selected, so check the examples or cheat sheet for the type you are using.

3. Render and preview

Submit the description so Kroki renders it. The result is the diagram image produced from your text. If the output does not look right, the problem is almost always in the source text — a missing declaration, a typo in a node name, or unsupported syntax — so edit the description and render again.

4. Copy the image or link

Once the diagram renders correctly, copy the generated image or its link so you can embed it in documentation, a README, a wiki, or a ticket. Because the diagram is defined by text, you can keep the source alongside the image and re-render it whenever the description changes.

A concrete example

Suppose you need a simple flow for a support process. You would:

1. Choose a flowchart-capable type such as Mermaid.
2. Write a description that starts the flow, adds each step as a node, and connects the nodes in order.
3. Render it and check that the arrows point the way you intended.
4. Copy the image or link into your documentation.

If a node label contains characters that the syntax treats specially, quote or escape them, then render again.

Common snags

• Wrong syntax for the type. Each diagram type has its own grammar. A description that works in one type will not necessarily work in another.
• Missing start/end markers. Many textual diagram languages require explicit opening and closing lines. Omitting them usually produces an error or an empty render.
• Assuming a local install is required. The hosted site is enough for a one-off diagram; using Kroki from your own pipeline is a separate setup decision.
• Expecting a visual editor. Kroki is text-first. You edit the description, not the shapes.

When this approach fits

Use Kroki when you want diagrams that live as text you can version, review, and regenerate, and when you are comfortable writing the source syntax for the diagram type you need. If you need to draw freely by hand or adjust individual shapes interactively, a graphical editor will be a better fit.

Kroki! is an online service that creates diagrams from textual descriptions. Instead of drawing boxes and arrows by hand, you write a short text definition in a supported diagram language, and Kroki! renders it into an image. It is aimed at developers, technical writers, and anyone who needs diagrams that stay in sync with documentation or code.

How it works

The core idea is "diagrams as text." You provide a description using a syntax such as PlantUML, Mermaid, Graphviz, or another supported format, and Kroki! turns that description into a rendered diagram. Because the source is plain text, it can live in a README, a wiki page, or a docs repository and be version-controlled like any other file.

The site itself offers a Try section for experimenting, a Features overview, Examples, a list of Diagram types, and a Cheat sheet to help you get the syntax right.

What you can do with it

• Generate diagrams without drawing tools. You describe the structure in text and get a diagram back.
• Keep diagrams maintainable. Editing the text updates the diagram, so there is no need to redraw manually.
• Choose from many diagram types. Kroki! supports a range of textual diagram languages, which you can browse in the Diagram types section.
• Learn quickly from examples. The Examples and Cheat sheet sections show working syntax you can adapt.

Who it is for

Getting started

1. Open the Try section on kroki.io.
2. Pick a diagram type from the Diagram types list.
3. Write your diagram description in that language's syntax.
4. Render it and adjust the text until the diagram looks right.
5. Copy the working definition into your documentation or project.

If you are unsure of the syntax, check the Cheat sheet or the Examples for a starting point.

Key things to know

• Kroki! is text-first: the diagram is only as good as the description you write.
• The supported formats are listed on the site, so confirm your preferred language is included before committing to it.
• The homepage describes the service as creating diagrams from textual descriptions, which is the main capability to rely on.

Kroki! creates diagrams from textual descriptions. Instead of drawing a diagram by hand, you write a plain-text definition in a specific syntax, and Kroki renders it into an image. The site organizes this around a Diagram types list and a Cheat sheet, plus an Examples section and a Try area where you can test a definition directly.

If you already know which syntax you want to use (for example, you have a Mermaid or PlantUML definition), the practical question is whether Kroki supports that type. If you are starting from scratch, the question is which diagram type fits your content. Both are answered by the same list.

How the diagram types are organized

Kroki groups its supported types by the text syntax or tool that produces them. Each diagram type corresponds to a different textual language, so choosing a diagram type is really choosing a syntax. The site presents this as a browsable list of diagram types, with a cheat sheet for quick reference and examples you can look at before committing.

The main categories you will encounter on the list include:

• Flow and process diagrams — for step-by-step logic, pipelines, and decision paths.
• Sequence diagrams — for interactions between actors or systems over time.
• Class and structure diagrams — for object models, relationships, and hierarchies.
• Other specialized types — the list is broader than these three, and each entry links to its own syntax and examples.

Because the list is the authoritative source, treat it as the place to confirm whether a specific type is available rather than assuming from a tool name.

Choosing a diagram type for your content

The right choice depends on what you are trying to communicate, not on which syntax looks nicest.

A useful check: if you can describe your content as a sentence with a clear subject and a clear order of events, a sequence or flow type is usually the closer fit. If your content is mostly about what things are and how they connect, a structure type fits better.

Where to verify and try a type

1. Open the Diagram types section to see the full list of supported types.
2. Pick the type that matches your content and open its entry to see the syntax.
3. Use the Cheat sheet for a condensed reference of that syntax.
4. Check the Examples section for a working definition you can adapt.
5. Use the Try area to paste a definition and confirm it renders as expected.

The expected result at step 5 is a rendered diagram image from your text. If it does not render, the usual cause is a syntax error in the definition rather than an unsupported type — so first confirm the type appears in the Diagram types list, then compare your text against the cheat sheet or an example.

Common sticking points

• Mixing syntaxes. Each diagram type has its own syntax. A definition written for one type will not render under another, even if the two types look similar.
• Assuming a type exists. The supported set is defined by the site's list. Check the list before writing a long definition in a syntax Kroki may not accept.
• Skipping the examples. The examples are the fastest way to see the exact expected structure of a definition, including required opening and closing lines.

For a first diagram, the lowest-risk path is to copy an example from the Examples section, change its labels to your own, and confirm it renders in Try before expanding it.

The Kroki cheat sheet is a quick-reference page that collects syntax examples for the diagram types Kroki supports. It helps you look up the right syntax without leaving the site or digging through each diagram tool's own documentation. It is most useful when you already know roughly what you want to draw but need to confirm the exact keywords, structure, or options for a given diagram type.

What Kroki Is, in One Line

Kroki creates diagrams from textual descriptions. You write a text definition, and Kroki renders it as an image. The site's own heading puts it plainly: "Creates diagrams from textual descriptions!"

That means the cheat sheet is not a separate product. It is a supporting reference for the main service.

What the Cheat Sheet Actually Contains

Based on the site structure, the cheat sheet sits alongside the Try, Features, Examples, and Diagram types sections. Its role is to summarize syntax examples across the supported diagram types in one place.

In practice, that gives you:

• Syntax samples per diagram type — a starting point you can copy and adapt.
• A single lookup location — instead of opening the docs for Mermaid, PlantUML, Graphviz, and others separately.
• A bridge from "Diagram types" to "Try" — you see what a type looks like, then test it.

How It Helps Different Users

A Practical Workflow

1. Open the Diagram types section to find the kind of diagram you need.
2. Go to the Cheat sheet to see a syntax example for that type.
3. Copy the example.
4. Paste it into the Try section and edit it.
5. Check the rendered result.

The expected outcome at each step is simple: you move from "I know what I want to draw" to "I have a working text definition."

Common Sticking Points

• The cheat sheet is a reference, not a tutorial. It shows syntax; it does not explain every concept behind a diagram type.
• Syntax differs between diagram types. An example for one type will not work for another, so match the example to the type you selected.
• Examples are starting points. You will still need to replace placeholder content with your own.

When to Use It vs. Other Sections

• Use the Cheat sheet when you need to check or recall syntax.
• Use Examples when you want to see fuller, more realistic diagrams.
• Use Try when you want to test a definition immediately.
• Use Diagram types when you are deciding what kind of diagram fits your content.

If your goal is to get a diagram rendering quickly, the cheat sheet is the fastest route from an idea to a valid text definition.

Kroki turns textual descriptions into diagrams, so its main use cases all share one trait: the diagram source lives as text you can store, review, and regenerate. The most common situations are embedding diagrams in Markdown or AsciiDoc documentation, generating diagrams automatically in a CI/CD pipeline, collaborating on diagrams through version-controlled text, and avoiding GUI diagramming tools when you want a faster, scriptable workflow. If your diagram needs to be edited by hand in a visual editor or exported as a polished graphic for print, Kroki is a weaker fit.

Embedding diagrams in documentation

Kroki's site describes itself as creating "diagrams from textual descriptions," and its examples and diagram-type sections show that the input is a text block rather than a binary file. That makes it natural for docs written in Markdown, AsciiDoc, and similar formats.

The typical pattern:

1. Write a diagram definition in a supported text syntax (for example a PlantUML, Mermaid, or Graphviz block).
2. Reference it from your document, either by pointing at a Kroki URL or by using a plugin/extension that calls Kroki.
3. The rendered image appears in the built documentation.

Why this matters: the diagram source sits next to the prose in the same file or repo, so a change to the architecture description and the diagram can be reviewed in one commit.

Automating diagram generation in CI/CD

Because the input is text, diagram rendering can be a build step rather than a manual export.

A workable pipeline looks like this:

• Diagram source files are committed to the repository.
• The CI job sends each source to Kroki (or to a self-hosted Kroki instance) and receives an image.
• The generated image is published alongside the docs or attached to a release.

The payoff is that diagrams can't silently drift out of date: if the source changes, the next build regenerates the image. The trade-off is that the build now depends on Kroki being reachable, which is why teams that need offline or air-gapped builds often run their own instance instead of the public service.

Collaborating through text instead of a GUI

When several people maintain the same diagram, a text format is easier to diff and merge than a binary file from a drawing tool. A pull request that changes a node or an edge shows up as a readable line change.

This is the strongest argument for Kroki in team settings:

• Reviewers can comment on specific lines of the diagram definition.
• Merge conflicts are resolvable in text.
• History shows who changed what and when.

The limitation is that non-technical contributors may find the syntax harder than dragging boxes in a GUI editor.

Choosing between Kroki and a GUI tool

Pick Kroki when the diagram is part of a maintained codebase and you want it regenerated automatically. Pick a GUI tool when the diagram is a one-off visual that needs fine manual layout control.

When Kroki is not the right choice

• You need pixel-level manual positioning that text syntax can't express.
• Your build environment can't reach a Kroki instance and you don't want to host one.
• The people maintaining the diagram won't work in text.

For everything else — documentation diagrams, architecture sketches kept in a repo, and diagrams that should update with the code — Kroki's text-to-diagram model is the reason to use it.