Diagrams

Misc

• Tools
  • Draw.io - Has a desktop app and a VS Code extension. Seems to be the one that Dancho uses.

Mermaid

Misc

• Resources
  • Docs, Theming, Cheatsheet, Quarto
• Currently mermaid code chunks cannot be placed below bullets

Examples

• Flowchart Top-Bottom (Source, Code)

%% Top-Bottom direction
flowchart TB
    %% Classes with styling
    classDef default color:#383838,fill:#FFF7F1,stroke-width:1px
    classDef external color:#383838,fill:#E6EEF8,stroke-width:1px
    classDef normal color:#081457,fill:#E3E6FC,stroke-width:1px
    classDef local fill:#FFC700,stroke:#333,stroke-width:1px
    classDef remote fill:#D2BDF2,stroke:#201434,stroke-width:1px
    classDef notouch fill:#F99697,stroke:#A4050E,stroke-width:1px

    %% Aliases, classes, and shapes applied to nodes
    GH[("@main")]:::remote
    MDOUT[("@md-outputs")]:::notouch
    PAGES[("@gh-pages")]:::notouch
    DEPLOY(["ci_deploy()"]):::external
    CIBUILDMD(["ci_build_markdown()"]):::external
    CIBUILDSITE(["ci_build_site()"]):::external

    %% Box around subset of nodes
    %% Aliases, classes, and shapes applied
    subgraph virtual machine
    REPO["[repo]"]:::local
    BUILT["[repo]/site/built"]:::local
    SITE["[repo]/site/docs"]:::local
    VLESS("validate_lesson()"):::normal
    BUILDMD(["build_markdown()"]):::normal
    BUILDSITE(["build_site()"]):::normal
    end

    %% Arrows and connection types
    GH ---> REPO
    REPO -.- VLESS
    DEPLOY ---> VLESS
    DEPLOY ---> CIBUILDMD
    DEPLOY ---> CIBUILDSITE
    VLESS -.- BUILDMD
    CIBUILDMD ---> MDOUT
    MDOUT <-.-> BUILT
    CIBUILDMD ---> BUILDMD
    CIBUILDSITE ---> PAGES
    PAGES <-.-> SITE
    CIBUILDSITE ---> BUILDSITE
    BUILT -.- BUILDSITE
    VLESS -.- BUILDSITE
    BUILDMD --> BUILT
    BUILDSITE --> SITE

%% Top-Bottom direction
flowchart TB
    %% Classes with styling
    classDef default color:#383838,fill:#FFF7F1,stroke-width:1px
    classDef external color:#383838,fill:#E6EEF8,stroke-width:1px
    classDef normal color:#081457,fill:#E3E6FC,stroke-width:1px
    classDef local fill:#FFC700,stroke:#333,stroke-width:1px
    classDef remote fill:#D2BDF2,stroke:#201434,stroke-width:1px
    classDef notouch fill:#F99697,stroke:#A4050E,stroke-width:1px

    %% Aliases, classes, and shapes applied to nodes
    GH[("@main")]:::remote
    MDOUT[("@md-outputs")]:::notouch
    PAGES[("@gh-pages")]:::notouch
    DEPLOY(["ci_deploy()"]):::external
    CIBUILDMD(["ci_build_markdown()"]):::external
    CIBUILDSITE(["ci_build_site()"]):::external

    %% Box around subset of nodes
    %% Aliases, classes, and shapes applied
    subgraph virtual machine
    REPO["[repo]"]:::local
    BUILT["[repo]/site/built"]:::local
    SITE["[repo]/site/docs"]:::local
    VLESS("validate_lesson()"):::normal
    BUILDMD(["build_markdown()"]):::normal
    BUILDSITE(["build_site()"]):::normal
    end

    %% Arrows and connection types
    GH ---> REPO
    REPO -.- VLESS
    DEPLOY ---> VLESS
    DEPLOY ---> CIBUILDMD
    DEPLOY ---> CIBUILDSITE
    VLESS -.- BUILDMD
    CIBUILDMD ---> MDOUT
    MDOUT <-.-> BUILT
    CIBUILDMD ---> BUILDMD
    CIBUILDSITE ---> PAGES
    PAGES <-.-> SITE
    CIBUILDSITE ---> BUILDSITE
    BUILT -.- BUILDSITE
    VLESS -.- BUILDSITE
    BUILDMD --> BUILT
    BUILDSITE --> SITE

• Flowchart Left-Right (Source, Code)

%% Left-Right direction
flowchart LR
    %% Classes with styling
    classDef default color:#383838,fill:#FFF7F1,stroke-width:1px
    classDef external color:#383838,fill:#E6EEF8,stroke-width:1px
    classDef normal color:#081457,fill:#E3E6FC,stroke-width:1px
    classDef local fill:#FFC700,stroke:#333,stroke-width:1px
    classDef remote fill:#D2BDF2,stroke:#201434,stroke-width:1px
    classDef notouch fill:#F99697,stroke:#A4050E,stroke-width:1px

    %% Classes and shapes applied to nodes
    WEEK[\"CRON weekly"\]:::remote
    MONTH[\"CRON monthly"\]:::remote

    %% Boxes around subsets of nodes
    %% Aliases, classes, and shapes applied
    subgraph MAIN WORKFLOW
    push[\"push to main"\]:::remote
    md-outputs[("md-outputs")]:::local
    gh-pages[("gh-pages")]:::local
    sandpaper-main.yaml:::normal
    end

    subgraph "UPDATES (requires SANDPAPER_WORKFLOW token)"
    update-cache.yaml:::normal
    update-workflows.yaml:::normal
    update-cache[("update/packages")]:::notouch
    update-workflows[("update/workflows")]:::notouch
    PR[/"pull request"/]:::remote
    end

    %% Arrows and connection types
    push --> sandpaper-main.yaml
    WEEK --> sandpaper-main.yaml
    sandpaper-main.yaml -.->|"pushes to"| md-outputs
    sandpaper-main.yaml -.->|"pushes to"| gh-pages
    WEEK --> update-cache.yaml
    MONTH --> update-workflows.yaml
    update-cache.yaml -.->|"pushes to"| update-cache
    update-workflows.yaml -.->|"pushes to"| update-workflows
    update-cache.yaml -.->|"creates"| PR
    update-workflows.yaml -.->|"creates"| PR

%% Left-Right direction
flowchart LR
    %% Classes with styling
    classDef default color:#383838,fill:#FFF7F1,stroke-width:1px
    classDef external color:#383838,fill:#E6EEF8,stroke-width:1px
    classDef normal color:#081457,fill:#E3E6FC,stroke-width:1px
    classDef local fill:#FFC700,stroke:#333,stroke-width:1px
    classDef remote fill:#D2BDF2,stroke:#201434,stroke-width:1px
    classDef notouch fill:#F99697,stroke:#A4050E,stroke-width:1px

    %% Classes and shapes applied to nodes
    WEEK[\"CRON weekly"\]:::remote
    MONTH[\"CRON monthly"\]:::remote

    %% Boxes around subsets of nodes
    %% Aliases, classes, and shapes applied
    subgraph MAIN WORKFLOW
    push[\"push to main"\]:::remote
    md-outputs[("md-outputs")]:::local
    gh-pages[("gh-pages")]:::local
    sandpaper-main.yaml:::normal
    end

    subgraph "UPDATES (requires SANDPAPER_WORKFLOW token)"
    update-cache.yaml:::normal
    update-workflows.yaml:::normal
    update-cache[("update/packages")]:::notouch
    update-workflows[("update/workflows")]:::notouch
    PR[/"pull request"/]:::remote
    end

    %% Arrows and connection types
    push --> sandpaper-main.yaml
    WEEK --> sandpaper-main.yaml
    sandpaper-main.yaml -.->|"pushes to"| md-outputs
    sandpaper-main.yaml -.->|"pushes to"| gh-pages
    WEEK --> update-cache.yaml
    MONTH --> update-workflows.yaml
    update-cache.yaml -.->|"pushes to"| update-cache
    update-workflows.yaml -.->|"pushes to"| update-workflows
    update-cache.yaml -.->|"creates"| PR
    update-workflows.yaml -.->|"creates"| PR

• Gitgraph (Source, Code)

gitGraph
    commit id: "abcd"
    commit id: "efgh" tag: "0.14.0"
    branch feature1
    branch feature2
    checkout main
    checkout feature1
    commit id: "ijkl"
    commit id: "mnop"
    checkout main
    merge feature1 tag: "customTag"
    checkout feature2
    commit id: "qrst"
    commit id: "uvwx"

gitGraph
    commit id: "abcd"
    commit id: "efgh" tag: "0.14.0"
    branch feature1
    branch feature2
    checkout main
    checkout feature1
    commit id: "ijkl"
    commit id: "mnop"
    checkout main
    merge feature1 tag: "customTag"
    checkout feature2
    commit id: "qrst"
    commit id: "uvwx"

• There’s an issue currently with adding id and type options to merge.

D2

• Resources
  • Quarto extension
  • Docs
  • SVG Sofware Architecture Icons
• Packages
  • {d2r} - Supports the creation, reading, writing, and rendering of D2 diagrams using R