Convert Figma logo to code with AI

yuzutech logokroki

Creates diagrams from textual descriptions!

2,898
218
2,898
128

Top Related Projects

71,459

Generation of diagrams like flowcharts or sequence diagrams from text in a similar manner as markdown

10,438

Generate diagrams from textual description

41,012

draw.io is a JavaScript, client-side editor for general diagramming.

Virtual whiteboard for sketching hand-drawn like diagrams

1,408

Structurizr DSL

16,701

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

  1. 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)
  1. 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));
  1. 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

71,459

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.

10,438

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.

41,012

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.

1,408

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.

16,701

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 Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

= 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