Diagrammix Command Driven Diagramming

Syntax reference

Flowchart

Direction of the graph layout
```
graph LR
A-->B
```
```
graph TB
A-->B
```
A node
```
graph LR
id1
```

A node with text

graph LR
id1[This is the text in the box]

A node with round edges

graph LR
id1(This is the text in the box);

A node in the form of a circle

graph LR
id1((This is the text in the circle));

A node in an asymetric shape

graph LR
id1>This is the text in the box]

A node (rhombus)

graph LR
id1{This is the text in the box}

A link with arrow head
```
A-->B
```
An open link
```
A---B
```

Text on links

A-- This is the text --- B

A---|This is the text|B;

A link with arrow head and text
```
A-->|text|B
```
```
A-- text -->B
```
Dotted link
```
A-.->B
```
Dotted link with text
```
A-. text .->B
```
Thick link
```
A==>B
```
Thick link with text
```
A== text ==>B
```
Text within quotes to render special characters
```
graph LR
d1["This is the (text) in the box"]
```

Entity codes to escape characters

graph LR
A["A double quote:#quot;"] -->B["A dec char:#9829;"]

Subgraphs

graph TB
subgraph one
a1-->a2
end
subgraph two
b1-->b2
end
subgraph three
c1-->c2
end
c1-->a2

Styling a node

graph LR
id1(Start)-->id2(Stop)
style id1 fill:#f9f,stroke:#333,stroke-width:4px;
style id2 fill:#ccf,stroke:#f66,stroke-width:2px,stroke-dasharray: 5, 5;

classDef className fill:#f9f,stroke:#333,stroke-width:4px;
class nodeId1 className;

Sequence diagram

Participants (optional)

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

Solid line without arrow
```
sequenceDiagram
A->B: message
```
Dotted line without arrow
```
sequenceDiagram
A-->B: message
```
Solid line with arrowhead
```
sequenceDiagram
A->>B: message
```
Dotted line with arrowhead
```
sequenceDiagram
A-->>B: message
```
Solid line with a cross at the end (async)
```
sequenceDiagram
A-xB: message
```
Dotted line with a cross at the end (async)
```
sequenceDiagram
A--xB: message
```

Activation/deactivation

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

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

Activation to the same actor

sequenceDiagram
Alice->>+John: Hello John, how are you?
Alice->>+John: John, can yoy hear me?
John-->>-Alice: Hi Alice, I can hear you!
John-->>-Alice: I feel great!

Notes right of, left of, over actor

sequenceDiagram
participant John
Note right of John: Text in note

Notes spanning two participants

sequenceDiagram
Alice->John: Hello John, how are you?
Note over Alice,John: A typical interaction

Loops

sequenceDiagram
Alice->John: Hello John, how are you?
loop Reply every minute
John-->Alice: Great!
end

Alternative paths

sequenceDiagram
Alice->>Bob: Hello Bob, how are you?
alt is sick
Bob->>Alice: Not so good :(
else is well
Bob->>Alice: Feeling fresh like a daisy
end
opt Extra response
Bob->>Alice: Thanks for asking
end

Samples

RUN DEMO

Generated diagram

LINK TO VIEW LINK TO EDIT ACTUAL SIZE

Commands
Style

Default Forest Dark