Skip to content

Latest commit

 

History

History
274 lines (201 loc) · 5.68 KB

flowchart.md

File metadata and controls

274 lines (201 loc) · 5.68 KB
Raw

Flowchart

The mermaid documentation describes Flowcharts as:

All Flowcharts are composed of nodes, the geometric shapes and edges, the arrows or lines. The mermaid code defines the way that these nodes and edges are made and interact.

In Siren, we attempt to use the language of mermaid.js as consitently as possible for building up your Flowcharts.

For example:

$flowchart = Siren::flowchart()
    ->direction(Direction::LEFT_TO_RIGHT)
    ->addNode($a = Node::make('A'))
    ->addNode($b = Node::make('B'))
    ->addNode($c = Node::make('C'))
    ->addLink(Link::make($a, $b))
    ->addLink(Link::make($b, $c))
    ->addLink(Link::make($c, $a));
flowchart LR
A
B
C
A --> B
B --> C
C --> A
Loading

 

 

Contents

 

 

Direction

Sets the direction the Flowchart flows in.

flowchart TD
  subgraph TD [TOP_DOWN or TOP_TO_BOTTOM]
    direction TB
    A --> B
    B --> C
  end

  subgraph BT [BOTTOM_TO_TOP]
    direction BT
    D --> E
    E --> F
  end

  subgraph LR [LEFT_TO_RIGHT]
    direction LR
    G --> H
    H --> I
  end

  subgraph RL [RIGHT_TO_LEFT]
    direction RL
    J --> K
    K --> L
  end
Loading

 

 

Node

Class: \Siren\Builder\Flowchart\Node

The Nodes are the building blocks you can use to build a flowchart.

$node = Node::make('NodeId')
    ->text('Text including html entities like ¢')
    ->shape(Shape::SQUARE);
flowchart TD
NodeId["Text including html entities like ¢"]
Loading

 

Shape

Enum: \Siren\Builder\Flowchart\Enums\Shape

Specify the shape of a Node using shape(Shape $shape).

flowchart TD
SQUARE[Shape::SQUARE] --- ROUND(Shape::ROUND)
STADIUM([Shape::STADIUM]) --- SUBROUTINE[[Shape::SUBROUTINE]]
CYLINDER[(Shape::CYLINDER)] --- ASYMMETRIC>Shape::ASYMMETRIC]
RHOMBUS{Shape::RHOMBUS} --- HEXAGON{{Shape::HEXAGON}}
CIRCLE((Shape::CIRCLE)) --- DOUBLE_CIRCLE(((Shape::DOUBLE_CIRCLE)))
PARALLELOGRAM[/Shape::PARALLELOGRAM/] --- PARALLELOGRAM_ALT[\Shape::PARALLELOGRAM_ALT\]
TRAPEZOID[/Shape::TRAPEZOID\] --- TRAPEZOID_ALT[\Shape::TRAPEZOID_ALT/]
Loading

 

 

Link

Class: \Siren\Builder\Flowchart\Link

The Links are the visual elements used to connect nodes together.

$link = Link::make($srcNode, $destNode)
    ->text('Text including html entities like ¢')
    ->line(Line::DOTTED)
    ->arrow(Arrow::DOT)
    ->span(3);
flowchart LR
src -...-o dest
Loading

 

Text

You can specify the text which appears on a Link using the text(string $text) method.

flowchart TD
A --- |A Link with text on it| B
Loading

 

Line

Enum: \Siren\Builder\Flowchart\Enums\Line

Define the type of line connecting the Nodes using the Link's line(Line $line) method.

flowchart TD
A ---|Line::SOLID|B
C -.-|Line::DOTTED|D
E ===|Line::THICK|F
Loading

 

Arrow

Enum: \Siren\Builder\Flowchart\Enums\Arrow

Specify the arrow on the Link Nodes. Mermaid.js only supports the following configurations:

  1. No arrows on either the source Node or destination Node

    • In this situation, you simply do not add any arrows to the Link

  2. One Arrow on the Destination Node

    • In this situation, you can call arrow(Arrow $arrow) on the Link to specify the type on the destination Node
    flowchart TD
A --- Arrow::NONE
C --> Arrow::ARROW
E --o Arrow::DOT
G --x Arrow::X
    Loading

  3. The same Arrow on both Nodes

    • In this situation, you can call multiArrow(Arrow $arrow) on the Link to specify the type on the both the source and destination Nodes
flowchart TD
A --- Arrow::NONE
C <--> Arrow::ARROW
E o--o Arrow::DOT
G x--x Arrow::X
Loading

 

Span

You can set the minimum number of ranks the Link should span using span(int $length) method.

For example in the following Flowchart, the link from A to E will at a minimum span 1 rank, even though E could have been placed on the second rank. And even though we specified J to have a minimum span of 2, because it is only a minimum, you can see the other connections to J, make the Link actually span 3 ranks.

flowchart LR
A --> B
B --> C
C --> D
A ---> E
A ----> F
A --> G
G --> H
H --> I
I --> J
A ----> J
Loading

 

 

Subgraph

Flowcharts (also called graphs) can be composed of zero or many Subgraphs. Each Subgraph functions as its own independent Flowchart, but when combined into a larger graph it also behaves like a node. This means you can Link from Subgraph to Subgraph or Node to Subgraph or vica-versa. You can also access nodes from anywhere in the entire Flowchart from inside a Subgraph.

Simliarly to a Node, a Subgraph can have a title different from its id by using the title() method.

$flowchart = Siren::graph()
    ->addSubgraph($sga = Subgraph::make('SGA'))
    ->addSubgraph($sgb = Subgraph::make('SGB')->title('Subgraph Title B'));

$sga->addNode($a = Node::make('A'))
    ->addNode($b = Node::make('B'))
    ->addLink($a, $b)
    ->addLink($b, $a);

$sgb->addNode($c = Node::make('C'))
    ->addNode($d = Node::make('D'))
    ->addLink($c, $d)
    ->addLink($d, $c);

$flowchart->addLink(Link::make($b, $sgb))
    ->addLink(Link::make($c, $sga));
flowchart LR
    subgraph SGA
        direction LR
        A --- B
        B --- A
    end

    subgraph SGB [Subgraph Title B]
        direction LR
        C --- D
        D --- C
    end

    B --- SGB
    C --- SGA
Loading