Below is a flow diagram generated in this page via Notion’s new Mermaid code-block mode.
It summarises the main strands of my “webclipping frenzy” yesterday (about one webpage every 5 minutes over 10 hours).
Box border thickness represents degree of focus which corresponded in practice to time/energy spent (e.g. careful writing or numerous webpages visited)
Box colour Orange represents linked i.e. clickable (which I understand to be a beta feature of Mermaid)
I’m just playing with diagrammatic conventions here, feeling-out what works for me.
Tip: To see and/or play with the code that generated this diagram, hover over the top-left of the block, then choose the view-mode: Split.
flowchart TD
Mermaid:::frenzy-->NonBreakableSpace-->ReportTo --> NotionHQ & MermaidOnGithub
MermaidOnGithub-->GitHub:::frenzy
Mermaid-->Mermaids_FlowchartsArticle:::linked_frenzy-->SpecialChars:::linked
Diagrams.net--> GitHub
Mermaid-->DiagramTypes-->ZILLIONSOFTANGENTS["ZILLIONS OF TANGENTS #129325;"]:::frenzy-->ZILLIONSOFTANGENTS
Mermaids_FlowchartsArticle-->Share-->Tw_Notion & Tw_Nerd
Mermaid-->Yt_Nutt_FlowchartGenerator["William Nutt's<br/>Flowchart Generator<br/>."]:::linked
%% final <br/> workaround for box size bug
Mermaids_FlowchartsArticle-->WebSrch_YedToMermaid
MiscTangents:::frenzy--> GitHub & CSS & AS-ADHD & Datamining
WebSrch_YedToMermaid:::frenzy-->Diagrams.net:::frenzy
GitHub-->GitLab & MediaProduction_InGit
MediaProduction_InGit-->MediaProduction_Tools-->MediaProduction_InCloud & Linux & VFX & AWS & Deep & OBS
VFX-->Blender & AfterEffects_Alternatives
classDef default fill:#000,stroke:#4499bb,stroke-width:2px,color:#FFF; %% Default fill-black and text-white to make text visible in both light and dark modes
classDef frenzy fill:#040404,stroke:#66ddff,stroke-width:3px;
classDef linked fill:#040404,stroke:#cc6666,stroke-width:2px;
classDef linked_frenzy fill:#040404,stroke:#cc6666,stroke-width:3px;
%% Colours: Cyan=#66ddff
click SpecialChars "<https://www.w3schools.com/charsets/ref_emoji.asp>" "Link to list and codes of special characters e.g. emojis"
click Mermaids_FlowchartsArticle "<https://davidesp.notion.site/Mermaid-Flowcharts-Webclipped-then-Structured-and-Slightly-Edited-by-David-Esp-79520e8fe99f420c85b283c89194809f>" "link to DGE Writeup of Mermaid Flowcharts Article"
click Yt_Nutt_FlowchartGenerator "<https://www.notion.vip/create-flowcharts-from-notion-databases/>"