![]() ![]() Adding Icons to Mermaid.js Mind Mapsįinally, Mermaid.js allows you to add in icons from vectorized libraries like Font Awesome through specifying a few classes. I have some trouble picturing when I might use a few of these shapes, but overall, the extra variety is very helpful. Take a look at the following markdown as an example and its associated chart: mindmap Mermaid gives us a variety of different punctuation to surround each item that roughly resembles the shape it should render. To address this, Mermaid.js lets you customize the shape Mermaid.js uses to represent each topic in the mind map. Sometimes you want a little more flair and variety to your mind maps - particularly in larger diagrams. When you put the Mermaid.js markdown in a ```mermaid block in markdown in a supported editor such as GitHub markdown or the exceptional Mermaid.js live editor, you'll get the following visual:Īdmittedly, this diagram isn't quite as good as something you might get from a dedicated tool, but it's a whole lot easier to edit markdown and track it in version control than custom file formats supported by various tools out there. In this case that's the "Mermaid.js Mind Map Article" node.Īfter that, individual topics are nested inside of that main topic and its children with indentation helping identify the relationships between tasks.Ĭaution: if your indentation is unclear, Mermaid.js will not render anything other than a generic error message Notice how the first element is a mindmap marker telling Mermaid.js that we're building a mind map (as opposed to some other chart type). Basic Mind Maps in Mermaid.jsĪt their core, mind maps are just outlines and so the markdown for them is very similar to an outline: mindmap In this article we'll explore mind maps in Mermaid.js and see how you can be effective at building out a useful mind map without needing much more than a basic markdown editor. While the same information could be conveyed in a hierarchical outline, mind maps de-emphasize the order of different elements and allow your mind to more easily form relationships between nodes and spot missing entries. This mind map, built using Mermaid.js, helps visualize the relationships of different topics. Take this mind map I made for an upcoming talk I'm delivering on Polyglot Notebooks as an example: If you're not familiar with mind maps, they're effectively a visual outline stemming from a central node. While I often use professional tools dedicated to the task, such as the exceptional XMind, I've recently discovered that I can create effective mind maps from pure markdown using Mermaid.js. Mind Maps are one of the tools I frequently find myself using as I'm organizing my thoughts. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |