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'))withopen('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.
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.
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.
@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.
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.
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.
{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
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.