Intro to Pluto.jl
Pluto.jl is a package for Julia for creating reactive notebooks in your browser. A notebook is a series of cells of code which display their outputs inline. When a function or variable is changed in the Pluto, all affected cells are updated automatically. When you add user interface elements such as sliders, buttons, and text fields with PlutoUI.jl, a Pluto notebook becomes a powerful way to explore code interactively.
Intro to Kroki
Kroki is a unified API to create a panoply of diagrams from a variety of diagram specification languages. Kroki supports 22 different diagram specification languages and many of these languages like Mermaid, and Vega can support many more diagram types. All the diagrams supported can be defined simply from text descriptions. Kroki is run as a free service where you can send the text description of the diagram to the server and get an image back. If you want to run Kroki without an internet connection or keep your diagrams private, you can install a self-managed service on a local machine. Kroki.jl is a wrapper around the Kroki API
Kroki + Pluto
Static diagrams can be made using a variety of string macros provided by Kroki.jl. For example a PlantUML sequence diagram can be made using the plantuml string macro:
plantuml"Kroki -> Julia: Hello Julia!"Code language: Julia (julia)
Making diagrams interactively in Pluto is as simple as updating the string which defines the diagram. For example a text box could be used to update the name in the diagram above with a simple string interpolation. Note: it simpler to to interpolate the string and send it to the Kroki.diagram function than interpolating in a plantuml"..." macro string.
The demo on the right shows a Vega Lite diagram being interactively update from a data in a textbox. The raw input data is split into individual number and parsed as numbers. Then a vector of named tuples is created in the format of (category=1, value=15). This named data is then converted directly into JSON inside the piechart specification string.
data = parse.(Float64, split(replace(input_data, ',' => ' ')))
named_data = [(category=i, value=d) for (i,d) in enumerate(data)]
vl_piechart = """
{
"\$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"description": "A simple donut chart with embedded data.",
"data": {
"values": $(JSON.json(named_data))
},
"mark": {"type": "arc", "innerRadius": 50},
"encoding": {
"theta": {"field": "value", "type": "quantitative"},
"color": {"field": "category", "type": "nominal"}
},
"view": {"stroke": null}
}"""
Code language: Julia (julia)
If you want to explore these experiments for yourself, I’ve made a repository on my Github: PlutoKrokiPlayground. Leave me a star on Github if you enjoyed this project.