David J Nevin+= Code

Last updated: Jun 27, 2022

PlantUML: First Attempts

Let’s try out PlantUML

PlantUML seems at first glance somewhat similar to Mermaid but with a wider function list.

Following instructions from Paul Dugas I set up a shortcode and added a js file to the assets>static folder.

Let’s see:

Image added from PlantUML server to local assets once I installed and setup local PlantUML server.

Hey that worked!

Code:

100
101
102
{{< plantuml id="example" >}}
David -> Nevin: J
{{< /plantuml >}}

The id created a <img id="plantuml-example"... tag.

Back to linked lists

First some experimentation with sequences.

But wait

The above PlantUML image is stored and pulled from http://www.plantuml.com/plantuml/img/ut99BCjCKT2rK_1BBSlCirBmuW80. That’s not ideal. I’d prefer to use a local server and output the image into my assets>images folder.

So for my MacOS following these instructions:

100
101
brew install --cask temurin
brew install graphviz

Then tried this in an *.md file.

100
101
102
@startuml
David -> Nevin: J
@enduml

No joy.

Install a previewer in VSCOde.

I installed the PlantUML Previewer extension and it started to work. I have to create *.puml files.

Next step is to see how I can process these files into SVG, and save them into the images folder. Beginning to think maybe I’m over thinking the problem. Mightn’t it be easier to just create the images I want in an image editor.

But I know the answer to that already. I want something I can source control and also use git diff with. An image file won’t give me that.

So, I can experiment with *.puml files but can’t output the svg file yet.

And then, I managed to export the svg below with minimum hassle.

Hello World in PlantUML

Ok, I’ve found a stackoverflow question that shows some real promise in terms of me showing a linked list.

Database Schema from Stackoverflow

That’s enough for tonight. Educative’s Data Structures and Algorithms in Python awaits.


Next: Arrays Educative
Previous: Mermaid: First Attempts