Diagrams

Diagrams are one of the secret superpowers of Dendron. They're really useful for exploring ideas in a different way, and they're also useful for consistently representing information with a common template.

Mermaid

Dendron uses a popular Javascript framework for building diagrams called Mermaid.

To use Mermaid diagrams you create a code block and tell Dendron that the type of stuff in code block is a Mermaid diagram. For example:

```mermaid
graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
```

makes:

graph TD; A-->B; A-->C; B-->D; C-->D;

Mermaid supports the following types of diagrams:

Flowcharts:

graph TD Start --> Stop

Sequence diagrams:

sequenceDiagram Alice->>John: Hello John, how are you? John-->>Alice: Great!

Class diagrams:

classDiagram classA --|> classB : Inheritance classC --* classD : Composition classE --o classF : Aggregation classG --> classH : Association classI -- classJ : Link(Solid) classK ..> classL : Dependency classM ..|> classN : Realization classO .. classP : Link(Dashed)

State diagrams:

stateDiagram-v2 [*] --> Still Still --> [*] Still --> Moving Moving --> Still Moving --> Crash Crash --> [*]

Entity Relationship Diagrams:

erDiagram CUSTOMER ||--o{ ORDER : places ORDER ||--|{ LINE-ITEM : contains CUSTOMER }|..|{ DELIVERY-ADDRESS : uses

User Journey:

journey title My working day section Go to work Make tea: 5: Me Go upstairs: 3: Me Do work: 1: Me, Cat section Go home Go downstairs: 5: Me Sit down: 5: Me

GANTT charts:

gantt title A Gantt Diagram dateFormat YYYY-MM-DD section Section A task :a1, 2014-01-01, 30d Another task :after a1 , 20d section Another Task in sec :2014-01-12 , 12d another task : 24d

Pie charts

pie title Key elements in Product X "Calcium" : 42.96 "Potassium" : 50.05 "Magnesium" : 10.01 "Iron" : 5

Concept mapping

Unfortunately Mermaid doesn't yet support the kind conceptual, ontological maps I like to use. There's very little that's lightweight enough to be useful in notes and supports this kind of diagram.

You can use some of the Mermaid features to get close, though you can't offer different views through the same dataset.

Mermaid

Concept mapping