Playing with Mermaid.js

Explore All The Tools
diagram
tool
visualize
analysis
Published

December 12, 2022

Exchanging Pen And Paper.

My friends and I are playing V Rising on Sundays and we’ve made it to the point where we’re working on Dark Silver.This is an end game resource which is a few levels deep into the game. And, it is also a few levels deep into the resource management of the game. We’ve had to build a new castle further into the game. While setting this, up we were discussing the best way to build a pipeline from basic resources to Dark Silver. I did quick sketch on paper but realized that - thanks to Quarto - I have some extra tooling to play with for this.

Let’s Try Mermaid

So, looking over some of the tools, I though that Mermaid looks like it would be new and useful. Like other visualization tools, there is a notation which connects the nodes and edges together. And, Mermaid.js no exception coming with some common shapes for representing each.

Obviously, we have the normal shapes:

``````flowchart LR
square[This is a box]
rounded(This is a Rounded Edge)
bubble([This is a bubble])
boxinbox[[This is flatland]]``````

```flowchart LR
square[This is a box]
rounded(This is a Rounded Edge)
bubble([This is a bubble])
boxinbox[[This is flatland]]
```

We can also add edges of the common kind as well:

``````flowchart
square[This is a box]
rounded(This is a Rounded Edge)
bubble([This is a bubble])
boxinbox[[This is flatland]]

square --> rounded
rounded --- bubble
bubble -.-> boxinbox
boxinbox ==>| Insert Text for description|square``````

```flowchart
square[This is a box]
rounded(This is a Rounded Edge)
bubble([This is a bubble])
boxinbox[[This is flatland]]

square --> rounded
rounded --- bubble
bubble -.-> boxinbox
boxinbox ==>| Insert Text for description|square
```

You can also add classes to style the nodes which we’ll do next as we start.

Chain Up the Resources

In V Rising, there are the Resouces which get fed into buildings that act as ways to convert them into other resources. The buildings we’ll need for this resource pipeline are Grinders and Furnaces. So, let’s quickly style these before anything else. I will also want a node which is for the Resource being put into the building/node.

``````flowchart RL

classDef Furnace fill:#696969, color:#f9f9f9;
classDef Grinder fill:#b9b9b9, color:#0a0a0a;
classDef Resource fill:#009F4B, color:#000000;

furnace1[(Furnace)]:::Furnace
grinder1[(Grinder)]:::Grinder

stone> Stone]:::Resource``````

```flowchart RL

classDef Furnace fill:#696969, color:#f9f9f9;
classDef Grinder fill:#b9b9b9, color:#0a0a0a;
classDef Resource fill:#009F4B, color:#000000;

furnace1[(Furnace)]:::Furnace
grinder1[(Grinder)]:::Grinder

stone> Stone]:::Resource
```

I wanted these to be visually distinct from one another so bright resource and contrasting colors for the furnace and grinder. Now we can start working through the relationships. I like to kind of work from both sides of this and fill in the middle as I go. Let’s start with the result - Dark Silver - and the base resources.

``````flowchart RL

classDef Furnace fill:#696969, color:#f9f9f9;
classDef Grinder fill:#b9b9b9, color:#0a0a0a;
classDef Resource fill:#009F4B, color:#000000;

furnace1[(Furnace)]:::Furnace
grinder1[(Grinder)]:::Grinder

stone> Stone]:::Resource
darkSilver> Dark Silver]:::Resource
copperOre>     Copper Ore]:::Resource
silverOre> Silver Ore]:::Resource``````

```flowchart RL

classDef Furnace fill:#696969, color:#f9f9f9;
classDef Grinder fill:#b9b9b9, color:#0a0a0a;
classDef Resource fill:#009F4B, color:#000000;

furnace1[(Furnace)]:::Furnace
grinder1[(Grinder)]:::Grinder

stone> Stone]:::Resource
darkSilver> Dark Silver]:::Resource
copperOre>     Copper Ore]:::Resource
silverOre> Silver Ore]:::Resource
```

Now we just start connecting them. I liked using the dotted lines for raw resources since it adds a little extra bit showing they’re slightly different than the others:

``````flowchart TD

classDef Furnace fill:#696969, color:#f9f9f9;
classDef Grinder fill:#b9b9b9, color:#0a0a0a;
classDef Resource fill:#009F4B, color:#000000;

furnace1[(Furnace)]:::Furnace
furnace2[(Furnace)]:::Furnace
furnace4[(Furnace)]:::Furnace

grinder1[(Grinder)]:::Grinder
grinder2[(Grinder)]:::Grinder

