Notion Charts: How to Use the New Feature (Mermaid tutorial)

Поделиться
HTML-код
  • Опубликовано: 30 янв 2025

Комментарии • 182

  • @zacherron1227
    @zacherron1227 3 года назад +155

    I have never done any sort of coding in my life, and i understood everything you just said. That was an amazing tutorial video. Thank you!🤯🤯🤯

    • @aahil7586
      @aahil7586 2 года назад +4

      Nah it's actually common sense
      I mean the way this works not coding

    • @chedrickmaghanoy5567
      @chedrickmaghanoy5567 2 года назад

      @@aahil7586 do you know how to mind map in notion ? like edraw mindmap ? im desperate to make that into reality on notion

    • @Rodrigo-tb9bm
      @Rodrigo-tb9bm Год назад +1

      @@chedrickmaghanoy5567 u talking like graph view on obsidian?

    • @noreply5461
      @noreply5461 Месяц назад

      Seams to me you just got infected. If so, congratulations and happy programming :)

    • @noreply5461
      @noreply5461 Месяц назад

      @@aahil7586 Thing is, coding is the most commonsensical thing I can imagine. Not just this ultra high level programming language. Which is a DSL, short for Domain Specific Language.

  • @qorbani-tech
    @qorbani-tech 2 года назад +30

    Thank you for such an amazing tutorial! This is exactly what I was looking for. I had no idea Notion started supporting Mermaid 👌

  • @MichaelLevardi
    @MichaelLevardi 3 года назад +12

    TY Sarah, your content helps me and others a lot. This has to be the most underrated productivity channel on YT.

  • @billycowper
    @billycowper Год назад +4

    Red, you are an excellent instructor. I appreciate the pace and patience you bring to your lessons, which makes coding in Mermaid accessible to beginners. Your teaching method is superb, and your RUclips videos keep me coming back to your Notion content. Thank you for all the tutorials you provide to the Notion learner community. I appreciate all that you do.

  • @portlyoldman
    @portlyoldman Год назад +1

    Thanks

  • @Savallion
    @Savallion 3 года назад +16

    This was incredible, thank you. I had not even heard about this from anyone else and it's exactly what I need right now for a game development project.

  • @minshi1040
    @minshi1040 7 дней назад

    Great!
    I came back to review after I have used the mermaid for 2 years
    By the way , “comments” are called “label” for the edges.
    Note: edges are the connections between nodes.

  • @ginanam1910
    @ginanam1910 Год назад +1

    You're amazing!! I'm fairly new to notion and so happy I came across your tutorials(accomplished 3 this week!) . I was able to create multiple SOP flow charts fairly quickly. I love how you are direct, concise and go above and beyond with your explanations. The additional details on how to customize the color & shape of the flow chart helped me make it aesthetically pleasing. Thank you!!!

  • @GreggObst
    @GreggObst Год назад +3

    For those wondering, this same syntax works perfectly well in Obsidian and the Mermaid extension for VS Code.

  • @divacarolina_
    @divacarolina_ 2 года назад +1

    Notion is getting really, really awesome. And we're lucky you show it in the best light. Thank you so much! 👏🏻👏🏻👏🏻👏🏻👏🏻

  • @Rufuluss
    @Rufuluss 9 месяцев назад

    While exploring alternative applications for creating mind maps that seamlessly integrate with note-taking, I found articles that told me Notion has that build in feature now. As someone already accustomed to its interface, switching to a new platform seemed tedious. Despite not being a coding expert, Mermaid was not difficult to grasp and creates a comprehensive mind map efficiently. Thanks for the insightful guidance! Your video was crucial to teach me how to make them!

  • @ahmedr.
    @ahmedr. 4 месяца назад

    I can write js code and it was so easy to follow your tutorial using mermaid to create diagrams. You do it in away so easy to understand. Thank you so much 😊

  • @nomadicwolf6132
    @nomadicwolf6132 8 месяцев назад

    This seems like a really fun & interesting way to pickup a coding language. Thanks for the great tutorial!

  • @mauro25z
    @mauro25z 7 месяцев назад

    First time in your channel... suscribed immidiately! i done a lot of tutorials and courses online and yours is one of the bests. Excellent tutorial!!... thx

  • @mickaelladouglas4373
    @mickaelladouglas4373 3 года назад

    This will actually be a really nice way to build different charts that I give my students to visualise concepts we discuss in class

  • @mark41157
    @mark41157 3 года назад +6

    Very nice job. Clear, concise instructions I can use immediately. Thank you.

  • @jiezhou4041
    @jiezhou4041 10 месяцев назад

    amazing! Your tutorial is practical and letting someone like me complete new for coding able to do something with mermaid.

  • @avimehenwal
    @avimehenwal Год назад +1

    Such an amazing video ... I have used Graphviz in past and I can relate to most of the mermaid syntax.
    Keep the great work up (Y)

  • @markthomas9370
    @markthomas9370 3 года назад +3

    thanks for that, very well described. First of all I was wondering the value of the flowchart when I could do something quicker in visio or similar tools (appreciate not everyone has these), but then it go to the part of the clickable links and then it made the flow chart a much more useful feature.

  • @htmalmdn
    @htmalmdn 2 года назад +1

    Love you Red, every vid you have made is full of sincere generous giving desire. God blesses you.

  • @MartinSchabbauer
    @MartinSchabbauer 2 года назад

    Today I wanted to make another chart for my Notion system. I knew where to go for the highest quality tutorial. Thanks again.

  • @no-one-someone-1
    @no-one-someone-1 3 года назад +3

    I just create a whimsical flowchart and customize it and upload that as PNG to notion, but this was a really great tutorial.

    • @zhongli8783
      @zhongli8783 3 года назад +3

      I was doing the same! But knowing that whimsical has a „deadline“ with how much is available makes me want to use notion instead since most of my work is on there anyways

  • @peng4511
    @peng4511 6 месяцев назад

    Great tutorial, well delivered with exactly what we need to know as a beginner. Thank you!!!

  • @Big_delta
    @Big_delta 2 года назад

    Red Gregory, once again showing us black magic sorcery inside Notion🔥. Thank you👍

  • @anacardoso8861
    @anacardoso8861 Год назад

    in high school i used to do HTML but never Mermaid. Now im using it in Notion to study biology and is such a help. thank u so much (english is not my native language so excuse me for errors)

  • @saratchandramv1886
    @saratchandramv1886 7 месяцев назад

    Wow. The feature is a wow! and your explanation is a double wow! Thanks alot.

  • @MartinSchabbauer
    @MartinSchabbauer 2 года назад

    Tack!

  • @giorgiodamiani7501
    @giorgiodamiani7501 Год назад +1

    Is it possible to create in notion a database of nodes and then call them directly inside the mermaid code? Instead of writing every time the node in the code and also if I change the name in notion database, the graph dinamically upgrade

  • @ifsygn
    @ifsygn 3 года назад +1

    Thank you Sarah, I like your style so much!

  • @parthapal333
    @parthapal333 3 года назад

    Wow. Very useful feature. A picture (flowchart) is worth thousand words

  • @chefranylaitenu7731
    @chefranylaitenu7731 2 года назад +1

    Your explanation is next level! So clearly! I never heard about mermaid before but I am gonna check it out thanks to this video! ❤️❤️❤️

  • @fah8600
    @fah8600 3 года назад +2

    Brilliant as usual. Thanks.

  • @RBruceSinclair
    @RBruceSinclair 3 года назад +11

    As always a clear, concise tutorial. I'm baffled, though, that this is the type of enhancement the team at Notion is working on. Is it really valuable to learn a scripting language so one can take 20 minutes to create static images that can be whipped up 1/10th of the time in PowerPoint or Google Slides? Who is asking for this?

    • @RedGregory
      @RedGregory  3 года назад +6

      Mermaid on its own has been around for a while. It isn’t a big update from Notion. It’s just a nice addition to the code block 👍

    • @deturkmedia2
      @deturkmedia2 3 года назад

      @Redgregory I have a question for about your notion budget templates and I have left a lot of comments on there but no response yet. How do you edit the monthly average and the total in the budget tab?

    • @RedGregory
      @RedGregory  3 года назад +3

      The monthly average in budget is the total average. The number takes the total spent divided by number of months in cash flow (both of which are Rollups in the budget database) Every time you add a new month page and add a spend item to it, this adds to the total for the allotted budget area (ie. Utilities). There is a template for each month to auto connect cash flow to every month.

    • @deturkmedia2
      @deturkmedia2 3 года назад

      @@RedGregory Thank you. I’m gonna send you a Dm on IG on what I’m struggling with.

    • @NostraDavid2
      @NostraDavid2 2 года назад +2

      As a programmer, I'm asking for this. Flowcharts are great if you want to easily prototype the logic of some code you'll need to write, or perhaps communicate said logic to other programs as documentation.
      Much easier than using something like drawio where you have to manage everything manually.
      Though I do lose a bit of detail when it comes to the layout of the flowchart that's fine by me.

  • @JordanEwert
    @JordanEwert 2 года назад

    So well done! This really helped me understand better and think it might just be the perfect way to dip my feet into code. The fact you can link to a specific view is a gamechanger.

  • @StillWaterNZ
    @StillWaterNZ 3 месяца назад

    Great video, how can I change color of context to the connections between nodes? Knew how to do link color.

  • @Topidop92
    @Topidop92 Год назад

    Such a high value content you are sharing, thank you.

  • @Taskade
    @Taskade 3 года назад +1

    Another amazing tutorial :)

  • @jessesolomonscott
    @jessesolomonscott 3 года назад +2

    Great tool thanks so much.... And you explained very well simple to understand.

  • @bingsun1414
    @bingsun1414 2 года назад

    A great video to guide me to search for mind maps in Notion. I am very excited to explore this module and improve my work.

    • @chedrickmaghanoy5567
      @chedrickmaghanoy5567 2 года назад +1

      hi , i am looking to for mindmap inside notion i wish page and data base can do that , if you know some petition for that to make it happen please let meknow ill support it , but if it already exists please let me know

  • @tostinipepe
    @tostinipepe Год назад

    Thank you very much for this tutorial! I was looking so badly for something like this.

  • @animeshdebbarma3852
    @animeshdebbarma3852 2 года назад

    Thank you so much mam... U made coding so easy, simple and fun

  • @さっしぺれれ
    @さっしぺれれ Год назад

    「あなたのこの動画はとても勉強になりました。ありがとうございます。」
    “I learned a lot from your video. Thank you.”

  • @danimalisticpaintings927
    @danimalisticpaintings927 2 года назад

    This is fantastic! This was very easy to understand and so thorough. Thank you!!!

  • @evolutionclouds
    @evolutionclouds 2 года назад +1

    Great presentation very well structured, clearly explained and presented
    Thank you!

  • @lvminh
    @lvminh Год назад

    It's just one of the great tutorials I've ever had... Thank you for sharing!

  • @ankitsaraswat3745
    @ankitsaraswat3745 2 года назад

    Thank you.
    This tutorial was so helpful. I created my company org chart using this in minutes :)
    From
    Your new subscriber from India 🇮🇳

  • @alirezaamani2027
    @alirezaamani2027 2 года назад

    Thanks for this high-quality and intelligible tutorial. Grateful for the effort you put into making this, much appreciated.

  • @remakingmegan
    @remakingmegan 3 года назад +1

    that was an awesome tutorial. You make everything so user friendly. Even coding 😳

  • @carolinediasgabani
    @carolinediasgabani 2 года назад +3

    That was mind-blowing! I'll be using this to build family trees for my OCs. TY!

  • @adityakhare7704
    @adityakhare7704 Год назад

    Loved the tutorial. Exactly what I ws looking for.
    Thank you

  • @MartinSchabbauer
    @MartinSchabbauer 3 года назад +2

    Epic, useful and supercharged. Thanks so much.

  • @adriennejones2992
    @adriennejones2992 2 года назад

    your knowledge is so impressive. thanks for all your great videos.

  • @wren4077
    @wren4077 3 года назад

    So grateful for this channel

  • @gilbertmaestle5476
    @gilbertmaestle5476 3 года назад +1

    TY very much Sarah ! It seems so useful now. Kind Regards from 🇫🇷

  • @leibuenafe9399
    @leibuenafe9399 2 года назад

    Enjoyed every sec! Thank you so much for this!!!!!!!! Love you

  • @andonisr
    @andonisr Год назад

    You just ROCK!!! Thank you!

  • @mickaelladouglas4373
    @mickaelladouglas4373 3 года назад

    This tutorial made me feel like I could actually learn to code... WOW!

  • @phytogenfi
    @phytogenfi 2 года назад

    Really very interesting , Thank you ! 🙏

  • @Wildenfree
    @Wildenfree 2 года назад

    Thanks Red this was really helpful! Do you know why when you make a flowchart node clickable, that it changes the Notion color mode from Dark Mode to Light Mode? That's what is happening when I try it.

  • @dayana6811
    @dayana6811 3 года назад +3

    This is going to be great for zettelkasten, ty

    • @sandymakesplans
      @sandymakesplans Год назад

      how so? for mapping the process of adding to your zettelkasten?

  • @jeremy-moore
    @jeremy-moore 8 месяцев назад

    You're a really great teacher. Thank you

  • @FSotoNiell
    @FSotoNiell Год назад

    You do a great work! Congrats!

  •  2 года назад

    Amazingly clear and extremely useful videos. Thank you very much!

  • @elisabetindriani9141
    @elisabetindriani9141 2 года назад

    hey man! im on the free version of soft soft and the plugins list on the left side of the screen is not showing up and i can not bring it up.

  • @sughosh100
    @sughosh100 3 года назад

    Great video. Thanks for informing about the new update!

  • @omna-g
    @omna-g 3 года назад +2

    This was so useful! And we can link DBs?! Amazing🔥😍

  • @saeidgholami2795
    @saeidgholami2795 3 года назад +4

    I like this feature and I know for the long time people asking from Notion to provide a way to visualizing data.
    I can use this feature to create pie chart to see how many task I've been done in a week.
    What I get from this tutorial is that I can't create dynamic charts which get updated based on my tables data. We cannot connect a tables data to the mermaid language or am I wrong? I hope this feature will be added in the future by notion to the language.

    • @MartinSchabbauer
      @MartinSchabbauer 2 года назад +2

      You are right. For the time being, it is a static solution. With the Notion API, we can hope that things will develop rapidly and even include the functionality you refer to. All the best, Notion friends.

  • @leberek
    @leberek Год назад

    Excellent tutorial, giving me at tool to shape my ideas - Thank you. Tried the instruction immediately and it worked well. Just one extra question to the tutorial - Is there any way to centre vertically words inside nodes through styles? I'm asking since the type descenders in letters: j, p, y are barely visible in the video and in my diagrams I get same effect - words seem to be bottom aligned in nodes, descenders are not visible.

  • @RalfPosselt1968
    @RalfPosselt1968 Год назад

    ein hervorragendes Einsteigervideo

  • @ntx_ilpatgece
    @ntx_ilpatgece Год назад

    How can I make a new line under previous text all in one node? Is there syntax for bullet points (i.e when pressing "-" on other platforms)?
    How can you make text in a node bold, italic, underlined, etc.?
    Great vid btw

  • @gregphillipsmusic1880
    @gregphillipsmusic1880 Год назад

    Beautifully done! Thanks

  • @JohnBeaversYT
    @JohnBeaversYT 2 года назад

    Cool lesson, clear and sensible. Thank you !

  • @BaconHer0
    @BaconHer0 Год назад

    Any idea how to make these graphs bigger in notion? Like how do I scale it up?

  • @hamitgemadi5471
    @hamitgemadi5471 3 года назад +1

    That was an amazing tutorial video. Thank you!!!!!!!!!!!!!!

  • @cedricd6126
    @cedricd6126 2 года назад

    Hello gregory ! beautiful work !!! DO you know how to make clickable link open in side window instead of full page ?

  • @bitsii
    @bitsii Год назад

    super useful. thank you!

  • @krishnagautam2329
    @krishnagautam2329 Год назад

    thank you for making this tutorial it was really helpful . when i export my notion note into PDF it doesn't show the figure / charts instead it shows only code. is there is any way to solve that??

  • @NarongNy
    @NarongNy 2 года назад

    hi i have a problem with my mermaid code as the redered text appear to be cut off do you have any workaround to fix this please ?

  • @jolespin
    @jolespin Год назад

    This is SOOOOO sick. Thank you! RIP wasting hours in Google Slides trying to build layouts.

  • @ydswd2003
    @ydswd2003 2 года назад

    Incredible video! Super Duper Helpfull

  • @BuomSquad
    @BuomSquad 8 месяцев назад

    i just did some work with but it's not exporting the flowchart but mermaid code .. is there another way?

  • @edoardosettembretti6813
    @edoardosettembretti6813 Год назад

    I have a question for you. how can I write the title of a very long task on two lines?

  • @mauriciomercado5593
    @mauriciomercado5593 2 года назад

    Hola, Excelente tu video, uno de los mejores, me encanta la edición. Te quería consultar, como compartir a mis compañeros de trabajo el diagrama, lo estoy usando en VSC y anda de maravillas.

  • @higiniofuentes2551
    @higiniofuentes2551 7 месяцев назад

    Thank you for this very useful video!

  • @LudwringLiccien
    @LudwringLiccien 2 года назад

    Hi,
    Congratulation for you channel
    Very good your content
    Please, I need one example of use mermaid with C4 model in Notion
    I was test with code of the oficcial domentattion of mermaid but does not work

  • @Jorge-dx3zp
    @Jorge-dx3zp 2 года назад

    I need to create a cash flow diagram in Markdown->Mermaid for a finance handout for my students. I use Typora. Could you help me?

  • @risan.
    @risan. 3 года назад

    Really useful tutorial for mermaid. Thanks for this video

  • @sparra98
    @sparra98 2 года назад

    I'm gonna use this to plot my story 😄😄
    So glad I found this

  • @marcowenzel3399
    @marcowenzel3399 Год назад

    Thanks for the easy tutorial!

  • @ahmedm.s.abdelrahman9665
    @ahmedm.s.abdelrahman9665 2 года назад

    I have to thank you for ages 🤩

  • @charcharchar2806
    @charcharchar2806 3 года назад +1

    Sweet. Now I just need to brainstorm what I want to use this for in notion. :D

  • @olegsizonov
    @olegsizonov Год назад

    Is there any way to apply styles in ER Diagram?

  • @TulhoKay
    @TulhoKay Год назад

    I'm trying to understand how the mermaid works. Like, how do I use js for some events. I'm using obsidian to do my studies and tests.

  • @ganavalo
    @ganavalo Год назад

    Hi, there I'd like to make a mermaid pie chart that is linked in a database status entity (To do, In Progress, Done). Is this possible?
    Thanks

  • @mcdulldull83
    @mcdulldull83 3 года назад +2

    Thank you for the informative demonstration. Can we create mind map in notion as well?

    • @chedrickmaghanoy5567
      @chedrickmaghanoy5567 2 года назад +2

      this is what im looking right now if we can just create it like obsedian or edraw mindmap /wondershare it would be much better to take notes and colaborate , please update me if there is any pettition u know to make that inro reality or if it already exsist

    • @ralphstube
      @ralphstube Год назад

      @@chedrickmaghanoy5567 I couldn't get mindmap to work on VS Code, Github or notion - even when I copy the sample code from mermaid live - still hoping - there doesn't seem to be any docs or bugs

  • @lv9178
    @lv9178 2 года назад

    Thanks for the video, very helpful!! I am struggling in getting my arrows straight, for some reason they are always rounded. Any tips? Thanks!

  • @valper4675
    @valper4675 2 года назад

    omg this is incredible, thanks for share it

  • @angiradhar2142
    @angiradhar2142 2 года назад

    Hey my flowchart is too small… any way i can increase the size?!

  • @sunsh182
    @sunsh182 3 года назад

    Hello, how can I change the size of the node?

  • @rafcienko
    @rafcienko 2 года назад

    This was awesome! Thank you!