Pickering Technologies

Pictures Above All - Introducing Mermaid to Communicate Processes

Mermaid is a JavaScript library that allows you to easily create diagrams and flowcharts using a simple markup language. Here's a tutorial on how to document complex technical designs and understandings using Mermaid.js:

Set up your environment:
To start using Mermaid, you will need to include the Mermaid JavaScript file in your HTML file. You can do this by downloading the file from the official Mermaid repository on GitHub, or by using a CDN link.
Create an HTML file with the following code:
Writing Mermaid code:
Mermaid uses a simple syntax to create diagrams. You can find the full syntax documentation on the Mermaid website.
Here are a few examples of diagrams you can create with Mermaid:
```
<!DOCTYPE html>
<html>
  <head>
    <script src="https://cdn.jsdelivr.net/npm/mermaid@8.8.2/dist/mermaid.min.js"></script>
  </head>
  <body>
    <div class="mermaid">
      
    </div>
    <script>
      mermaid.initialize({
        startOnLoad: true
      });
    </script>
  </body>
</html>
```
Flowchart Example
Rendered chart:
Code:
```
sequenceDiagram
    participant Alice
    participant Bob
    Alice->>John: Hello John, how are you?
    John-->>Alice: Hello Alice, I am good.
    Bob--x John: How about you John, how have you been?
    John--x Bob: I have been busy.
```
GANTT chart example
GANTT chart:
Code:
```
gantt
    dateFormat  YYYY-MM-DD
    title Adding GANTT diagram functionality to mermaid
    section A section
    Completed task            :done,    des1, 2014-01-06,2014-01-08
    Active task               :active,  des2, 2014-01-09, 3d
    Future task               :         des3, after des2, 5d
    Future task2              :         des4, after des3, 5d
    
```
Class diagram example
To display the following class diagram:
This is the code:
```
classDiagram
    class Employee{
        +int id
        +String name
        +String address
    }

    class Department{
        +int id
        +String name
        +List<Employee> employees
    }
```
Displaying the diagram:
Save the HTML file and open it in a web browser to see the diagram.
You can also use Mermaid to convert your diagram code into an image format, such as PNG, for use in other documents or presentations.

That's it! Mermaid is a powerful tool for documenting complex technical designs and understandings, and the syntax is easy to learn and use. Happy diagramming!

Pictures Above All - Introducing Mermaid to Communicate Processes

Set up your environment:

Writing Mermaid code:

Flowchart Example

GANTT chart example

Class diagram example

Displaying the diagram: