Rendering System

+

The Rendering System is one of the fundamental components of Keadex Mina. It is responsible for translating diagram code (PlantUML and JSON) into interactive, visually appealing diagrams.

The system is composed of two layers:

1. Rust Layer: Responsible for loading and parsing the diagram code.
2. Fabric.js Layer: Handles the rendering of the interactive diagram.

There are three main differences between the Keadex Mina Rendering System and the rendering systems of other diagrams as code tools:

1. Client-Side Execution: It runs on the client side and does not require a web server for execution, resulting in faster rendering.
2. Offline Capability: It functions even without an internet connection.
3. Interactive Editing: Users can modify the rendered diagram through the UI without involving any custom languages. The custom positions are saved in a JSON file, which is easily versionable with your version control system.

Dynamic Diagram

The following diagram describes the main flows involved in the rendering process.

Flows

[1] User → Frontend

Everything starts when a user opens a diagram from the Keadex Mina UI.

[2] Frontend → Controllers

The Mina Frontend invokes the Tauri commands exposed by the Diagram Controller in the Mina Backend to get the data of the diagram selected by the user in JSON format.

[3] Controllers → Repositories

The Diagram Controller invokes the Diagram Repository to read the code (JSON and PlantUML) of the diagram selected by the user.

[4] Repositories → Resolver

The Diagram Repository retrieves the Diagram Spec and PlantUML File System DAOs from the resolver to read from the file system the .json and .puml diagram files.

[5] Resolver → DAOs

The resolver returns the requested DAOs to the repository, which then uses them to read the files.

[6] DAOs → File System

The DAOs read the diagram files. More precisely:

• The Diagram Spec FS DAO reads the json file containing the diagram specs.
• The Diagram PlantUML FS DAO reads the puml file containing the diagram PlantUML code.

[7] DAOs → SerDes

The DAOs invokes the SerDes module to deserialize the json and puml files into Rust objects.

• To deserialize the json files, Mina leverages the Serde (opens in a new tab) library.
• To deserialize the puml files, Mina uses its own PlantUML Parser.

[8] SerDes → PlantUML Parser

The SerDes module invokes the PlantUML Parser to parse the read puml file.

[9] Frontend → C4 Model UI Kit

Once the Mina Frontend receives the diagram data from the backend, it calls the API of the C4 Model UI Kit to render the diagram.

[10] C4 Model UI Ki → C4 Model UI Kit

The C4 Model UI Kit uses the provided diagram specs and PlantUML code to instantiate, position, and render the C4 Model Fabric.js components that compose the diagram.