![]() Which will render a nice SVG diagram like so: Nine lines of code gets us a full-fledged Gantt chart that can be used for product roadmaps and such. With Mermaid, you can do this in a small handful of lines: gantt Is “diagrams-as-code” a term yet? It should be.įor example, let’s say you’re working on a fancy new product and you want to provide a roadmap in the form of a Gantt chart (or some other type - say flowcharts, sequences, and class diagrams). ![]() If your site is authored in Markdown, processed into HTML, and you have enough control to add a bit of custom JavaScript, then you can use the ideas we’re covering in this article to fit your own needs and implement diagrams with Mermaid conveniently alongside the rest of your Markdown. And Markdown is to Jamstack and static sites as peanut butter is to jelly. Using the same markup abstractions Markdown provides to notate code, Mermaid can be represented the same to output diagrams and flowcharts. While Mermaid diagrams aren’t Markdown-exclusive, they are Markdown-inspired. Mermaid diagrams pair well with Jamstack and static site generators, which continue to grow in popularity. Just as unhelpful, obsolete, or otherwise misleading comments in your code can be objectively worse than no comments, the same goes for diagrams. Just like you might want to embed your CodePen demo directly in your documentation source, having your diagrams and charts live adjacent to your text helps prevent them from rotting - that is, drifting out of sync with the state of your document. ![]() ![]() #Comments in markdownd how toLet’s take a look at what they are, how to use them, and just as importantly: why. Mermaid diagrams and flowcharts have been gaining traction, especially with GitHub’s announcement that they are natively supported in Markdown. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |