Mermaid advanced Features
Shapes
Mermaid is evolving and introduced shapes that are supported in Obsidian natively and in VSCode with the
Markdown Preview Mermaid support
extension.
Obsidian has a Mermaid tools plugin for easy access to the different shapes (old and new), only Obsidian will not render the font icons, so for publishing, need to use vscode.
Also Github is not rendering the font icons.
flowchart TD A@{ shape: stadium, label: "Start"} B@{ shape: rounded, label: "fa:fa-robot Generate Requirements"} C@{ shape: doc, label: "fa:fa-file Requirements"} D@{ shape: rounded, label: "fa:fa-user Review Draft"} E@{ shape: stadium, label: "End"} A --> B --> D --> E B -.-> C -.-> D
Kanban boards
Supported in Obsidian, VSCode and Github without issues
kanban Todo [Create Documentation] docs[Create Blog about the new diagram] [In progress] id6[Create renderer so that it works in all cases. We also add som extra text here for testing purposes. And some more just for the extra flare.] id9[Ready for deploy] id8[Design grammar]@{ assigned: 'knsv' } id10[Ready for test] id4[Create parsing tests]@{ ticket: MC-2038, assigned: 'K.Sveidqvist', priority: 'High' } id66[last item]@{ priority: 'Very Low', assigned: 'knsv' } id11[Done] id5[define getData] id2[Title of diagram is more than 100 chars when user duplicates diagram with 100 char]@{ ticket: MC-2036, priority: 'Very High'} id3[Update DB function]@{ ticket: MC-2037, assigned: knsv, priority: 'High' } id12[Can't reproduce] id3[Weird flickering in Firefox]