stone> Stone]:::Resource
darkSilver> Dark Silver]:::Resource
copperOre>     Copper Ore]:::Resource
silverOre> Silver Ore]:::Resource
copper> Copper Ingots]:::Resource

furnace4-->darkSilver
bones-.->grinder1
stone-.->grinder2
copperOre-.->furnace1

furnace1-->copper``````

```flowchart RL

classDef Furnace fill:#696969, color:#f9f9f9;
classDef Grinder fill:#b9b9b9, color:#0a0a0a;
classDef Resource fill:#009F4B, color:#000000;

furnace1[(Furnace)]:::Furnace
furnace2[(Furnace)]:::Furnace
furnace4[(Furnace)]:::Furnace

grinder1[(Grinder)]:::Grinder
grinder2[(Grinder)]:::Grinder

stone> Stone]:::Resource
darkSilver> Dark Silver]:::Resource
copperOre>     Copper Ore]:::Resource
silverOre> Silver Ore]:::Resource
copper> Copper Ingots]:::Resource

furnace4-->darkSilver
bones-.->grinder1
stone-.->grinder2
copperOre-.->furnace1

furnace1-->copper
```

Anyways, let’s skip to the end now that you understand how these pieces go together; it’s just the same all the way to the end.

Final Graph

``````flowchart BT

classDef Furnace fill:#696969, color:#f9f9f9;
classDef Grinder fill:#b9b9b9, color:#0a0a0a;
classDef Resource fill:#009F4B, color:#000000;

furnace1[(Furnace)]:::Furnace
furnace2[(Furnace)]:::Furnace
furnace3[(Furnace)]:::Furnace
furnace4[(Furnace)]:::Furnace
furnace5[(Furnace)]:::Furnace

grinder1[(Grinder)]:::Grinder
grinder2[(Grinder)]:::Grinder

darkSilver> Dark Silver]:::Resource
copperOre>     Copper Ore]:::Resource
silverOre> Silver Ore]:::Resource
copper> Copper Ingots]:::Resource
stoneDust>  Stone Dust]:::Resource
graveDust> Grave Dust]:::Resource
quartz> Quartz]:::Resource
bones> Bones]:::Resource
scourge> Scourge Stone]:::Resource
whet> Whetstones]:::Resource
glass> Glass]:::Resource
stone> Stone]:::Resource

stone-.->grinder2
grinder2-->stoneDust

copperOre-.->furnace1
furnace1-->copper

quartz-.->furnace5
furnace5-->glass

silverOre-.->furnace4

bones-.->grinder1
grinder1-->graveDust
graveDust-->furnace3

copper-->furnace2
stoneDust-->furnace2
furnace2-->whet
whet-->furnace3

glass-->furnace3
furnace3-->scourge

scourge-->furnace4
furnace4-->darkSilver``````

```flowchart BT

classDef Furnace fill:#696969, color:#f9f9f9;
classDef Grinder fill:#b9b9b9, color:#0a0a0a;
classDef Resource fill:#009F4B, color:#000000;

furnace1[(Furnace)]:::Furnace
furnace2[(Furnace)]:::Furnace
furnace3[(Furnace)]:::Furnace
furnace4[(Furnace)]:::Furnace
furnace5[(Furnace)]:::Furnace

grinder1[(Grinder)]:::Grinder
grinder2[(Grinder)]:::Grinder

darkSilver> Dark Silver]:::Resource
copperOre>     Copper Ore]:::Resource
silverOre> Silver Ore]:::Resource
copper> Copper Ingots]:::Resource
stoneDust>  Stone Dust]:::Resource
graveDust> Grave Dust]:::Resource
quartz> Quartz]:::Resource
bones> Bones]:::Resource
scourge> Scourge Stone]:::Resource
whet> Whetstones]:::Resource
glass> Glass]:::Resource
stone> Stone]:::Resource

stone-.->grinder2
grinder2-->stoneDust

copperOre-.->furnace1
furnace1-->copper

quartz-.->furnace5
furnace5-->glass

silverOre-.->furnace4

bones-.->grinder1
grinder1-->graveDust
graveDust-->furnace3

copper-->furnace2
stoneDust-->furnace2
furnace2-->whet
whet-->furnace3

glass-->furnace3
furnace3-->scourge

scourge-->furnace4
furnace4-->darkSilver
```

Past this, we could include rates of production for each furnace and start calculating how long each edge takes and naming them. This is starting to feel like Satisfactory and this is really all I needed to share with my friends. Hopefully, you find this library as useful as I am going to.