Do you need a way to easily create diagrams from textual descriptions for you website? Sounds like a match. Today, I'm going to present you a nice webservice to meet your requirements.
Kroki provides a unified API for creating diagrams from textual descriptions using multiple underlying platforms, like: BlockDiag, Excalidraw, GraphViz, Mermaid or PlantUML. The entire service is free and no cost is expecting from your point of view. In addition, their solution is available on Github. You can use the service as it is, our you have also the ability to host your own service.
I'm currently using their service to easily draw different type of diagrams. Since this blog is technical, diagrams are quite important to illustrate multiple concepts. Maybe for you is not the same case, so, I encourage you to analyze properly if meets your actual needs.
Based on a textual description, Kroki will build a diagram for you which will be exposed like an image. Multiple formats for final image are available: png, jpeg or svg. SVGs are far smaller in size than the other types, this is why SVG format is the one recommended. In order to avoid any performance impact on your website by calling an external system every time when an image is displayed, you have the ability to save this image locally and to reuse it. Nice, huh?
Let me show you some examples, to prove how powerful this tool is:
Use GraphViz to draw diagrams
Code:
digraph G {Hello->World}Output:
Code:
skinparam monochrome true
skinparam ranksep 20
skinparam dpi 150
skinparam arrowThickness 0.7
skinparam packageTitleAlignment left
skinparam usecaseBorderThickness 0.4
skinparam defaultFontSize 12
skinparam rectangleBorderThickness 1
rectangle "Main" {
(main.view)
(singleton)
}
rectangle "Base" {
(base.component)
(component)
(model)
}
rectangle "<b>main.ts</b>" as main_ts
(component) ..> (base.component)
main_ts ==> (main.view)
(main.view) --> (component)
(main.view) ...> (singleton)
(singleton) ---> (model)Output:
Happy coding! :)
