Mermaid flowchart shapes, edges and subgraphs

The sample uses the whole shape vocabulary, every edge kind and subgraphs that set their own direction, laid out without overlapping labels.

The shape vocabulary, every edge kind with labels, and subgraphs that group nodes into departments, with left-to-right and top-down direction.

Open PDFOpen in editorMarkdown file

Markdown source

Markdown · 42 lines
# Flowchart shapes, edges & subgraphs

```mermaid
flowchart TD
  a[rectangle] --> b(rounded) --> c([stadium])
  d[[subroutine]] --> e[(database)] --> f((circle))
  g{diamond} --> h{{hexagon}} --> i[/parallelogram/]
  j[\trapezoid/] --> k>asymmetric] --> l(((double circle)))
```

```mermaid
flowchart LR
  A --> B --- C
  C -.-> D
  D ==> E
  E --o F
  F --x G
  G <--> H
  H ---->|a long labeled edge| I
```

Solid, dotted, thick, open-circle, cross and two-headed arrows. Subgraphs group nodes and can carry their own direction:

```mermaid
flowchart LR
  subgraph store[Store]
    direction TB
    pos[Point of sale] --> till[(Till records)]
  end
  subgraph hq[Head office]
    direction TB
    etl[Nightly load] --> dw[(Data warehouse)] --> bi[Dashboards]
  end
  subgraph suppliers[Suppliers]
    s1[Fresh produce]
    s2[Packaged goods]
  end
  till --> etl
  bi -->|reorder points| s1
  bi -->|reorder points| s2
  s1 & s2 --> store
```

Rendered pages

PDF · 1 page · 17 KB
  1. Flowchart shapes, edges & subgraphs, page 1 of 1

The sample documents describe invented organizations in several countries. All names and figures are illustrative.

Mermaid diagrams in Markdown to PDF: every sampleIn the Markdown reference