Nori Architecture Diagrams

About

This repository uses mermaid and plant uml to assist in the ideation and creation of architecture architecture artifacts (such as sequence diagrams, UML, flow charts, gantt charts, etc)

• Generated diagrams can be found here (PNGs)
• Diagrams input specifications can be found here (Mermaid format) and here (PlantUML format)

Mermaid

Mermaid is best used for sequence diagrams and flow charts

Create a new diagram

Write the diagram in the mermaid/ folder. An example sequence diagram can be written like the following

sequenceDiagram
    Alice ->> Bob: Hello Bob, how are you?
    Bob-->>John: How about you John?
    Bob--x Alice: I am good thanks!
    Bob-x John: I am good thanks!
    Note right of John: Bob thinks a long<br/>long time, so long<br/>that the text does<br/>not fit on a row.

    Bob-->Alice: Checking with John...
    Alice->John: Yes... John, how are you?

Preview the Diagram

In VSCode, you can use mermaid preview to review the diagram changes in real-time

Or do it live here

Create the diagram image

yarn run generate

This will out put the diagram into the diagrams/ folder.

PlantUML

PlantUML is best used for UML and relation diagrams

Create a new diagram

See here for language specification

Preview the diagram

You can use vscode-plantuml to review the diagram changes in real-time

Or do it live here

Create the diagram image

You do this the same way described in the Mermaid section