Mermaid demo

%% Graph and nodes definition flowchart LR subgraph S1[1. Semester] automl[Automated Machine Learning] end subgraph S2[2. Semester] lcautoml1[Lab Course Automated Machine Learning 1] dl[Foundations of Reinforcement Learning] end subgraph S3[3. Semester] lcautoml2[Lab Course Automated Machine Learning 2] end %% Invisible edges between Semester subgraphs just there, so they display in the correct order S1 === S2 === S3 linkStyle 0 stroke-width:0px; linkStyle 1 stroke-width:0px; %% Edgesbetween the nodes automl -.-> lcautoml1 automl ==> dl lcautoml1 --> lcautoml2 %% Some styling definitions better do not alter these classDef courseClass fill:#004A99,color:#fff,stroke:#555; classDef semesterClass fill:#FFF,stroke:#555; %% Add here all courses nodes to style them properly class automl,lcautoml1,lcautoml2,dl courseClass %% Add here all Semester Subgraph nodes to style them propely class S1,S2,S3 semesterClass %% This makes the nodes clickable and link to the course page click dl "/teaching/winter-semester-2022/foundations-of-deep-learning/" "Foundations of Deep Learning WS 2022" click automl "/teaching/ws2020/automl/" "AutoML WS2020"