Mermaid - notes

Mermaid is a [[Diagram tool]] that lets you create diagrams and visualizations using text and code. https://jojozhuang.github.io/tutorial/mermaid-cheat-sheet/ ```python flowchart TD cw[Amazon CloudWatch] --> k[Amazon Kinesis Data Streams] k --> b[Benthos] b --> lm[[Log management]] class cw internal-link class k internal-link class b internal-link class lm internal-link ``` Looks like this: ```mermaid flowchart TD cw[Amazon CloudWatch] --> k[Amazon Kinesis Data Streams] k --> b[Benthos] b --> lm[[Log management]] class cw internal-link class k internal-link class b internal-link class lm internal-link ``` See [Mermaid: Create diagrams quickly and effortlessly](https://towardsdatascience.com/mermaid-create-diagrams-quickly-and-effortlessly-d236e23d6d58). > The ultimate rule of thumb: if there is at least one line crossing another in a diagram, the system is too complicated. A nice one from [GitLab](https://about.gitlab.com/handbook/people-group/talent-development-program/#talent-development-program-chart): ```mermaid graph LR Aid1([Talent Assessment Tool]):::classA --> Eid1([Succession Planning]):::classB Bid1([Org Structure & Gaps]):::classA --> Eid1([Succession Planning]):::classB Cid1([Critical Roles]):::classA --> Eid1([Succession Planning]):::classB Did1([360 Feedback]):::classA --> Eid1([Succession Planning]):::classB Eid1([Succession Planning]):::classB --> Fid1([Assess Hiring Implications & Requirements]):::classC Eid1([Succession Planning]):::classB --> Gid1([Career Development Conversations]):::classC Gid1([Career Development Conversations]):::classC --> Hid1([Individual Growth Plan]):::classD Gid1([Career Development Conversations]):::classC --> Iid1([Performance Enablement Plan]):::classD Gid1([Career Development Conversations]):::classC --> Jid1([Performance Improvement Plan]):::classD click Aid1 "/handbook/people-group/performance-assessments-and-succession-planning/" click Bid1 "/company/team/structure/" click Did1 "/handbook/people-group/360-feedback/" click Eid1 "/handbook/people-group/performance-assessments-and-succession-planning/" click Fid1 "/handbook/hiring/" click Gid1 "/handbook/leadership/1-1/#career-development-discussion-at-the-1-1" click Hid1 "/handbook/people-group/learning-and-development/career-development/#internal-resources" classDef classA fill:#dcf3f5, stroke:#20757d classDef classB fill:#f7dcf1, stroke:#521144 classDef classC fill:#D6EAF8, stroke:#21618C classDef classD fill:#D7BDE2, stroke:#633974 ``` Gannt: ```mermaid gantt title Gantt dateFormat DD-MM-YYYY axisFormat %d/%m section One Task One : 07-05-2019, 7d Task Two : 09-05-2019, 7d ``` Another: ```mermaid gantt title A Gantt Diagram dateFormat YYYY-MM-DD section Section A task :a1, 2014-01-01, 30d Another task :after a1 , 20d section Another Task in sec :2014-01-12 , 12d another task : 24d ``` Subgraphs: ```mermaid flowchart LR subgraph TOP direction TB subgraph B1 direction RL i1 -->f1 end subgraph B2 direction BT i2 -->f2 end end A --> TOP --> B B1 --> B2 ``` ```mermaid flowchart TB classDef head fill:#ffbfcf; classDef installed fill:#34ebba; subgraph stable A(v0.0.1):::installed --> B(v0.0.2) B(v0.0.2) x--x |v0.0.3,v0.0.4| C(v0.0.5 \n fa:fa-tag 4.6):::head C -.-> E(v0.0.6 \n fa:fa-tag 4.6) end ``` Many subgraphs: ```mermaid flowchart LR subgraph MyApp subgraph MaterialApp subgraph Scaffold subgraph appbar subgraph leading end subgraph Title end subgraph action1 end subgraph action2 end end subgraph body floatingActionButton-.-a1((+)) .. end bottomNavigationBar subgraph drawer end subgraph endrawer end end end end ``` More subgraphs: ```mermaid flowchart LR %%{init: {'flowchart': {'useMaxWidth':false}}}%% %%%%%%%%%%% %% seasonality %%%%%%%%%%% subgraph seasonality theta2[/theta/] end subgraph larval\n subgraph stage EL[Early] LL[Late] end KL --> EL KL --> LL subgraph Develepment_Time dLL((Larvae)) dPL((Pupae)) dEL((Early Stage)) end subgraph L_Rates muLL[[Mortality \n R Larvae]] muPL[[Mortality \n R Pupae]] muEL[[Mortality \n R Early Stage]] gammaL end subgraph L_Parameters[Parameters] mv0[Initial \n Density] mu0[[Baseline \n Death Rate]] end KL[Seasonal\n Carrying\n Capacity] gammaL & muLL & muEL & dEL & dLL --> KL mv0 & mu0 & dPL & muPL --> KL end theta2 --> KL ``` More: ```mermaid flowchart LR %%{init: {'flowchart': {'useMaxWidth':false}}}%% %% EIR subgraph EIR_group [Entomology Innoculation Rate] foi_age[/FOI for age group/] rel_foi[[Rate FOI]] foi_age & rel_foi --> EIR %%omega -->EIR end subgraph Mosquito Iv[Infectious Mosquito] end Iv --> EIR subgraph Intervention av_human[[Biting Rate \n on Humans \n in each int. cat.]] end av_human --> EIR subgraph immunity subgraph Immunity_Level_T1 ICM_t1[Maternal \n Immunity] %% maternal ICA_t1[Immunity \n Previous Infection] %% previous infection IC_t1[Clinical \n Immunity] %% clinical immunity IB_t1[Infection \n Blocking] %% infection blocking, chances of preventing infection upon receiving infectious bites ID_t1[Detection \n Immunity] %% Detection immunity, immunity suppresses parasite densities and make it less likely been diagnostics end end EIR --> IB_t1 subgraph FOI_group [Force of Infection] subgraph Mosquito_to_human FOI_lag((FOI_lag)) end end EIR --> FOI_lag ``` More: ```mermaid flowchart TD subgraph 早期结构 style INPUT1 fill: lightgrey, stroke: blue; style OUTPUT1 fill: lightgrey, stroke: blue; style ARITHMETIC1 fill: OrangeRed; style MEMORY1 fill: SandyBrown; style CONTROLLER1 fill: LightSkyBlue; INPUT1[/输入设备/]; OUTPUT1[/输出设备/]; ARITHMETIC1([运算器]); MEMORY1([存储器]); CONTROLLER1((控制器)); INPUT1-->ARITHMETIC1-->OUTPUT1; ARITHMETIC1<-->MEMORY1-->CONTROLLER1; CONTROLLER1<-.->INPUT1; CONTROLLER1<-.->OUTPUT1; CONTROLLER1<-.->MEMORY1; CONTROLLER1<-.->ARITHMETIC1; end subgraph 现代结构 style INPUT2 fill: lightgrey, stroke: blue; style OUTPUT2 fill: lightgrey, stroke: blue; style ARITHMETIC2 fill: OrangeRed; style MEMORY2 fill: SandyBrown; style CONTROLLER2 fill: LightSkyBlue; INPUT2[/输入设备/]; OUTPUT2[/输出设备/]; ARITHMETIC2([运算器]); MEMORY2([存储器]); CONTROLLER2((控制器)); INPUT2-->MEMORY2-->OUTPUT2; MEMORY2<-->ARITHMETIC2; MEMORY2-->CONTROLLER2; CONTROLLER2<-.->INPUT2; CONTROLLER2<-.->OUTPUT2; CONTROLLER2<-.->MEMORY2; CONTROLLER2<-.->ARITHMETIC2; end ``` More [Gannt](https://towardsdatascience.com/mermaid-create-diagrams-quickly-and-effortlessly-d236e23d6d58): ```mermaid gantt title Writing my thesis dateFormat MM-DD axisFormat %m-%d section Research Procrastinate :a1, 01-01, 59d Do it :after a1 , 10dsection Write-up Should I start? :03-01 , 20d Ugh ok : 6d ```