FRESH

Hacker News

Show HN: Mermaid Chart VS Code Plugin: Mermaid.js Diagrams in Visual Studio Code

128 points by msfi

by mackenly

1 subcomments

I really like Mermaid, but I'm not seeing the value in this as is.
- Mermaid within .md is widely supported. The file format of .mmd, while supported in most integrations, is a standalone file rather than living within my documentation/markdown. I use Mermaid charts and graphs as visual aids to add to the documentation or notes rather than having them stand alone. If I wanted a standalone file, I'd use any other diagram tool with its proprietary file format. I like Meriamid because of how easy it is to integrate into markdown. The value isn't in having a Mermaid file; the value is in adding diagrams and charts to markdown.
- Within .md files there's a Mermaid logo added beside the Mermaid, but it doesn't seem to be clickable or have a context menu. Maybe this is a bug. It also weirdly highlights all of the Mermaid code. Why doesn't it syntax highlight within markdown? This extension works great for highlighting: https://marketplace.visualstudio.com/items/?itemName=bpruitt...
- It doesn't add support for viewing mermaid within markdown preview. I currently use this extension for it. This is a key feature that is missing. https://marketplace.visualstudio.com/items/?itemName=bierner...
Overall, excited to see what this becomes. Hope this is useful feedback! It can only get better from here.

by amanzi

2 subcomments

Perhaps PlantUML isn't as new and interesting as Mermaid, but each time I try a side-by-side comparison, the results are always better in PlantUML than Mermaid. I'll admit that the Mermaid syntax is a lot easier to understand, but the PlantUML syntax is a lot more powerful. I especially like the new Activity diagrams in PlantUML with the conditionals and looping syntax.

by ashryan

3 subcomments

Mermaid is fantastic as a portable I/O format for LLM context. I spent some time discussing entity relationships with an LLM recently, and had it produce a Mermaid diagram to wrap up the conversation.
Once you have the diagram code, you can use that as an artifact for new LLM chats related to databases, APIs, etc.
I'm not sure what the history of mermaidchart.com specifically is, but I'm guessing it's new since the ER diagram docs are marked as "coming soon":
https://docs.mermaidchart.com/mermaid/er/syntax
I'm curious how this plugin compares to Markdown Preview Mermaid Support: https://marketplace.cursorapi.com/items?itemName=bierner.mar...

by esafak

0 subcomment

Mermaid is also supported in GitHub, GitLab, and IntelliJ. Use it; a diagram is worth a thousand words.
https://github.blog/developer-skills/github/include-diagrams...
https://handbook.gitlab.com/handbook/tools-and-tips/mermaid/
https://plugins.jetbrains.com/plugin/20146-mermaid

by 5Qn8mNbc2FNCiVV

4 subcomments

Never seen a bigger waste of time than when my colleague (who was given more authority for some reason) tried establishing Mermaid as our go-to diagramming tool for the company.
Had no real benefits, was way more cumbersome for almost everyone and honestly even me as a developer I'd rather have a few paragraphs instead of a diagram.
Somehow it's just never "readable"

by oigursh

1 subcomments

Is there a visual interface for Mermaid?
I can blast out auto-reflowing flowcharts in Flying Logic on a keyboard but it's moved to a subscription model that doesn't make sense for my irregular use.
Seeing the connections in real time really helps with my thought process.

by darepublic

1 subcomments

I have been using mermaid with gpt... describing the diagram I want and getting the syntax, then copy pasting it into the repl. I also wanted to investigate using marp for quickly coding up power point slides. But I regularly ran into issues with customising styles and documentation around html so I gave up on that

by thefourthchime

1 subcomments

by herpdyderp

0 subcomment

Installed it, ran "@mermaid-chart make a diagram of the code flow in this file" in CoPilot, worked like a charm. Cool!

by vimax

1 subcomments

Does this let you export rendered diagrams at html or pdf? The Markdown Preview Enhanced plug-in is the only plugin I found to do this easily lady time I was looking .

by mt123456

0 subcomment