Comprehensive Overview | Using Mermaid Flowcharts In Obsidian 🧜🏻‍♀️️

▬▬▬▬▬▬▬▬▬▬ ► CHECK THESE OUT ◀︎▬▬▬▬▬▬▬▬▬▬
▬▬▬▬▬▬▬▬▬▬ ► SUPPORT THE CHANNEL ◀︎▬▬▬▬▬▬▬▬▬▬
▬▬▬▬▬▬▬▬▬▬ ► My Newsletter ◀︎▬▬▬▬▬▬▬▬▬▬
▬▬▬▬▬▬▬▬▬▬ ► My Gear ◀︎▬▬▬▬▬▬▬▬▬▬
▬▬▬▬▬▬▬▬▬▬ ► Questions? ◀︎▬▬▬▬▬▬▬▬▬▬
▬▬▬▬▬▬▬▬▬▬ ► Social ◀︎▬▬▬▬▬▬▬▬▬▬
▬▬▬▬▬▬▬▬▬▬ ► The Rest ◀︎▬▬▬▬▬▬▬▬▬▬
Thanks for watching and if you liked this video please leave a 👍🏻
Subscribe to my channel and click the 🔔 icon for notifications when I post a new video

If you read this far put a 🧜🏻‍♂️️ in the comments!
▬▬▬▬▬▬▬▬▬▬ ► TAGS ◀︎▬▬▬▬▬▬▬▬▬▬
#obsidian #zettelkasten #bryanjenks

00:00 Intro
00:11 Premise
00:48 What is mermaid?
01:02 The Mermaid live editor
05:26 Pie chart diagrams
07:33 The journey diagram
11:05 Flow charts
11:39 Flow chart diagram orientations
12:14 Line types in flow charts
13:07 Text display over lines
14:13 Branching in Flow charts
14:53 Using IDs for your flow chart nodes
16:09 Node shape syntax
18:17 Flow chart node shape options
21:56 Line Labels and Line types
26:16 Displaying Special Characters and those that break your diagrams
28:18 Subgraphs
30:00 Click actions on flowchart nodes
31:12 Click events to open Obsidian pages with URIs
34:42 Comments in Mermaid code
35:28 Custom styling in mermaid with CSS
39:36 Font Awesome support in mermaid
41:31 final words
41:41 Outro

[BryanJenks]

00:00 Intro
00:11 Premise
00:48 What is mermaid?
01:02 The Mermaid live editor
05:26 Pie chart diagrams
07:33 The journey diagram
11:05 Flow charts
11:39 Flow chart diagram orientations
12:14 Line types in flow charts
13:07 Text display over lines
14:13 Branching in Flow charts
14:53 Using IDs for your flow chart nodes
16:09 Node shape syntax
18:17 Flow chart node shape options
21:56 Line Labels and Line types
26:16 Displaying Special Characters and those that break your diagrams
28:18 Subgraphs
30:00 Click actions on flowchart nodes
31:12 Click events to open Obsidian pages with URIs
34:42 Comments in Mermaid code
35:28 Custom styling in mermaid with CSS
39:36 Font Awesome support in mermaid
41:31 final words
41:41 Outro

[FaradayAcademy]

Excited for this! Watching it live will force me to actually learn this and start using it finally :)

[afonsollima]

The pie chart calculates the percentage. For example, if you say a : 10, b : 5 it's going to show a : 66%, b : 33%. You don't have to use the actual percentages on your sintaxe.

[Derbb]

This is awesome

As a CS student, having to draw things like binary search trees with \ and / and good spacing, this is huge lol. Very useful for CS in terms of program logic flow and data structures

[ladyruthven]

Brilliant ✨ I am using the charts, but I did not know how to add the links. 🙏

[susanbenson]

great video bryan thanks. have you managed to use themes in your mermaid charts?
They are mentioned in the mermaid documentation but the syntax isn’t working in obsidian.

[micheltum]

WOW... I didn't know you could use transclusion inside a table (it shows in Bryan's kanban test). I came for mermaid, left with kanban also. Thanks!

[AmanKumar-stmq]

Hey Bryan, the video was very informative. The thing the charts in my obsidian are centre aligned and large. Is there a way to left-align and resize mermaid charts?

[huggingpuppy]

graph
W[Watch Video] --> |Finish Video| C[Comment on Video as a Thank You]

[LevyCarneiro]

Thanks for your video! When I create a flow diagram in Obsidian that is too long horizontally, it doesn't display it entirely. Do you know a solution for this? Thanks !

[DavidConnerCodeaholic]

the font-awesome class gets embedded into the SVG, but AFAIK if the font-awesome CSS isn't on the page, then it doesn't get displayed. I'm not sure how it works for PNG or standalone SVG files.

[DakotaJPayne]

31:20 Am I able to use this to open a specific application on my desktop. If so, how do I find the URL for each of my desktop applications?

[aleksandrk]

What is your Obsidian theme? It is rendering more mermaid syntax that mine. I am on MacOS v. 0.12.3

[ntx_ilpatgece]

How can you edit node text to have different colours for specific words or letters?

[mazin__]

I wonder how many characters can hold?

[dilarakim]

Great! Can I export created flowchart?