Layout examples

Layouts, looks and icon packs, from examples/ in the repository. Each one lints clean, and the build fails if that changes.

Why these are images

ELK layouts, the hand-drawn look and icon packs need mermaid add-ons a host may not load. Each image was drawn with the mermaid CLI, and its source sits beside it.

Architecture beta iconify logos

Source: examples/architecture_beta_iconify_logos.mmd

architecture-beta
    group ingress(logos:aws)[Ingress]
        service dns(logos:aws-route53)[Route 53] in ingress
        service cdn(logos:aws-cloudfront)[CloudFront] in ingress

    group web(logos:aws-elb)[Web Tier]
        service alb(logos:aws-elb)[Load Balancer] in web
        service server(logos:aws-ec2)[Web Servers] in web

    group app(logos:aws-ecs)[App Tier]
        service worker(logos:aws-lambda)[Worker] in app
        service api(logos:aws-ecs)[App Service] in app

    group data(logos:aws-rds)[Data Tier]
        service cache(logos:aws-elasticache)[Redis Cache] in data
        service db(logos:aws-rds)[Primary DB] in data
        service replica(logos:aws-rds)[Read Replica] in data

    dns:R -[request]-> L:cdn
    cdn:R -[route]-> L:alb
    alb:R -[forward]-> L:server
    server:R -[dispatch]-> L:worker
    worker:R -[process]-> L:api
    api:R -[read]-> L:cache
    cache:R -[query]-> L:db
    db:R -[replicate]-> L:replica
%% expect: none

Flowchart fontawesome icons

Source: examples/flowchart_fontawesome_icons.mmd

flowchart LR
    subgraph Ingress
        dns["fa:fa-globe Route 53"]
        cdn["fa:fa-cloud CloudFront"]
    end
    subgraph web["Web Tier"]
        alb["fa:fa-random Load Balancer"]
        web1["fa:fa-desktop Web 1"]
        web2["fa:fa-desktop Web 2"]
    end
    subgraph app["App Tier"]
        api["fa:fa-cog App Service"]
        worker["fa:fa-bolt Worker"]
    end
    subgraph data["Data Tier"]
        cache["fa:fa-bolt Redis Cache"]
        db[("fa:fa-database Primary DB")]
        replica[("fa:fa-copy Read Replica")]
    end

    dns --> cdn
    cdn --> alb
    alb --> web1
    alb --> web2
    web1 --> api
    web2 --> api
    api --> cache
    api --> db
    worker --> db
    db -- replication --> replica
%% expect: none

Layout cosebilkent mindmap

Source: examples/layout_cosebilkent_mindmap.mmd

---
config:
  layout: cose-bilkent
  look: classic
  theme: default
---
mindmap
  root((Platform))
    Ingress
      CDN
      Load Balancer
    Compute
      API
      Worker
    Data
      Cache
      Primary DB
      Object Store
%% expect: none

Layout dagre classic

Source: examples/layout_dagre_classic.mmd

---
config:
  layout: dagre
  look: classic
  theme: default
---
flowchart LR
    user([User]) --> edge[CDN / Edge]
    edge --> lb[Load Balancer]
    lb --> api1[API Server 1]
    lb --> api2[API Server 2]
    api1 --> cache[(Cache)]
    api2 --> cache
    api1 --> db[(Primary DB)]
    api2 --> db
    api1 --> queue[[Job Queue]]
    api2 --> queue
    queue --> worker[Worker]
    worker --> db
    worker --> store[(Object Store)]
    db -. replicate .-> replica[(Read Replica)]
%% expect: none

Layout dagre handdrawn

Source: examples/layout_dagre_handdrawn.mmd

---
config:
  layout: dagre
  look: handDrawn
  handDrawnSeed: 1
  theme: default
---
flowchart LR
    user([User]) --> edge[CDN / Edge]
    edge --> lb[Load Balancer]
    lb --> api1[API Server 1]
    lb --> api2[API Server 2]
    api1 --> cache[(Cache)]
    api2 --> cache
    api1 --> db[(Primary DB)]
    api2 --> db
    api1 --> queue[[Job Queue]]
    api2 --> queue
    queue --> worker[Worker]
    worker --> db
    worker --> store[(Object Store)]
    db -. replicate .-> replica[(Read Replica)]
%% expect: none

Layout dagre neo

Source: examples/layout_dagre_neo.mmd

---
config:
  layout: dagre
  look: neo
  theme: default
  useGradient: true
  gradientStart: "#ede9fe"
  gradientStop: "#a78bfa"
  dropShadow: true
---
flowchart LR
    user([User]) --> edge[CDN / Edge]
    edge --> lb[Load Balancer]
    lb --> api1[API Server 1]
    lb --> api2[API Server 2]
    api1 --> cache[(Cache)]
    api2 --> cache
    api1 --> db[(Primary DB)]
    api2 --> db
    api1 --> queue[[Job Queue]]
    api2 --> queue
    queue --> worker[Worker]
    worker --> db
    worker --> store[(Object Store)]
    db -. replicate .-> replica[(Read Replica)]
%% expect: none

Layout elk default

Source: examples/layout_elk_default.mmd

---
config:
  layout: elk
  look: classic
  theme: default
---
flowchart LR
    user([User]) --> edge[CDN / Edge]
    edge --> lb[Load Balancer]
    lb --> api1[API Server 1]
    lb --> api2[API Server 2]
    api1 --> cache[(Cache)]
    api2 --> cache
    api1 --> db[(Primary DB)]
    api2 --> db
    api1 --> queue[[Job Queue]]
    api2 --> queue
    queue --> worker[Worker]
    worker --> db
    worker --> store[(Object Store)]
    db -. replicate .-> replica[(Read Replica)]
%% expect: none

Layout elk tuned

Source: examples/layout_elk_tuned.mmd

---
config:
  layout: elk
  look: classic
  theme: default
  elk:
    mergeEdges: true
    nodePlacementStrategy: LINEAR_SEGMENTS
---
flowchart LR
    user([User]) --> edge[CDN / Edge]
    edge --> lb[Load Balancer]
    lb --> api1[API Server 1]
    lb --> api2[API Server 2]
    api1 --> cache[(Cache)]
    api2 --> cache
    api1 --> db[(Primary DB)]
    api2 --> db
    api1 --> queue[[Job Queue]]
    api2 --> queue
    queue --> worker[Worker]
    worker --> db
    worker --> store[(Object Store)]
    db -. replicate .-> replica[(Read Replica)]
%% expect: none

Layout tidytree mindmap

Source: examples/layout_tidytree_mindmap.mmd

---
config:
  layout: tidy-tree
  look: classic
  theme: default
---
mindmap
  root((System))
    Ingress
      CDN
      Load Balancer
    Compute
      API
      Worker
    Data
      Cache
      Primary DB
      Object Store
%% expect: none