4 ms·

I had just learned about Mermaid and used it standalone once, when I realized it is also already built into Github Markdown [0], where you can include a diagram

I had just learned about Mermaid and used it standalone once, when I realized it is also already built into Github Markdown [0], where you can include a diagram by just going ```mermaid <code>```, which is veeery handy. In mermaid.live can also get an SVG URL which works great to paste into many online drawing tools like Miro, Diagrams.net etc. [0] https://docs.github.com/en/get-started/writing-on-github/working-with-advanced-formatting/creating-diagrams https://docs.github.com/en/get-started/writing-on-github/wor...

wasneverhere 4y ago
also learned today that Mermaid is included in Obsidian - cool stuff!
- chrisweekly 4y ago
  Related tangent: Excalidraw is a first-class Obsidian integration; notes in your drawings and/or drawings in your notes, it's very powerful.
sequence7 4y ago
It's also supported in GitLab [0] Azure DevOps [1] and lots of other places [2] [0] https://docs.gitlab.com/ee/user/markdown.html#mermaid https://docs.gitlab.com/ee/user/markdown.html#mermaid [1] https://learn.microsoft.com/en-us/azure/devops/project/wiki/wiki-markdown-guidance?view=azure-devops#add-mermaid-diagrams-to-a-wiki-page https://learn.microsoft.com/en-us/azure/devops/project/wiki/... [2] https://mermaid.js.org/ecosystem/integrations.html https://mermaid.js.org/ecosystem/integrations.html
- mooreds 4y ago
  And in google docs! https://workspace.google.com/marketplace/app/mermaid/636321283856 https://workspace.google.com/marketplace/app/mermaid/6363212... The interface is a bit clunky (when the diagram text is invalid, you see markup) but it makes it easy to create diagrams that are embeddable in Google docs without reaching for google draw.
- addled 4y ago
  I don't know about the others, but Azure DevOps' mermaid support is several releases out of date, or custom-limited to certain features. This means a lot of the examples in the official docs or elsewhere online don't work. But what is most frustrating is that they don't document what features or version of mermaid they actually support. Microsoft gives a couple examples with links to official Mermaid docs, with a huge vague warning that _some_ things won't work in DevOps.
mLuby 4y ago
Notion has a nice split-screen preview + code approach.
mwexler 4y ago
I think you can embed the mermaid text directly into draw.io/diagrams.net. It becomes a boxed object so a bit painful to edit but make it easy to get a quick diagram up. https://www.diagrams.net/blog/mermaid-diagrams https://www.diagrams.net/blog/mermaid-diagrams gives an example. The svg approach is pretty good too, good idea.

wasneverhere 4y ago

also learned today that Mermaid is included in Obsidian - cool stuff!

chrisweekly 4y ago
Related tangent: Excalidraw is a first-class Obsidian integration; notes in your drawings and/or drawings in your notes, it's very powerful.

sequence7 4y ago

It's also supported in GitLab [0] Azure DevOps [1] and lots of other places [2] [0] https://docs.gitlab.com/ee/user/markdown.html#mermaid https://docs.gitlab.com/ee/user/markdown.html#mermaid [1] https://learn.microsoft.com/en-us/azure/devops/project/wiki/wiki-markdown-guidance?view=azure-devops#add-mermaid-diagrams-to-a-wiki-page https://learn.microsoft.com/en-us/azure/devops/project/wiki/... [2] https://mermaid.js.org/ecosystem/integrations.html https://mermaid.js.org/ecosystem/integrations.html

mooreds 4y ago
And in google docs! https://workspace.google.com/marketplace/app/mermaid/636321283856 https://workspace.google.com/marketplace/app/mermaid/6363212... The interface is a bit clunky (when the diagram text is invalid, you see markup) but it makes it easy to create diagrams that are embeddable in Google docs without reaching for google draw.
addled 4y ago
I don't know about the others, but Azure DevOps' mermaid support is several releases out of date, or custom-limited to certain features. This means a lot of the examples in the official docs or elsewhere online don't work. But what is most frustrating is that they don't document what features or version of mermaid they actually support. Microsoft gives a couple examples with links to official Mermaid docs, with a huge vague warning that _some_ things won't work in DevOps.

mLuby 4y ago

Notion has a nice split-screen preview + code approach.

mwexler 4y ago

I think you can embed the mermaid text directly into draw.io/diagrams.net. It becomes a boxed object so a bit painful to edit but make it easy to get a quick diagram up. https://www.diagrams.net/blog/mermaid-diagrams https://www.diagrams.net/blog/mermaid-diagrams gives an example. The svg approach is pretty good too, good idea.