Top Related Projects
Generation of diagrams like flowcharts or sequence diagrams from text in a similar manner as markdown
Generate diagrams from textual description
draw.io is a JavaScript, client-side editor for general diagramming.
Virtual whiteboard for sketching hand-drawn like diagrams
Structurizr DSL
D2 is a modern diagram scripting language that turns text to diagrams.
Quick Overview
Kroki is an open-source project that provides a unified API for creating diagrams from various textual descriptions. It supports multiple diagram types and rendering engines, allowing users to generate diagrams using plain text input in a consistent manner across different formats.
Pros
- Supports a wide range of diagram types (e.g., PlantUML, Mermaid, Graphviz)
- Offers a unified API for multiple diagram formats
- Can be self-hosted or used as a cloud service
- Integrates well with documentation tools and static site generators
Cons
- Requires setup and maintenance if self-hosted
- May have performance limitations for large or complex diagrams
- Learning curve for users unfamiliar with text-based diagram creation
- Depends on multiple external rendering engines
Code Examples
- Creating a simple PlantUML diagram:
import requests
url = "https://kroki.io/plantuml/svg"
diagram = """
@startuml
Alice -> Bob: Hello
Bob -> Alice: Hi there
@enduml
"""
response = requests.post(url, data=diagram.encode('utf-8'))
with open('diagram.svg', 'wb') as f:
f.write(response.content)
- Generating a Mermaid flowchart:
const axios = require('axios');
const fs = require('fs');
const url = 'https://kroki.io/mermaid/svg';
const diagram = `
graph TD
A[Start] --> B{Is it?}
B -->|Yes| C[OK]
C --> D[Rethink]
D --> B
B ---->|No| E[End]
`;
axios.post(url, diagram, { responseType: 'arraybuffer' })
.then(response => {
fs.writeFileSync('flowchart.svg', response.data);
})
.catch(error => console.error(error));
- Creating a Graphviz diagram:
require 'net/http'
require 'uri'
url = URI.parse('https://kroki.io/graphviz/svg')
diagram = <<-EOT
digraph G {
Hello -> World
}
EOT
response = Net::HTTP.post(url, diagram, 'Content-Type' => 'text/plain')
File.write('graph.svg', response.body)
Getting Started
To use Kroki, you can either self-host it or use the public instance at https://kroki.io. Here's a quick example using cURL:
curl -X POST --data-binary '@diagram.puml' https://kroki.io/plantuml/svg > diagram.svg
For more complex usage, you can use libraries in your preferred programming language to make HTTP requests to the Kroki API. Refer to the official documentation for detailed installation and usage instructions for self-hosting or integrating with various tools and frameworks.
Competitor Comparisons
Generation of diagrams like flowcharts or sequence diagrams from text in a similar manner as markdown
Pros of Mermaid
- Simpler setup and integration, especially for web-based applications
- Extensive documentation and large community support
- Client-side rendering, reducing server load
Cons of Mermaid
- Limited to specific diagram types (flowcharts, sequence diagrams, etc.)
- Less flexibility in customization compared to Kroki's multiple diagram tools
- Potential performance issues with large or complex diagrams
Code Comparison
Mermaid:
graph TD
A[Start] --> B{Is it?}
B -->|Yes| C[OK]
B -->|No| D[End]
Kroki:
@startuml
Alice -> Bob: Authentication Request
Bob --> Alice: Authentication Response
Alice -> Bob: Another authentication Request
Alice <-- Bob: Another authentication Response
@enduml
Summary
Mermaid is ideal for quick, web-based diagram creation with a focus on simplicity and ease of use. It's great for common diagram types and integrates well with web applications. However, it may lack the versatility and extensive diagram options that Kroki offers.
Kroki, on the other hand, provides a wider range of diagram types and tools, making it more suitable for complex or specialized diagramming needs. It requires server-side rendering but offers greater flexibility in diagram creation and customization.
Choose Mermaid for simple, web-focused diagramming, and Kroki for more diverse and complex diagramming requirements.
Generate diagrams from textual description
Pros of PlantUML
- Mature and widely adopted project with extensive documentation
- Supports a wide range of diagram types beyond just UML
- Large community and ecosystem of tools and integrations
Cons of PlantUML
- Limited to its own custom syntax for diagram creation
- Requires Java runtime, which can be a barrier for some users
- Less flexible in terms of output formats and customization options
Code Comparison
PlantUML syntax:
@startuml
Alice -> Bob: Hello
Bob --> Alice: Hi there
@enduml
Kroki (using PlantUML syntax):
https://kroki.io/plantuml/svg/eNpTyMlMTlWwVShWMABCCKWQk5mXrpCbn5eikJyfV6yQBgAqMQmV
Key Differences
Kroki is a unified API for creating diagrams from various textual descriptions, including PlantUML. It supports multiple diagram libraries and provides a consistent interface for generating diagrams. PlantUML, on the other hand, is a specific tool focused on creating UML and other diagrams using its own syntax.
Kroki offers more flexibility in terms of input formats and diagram types, while PlantUML provides a deeper integration with the UML ecosystem. Kroki is designed to be more lightweight and easier to deploy, especially in containerized environments, whereas PlantUML requires a Java runtime but offers more extensive features within its domain.
draw.io is a JavaScript, client-side editor for general diagramming.
Pros of draw.io
- Rich, interactive web-based diagram editor with a user-friendly interface
- Supports a wide range of diagram types and customization options
- Can be used both online and as a desktop application
Cons of draw.io
- Requires more user interaction for creating diagrams
- Steeper learning curve for advanced features
- Larger codebase and more complex setup for self-hosting
Code Comparison
draw.io (JavaScript):
var graph = new mxGraph(container);
var parent = graph.getDefaultParent();
graph.getModel().beginUpdate();
try {
var v1 = graph.insertVertex(parent, null, 'Hello,', 20, 20, 80, 30);
var v2 = graph.insertVertex(parent, null, 'World!', 200, 150, 80, 30);
var e1 = graph.insertEdge(parent, null, '', v1, v2);
} finally {
graph.getModel().endUpdate();
}
Kroki (PlantUML example):
@startuml
Alice -> Bob: Hello
Bob --> Alice: World
@enduml
Kroki focuses on converting text-based diagram descriptions into images, while draw.io provides a full-featured graphical editor. Kroki supports multiple diagram types through various libraries, whereas draw.io has its own comprehensive diagramming engine. The code examples illustrate the difference in approach: draw.io uses JavaScript for programmatic diagram creation, while Kroki uses simple text-based syntax for diagram description.
Virtual whiteboard for sketching hand-drawn like diagrams
Pros of Excalidraw
- User-friendly interface for creating hand-drawn style diagrams
- Real-time collaboration features
- Extensive library of pre-made shapes and elements
Cons of Excalidraw
- Limited to a specific drawing style
- Fewer diagram types compared to Kroki's wide range of supported formats
- May require more manual effort for complex diagrams
Code Comparison
Kroki (PlantUML example):
@startuml
Alice -> Bob: Hello
Bob --> Alice: Hi there
@enduml
Excalidraw (React component example):
import { Excalidraw } from "@excalidraw/excalidraw";
function App() {
return <Excalidraw />;
}
Summary
Kroki is a versatile diagram rendering service supporting multiple formats, while Excalidraw focuses on creating hand-drawn style diagrams with a user-friendly interface. Kroki excels in generating various diagram types from text-based descriptions, making it suitable for documentation and automated diagram generation. Excalidraw shines in collaborative, freeform diagramming with its intuitive design and real-time collaboration features. The choice between the two depends on the specific use case, with Kroki being more adaptable for different diagram types and Excalidraw offering a more interactive and visually distinct drawing experience.
Structurizr DSL
Pros of Structurizr DSL
- Focused specifically on software architecture diagrams
- Provides a textual DSL for creating architecture models
- Integrates well with other Structurizr tools and services
Cons of Structurizr DSL
- Limited to architecture diagrams, less versatile than Kroki
- Steeper learning curve for the specific DSL syntax
- Requires Structurizr ecosystem for optimal usage
Code Comparison
Structurizr DSL:
workspace {
model {
user = person "User"
softwareSystem = softwareSystem "Software System" {
webapp = container "Web Application"
database = container "Database"
}
}
views {
systemContext softwareSystem {
include *
autolayout lr
}
}
}
Kroki (PlantUML example):
@startuml
actor User
rectangle "Software System" {
[Web Application]
[Database]
}
User -> [Web Application]
[Web Application] -> [Database]
@enduml
While Structurizr DSL is tailored for software architecture, Kroki supports multiple diagram types and languages, making it more versatile for various diagramming needs. Structurizr DSL offers a more structured approach to architecture modeling, but Kroki provides greater flexibility across different diagram types.
D2 is a modern diagram scripting language that turns text to diagrams.
Pros of d2
- Native implementation in Go, potentially offering better performance
- Supports a custom domain-specific language (DSL) for creating diagrams
- Provides a CLI tool for easy diagram generation
Cons of d2
- Limited to its own DSL, while Kroki supports multiple diagram formats
- Smaller community and ecosystem compared to Kroki
- Fewer integrations with other tools and platforms
Code Comparison
d2:
shape: sequence_diagram
alice -> bob: Hello
bob -> alice: Hi
Kroki (using PlantUML):
@startuml
alice -> bob: Hello
bob -> alice: Hi
@enduml
Summary
d2 is a focused tool for creating diagrams using its custom DSL, offering a native Go implementation and a CLI tool. Kroki, on the other hand, is a more versatile solution that supports multiple diagram formats and has a larger ecosystem. While d2 may provide better performance for its specific use case, Kroki offers greater flexibility and integration options. The choice between the two depends on the user's specific needs and preferences for diagram creation.
Convert designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual CopilotREADME
= image:https://kroki.io/assets/logo.svg[Kroki,200,link={uri-kroki}] :uri-kroki: https://kroki.io/ :uri-kroki-docs: https://docs.kroki.io/ :uri-maven: https://maven.apache.org/
ifdef::env-github[] image:https://github.com/yuzutech/kroki/workflows/CI/badge.svg?branch=master[GitHub Actions build status, link=https://github.com/yuzutech/kroki/actions] image:https://img.shields.io/badge/zulip-join_chat-brightgreen.svg[Zulip chat, link=https://kroki.zulipchat.com/] endif::[]
{uri-kroki}[Kroki] provides a unified API with support for BlockDiag (BlockDiag, SeqDiag, ActDiag, NwDiag, PacketDiag, RackDiag), BPMN, Bytefield, C4 (with PlantUML), D2, DBML, Diagrams.net (experimental), Ditaa, Erd, Excalidraw, GraphViz, Mermaid, Nomnoml, Pikchr, PlantUML, SvgBob, Symbolator, UMLet, Vega, Vega-Lite, WaveDrom and WireViz... and more to come!
== Quickstart
This section offers a basic tutorial for evaluating Kroki. More comprehensive installation instructions are in the {uri-kroki-docs}[Kroki documentation].
== Usage
Kroki uses a simple algorithm (deflate + base64) to encode your diagram in the URL:
GET /plantuml/svg/SyfFKj2rKt3CoKnELR1Io4ZDoSa70000
You can also call Kroki with POST
:
POST /
[source,json]
{ "diagram_source": "Bob -> Alice : hello", "diagram_type": "plantuml", "output_format": "svg" }
In this case, you don't need to encode your diagram.
It's also possible to send your diagram as plain text using the Content-Type
header.
The output format will be specified using the Accept
header and the diagram source will be sent as the request body:
POST /plantuml
[source]
Accept: image/svg+xml Content-Type: text/plain
Bob -> Alice : hello
You can also define the output format in the URL if you don't want to add an Accept
header:
POST /plantuml/svg
[source]
Content-Type: text/plain
Bob -> Alice : hello
The same concept applies when sending the diagram as JSON:
POST /plantuml/svg [source,json]
{ "diagram_source": "Bob -> Alice : hello" }
== Project layout
Kroki has a modular architecture:
server:: A Java web server (powered by Vert.x) that acts as a gateway. Kroki server is built using {uri-maven}[Maven].
umlet:: A tiny Java API on top of UMlet (mini) to generate diagrams.
nomnoml:: A Node.js CLI on top of the Nomnoml diagram library.
vega:: A Node.js CLI on top of the vega diagram library. Also supports Vega-Lite concise grammar.
mermaid:: A companion web server written in JavaScript (powered by micro) that provides Mermaid diagram library.
bpmn:: A companion web server written in JavaScript (powered by micro) that provides bpmn-js diagram library.
bytefield:: A Node.js CLI on top of the bytefield-svg diagram library.
wavedrom:: A Node.js CLI on top of the wavedrom diagram library.
excalidraw:: A companion web server written in JavaScript (powered by micro) that provides Excalidraw.
diagrams.net:: A companion web server written in JavaScript (powered by micro) that provides diagrams.net.
== Build
=== Gateway Server
The first step is to build the project using Maven:
$ make buildServer
=== Docker Images
To build all the Docker images, use the following command:
$ sudo make buildDockerImages
NOTE: sudo
might not be needed depending on your distribution and docker
configuration.
== Run
Once the Docker images are built, you can run Kroki using docker
:
$ docker run -d -p 8000:8000 yuzutech/kroki
=== Companion Containers
If you want to use one of the following diagram libraries then you will also need to start the corresponding companion container:
yuzutech/kroki-mermaid:: Mermaid
yuzutech/kroki-bpmn:: BPMN
yuzutech/kroki-excalidraw:: Excalidraw
yuzutech/kroki-diagramsnet (experimental):: diagrams.net
You can use docker-compose
to run multiple containers:
.docker-compose.yml [source,yml]
services: core: image: yuzutech/kroki environment: - KROKI_MERMAID_HOST=mermaid - KROKI_BPMN_HOST=bpmn - KROKI_EXCALIDRAW_HOST=excalidraw ports: - "8000:8000" mermaid: image: yuzutech/kroki-mermaid expose: - "8002" bpmn: image: yuzutech/kroki-bpmn expose: - "8003" excalidraw: image: yuzutech/kroki-excalidraw expose: - "8004"
experimental!
diagramsnet: image: yuzutech/kroki-diagramsnet expose: - "8005"
$ docker-compose up -d
Top Related Projects
Generation of diagrams like flowcharts or sequence diagrams from text in a similar manner as markdown
Generate diagrams from textual description
draw.io is a JavaScript, client-side editor for general diagramming.
Virtual whiteboard for sketching hand-drawn like diagrams
Structurizr DSL
D2 is a modern diagram scripting language that turns text to diagrams.
Convert designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual Copilot