[HN Gopher] Show HN: Mermaid Chart VS Code Plugin: Mermaid.js Di...
___________________________________________________________________
Show HN: Mermaid Chart VS Code Plugin: Mermaid.js Diagrams in
Visual Studio Code
Author : msfi
Score : 73 points
Date : 2025-04-02 16:33 UTC (6 hours ago)
(HTM) web link (docs.mermaidchart.com)
(TXT) w3m dump (docs.mermaidchart.com)
| thefourthchime wrote:
| Is this new? I remember playing with a mermaid plugin like a year
| ago.
| knsv wrote:
| You are right! A light plugin was released then.
|
| Now, we have added lots of new functionality. Proper editing
| with syntax highlighting, etc. Apart from that, we have also
| added integration with GitHub Copilot, so you can generate
| diagrams from code and continue to edit them using the
| extension.
| ashikns wrote:
| I have been using it lightly. But the biggest problem (for
| me) is that I cannot use custom icons. I have to use Azure
| specific icons in a lot of diagrams. Mermaid's support for
| custom icons is only via iconify packs as far as I can tell.
| Is it possible to refer to icons in a local directory, such
| as "./images/storage.png"?
| knsv wrote:
| That's good feedback. The icons are not bundled into
| Mermaid itself due to copyright concerns. The approach you
| suggest would make sense, though.
| esafak wrote:
| 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
| 5Qn8mNbc2FNCiVV wrote:
| 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"
| sebazzz wrote:
| So what do you use? Figma?
| bhouston wrote:
| I also ran into massive issues trying to use Mermaid when I
| tried to pair it up with Marp (markdown for presentations). I
| am not sure if it is Mermaid's fault or Marp's fault but it
| didn't work and tons of people want it to work:
|
| https://github.com/orgs/marp-team/discussions/207
| fayten wrote:
| I'm curious what you prefer instead?
|
| I find that tools like Mermaid are pretty invaluable,
| especially when editing very large processes. Draw.io diagrams
| tend to get pretty unwieldy as they scale and editing inter
| process stuff if you forgot something quite frustrating.
|
| Sequence diagrams are possibly my favorite feature in Mermaid:
| https://jessems.com/posts/2023-07-22-the-unreasonable-effect...
|
| Admittedly I primarily use D2 nowadays. The only features I
| miss in D2 from mermaid are the GitHub automatic rendering and
| Sequence diagram numbers. https://play.d2lang.com
| intrasight wrote:
| Nowadays I use mermaid, but I only use sequence diagrams.
| They're incredibly useful to convey to a client at a high-
| level what are the different workflows in a system.
| anitil wrote:
| I use excalidraw, even upgraded to pro out of my own pocket.
| It's not git-compatible in the sense that it's not text
| (though you can export to SVG and commit that, which I've
| done). But I love that it has the feel of an approximation or
| just a quick sketch rather than a formal promise of how a
| system works.
|
| When I've used dot or mermaid to build diagrams I've always
| found it hard to specify layout, colours and sizes, which I
| use to emphasise different views on a system. I'd love some
| sort of middle ground where I get the benefits of version
| control but also the sketch-like character of excalidraw
| lxgr wrote:
| Had no benefits/was more cumbersome than what?
|
| My colleagues frequently use one of these general-purpose
| WYSIWYG drawing tools, and I'm not a fan at all - everybody has
| their own slightly or wildly varying riff on UML or flowcharts,
| and the result is chaos: Sometimes rectangles are states,
| sometimes they're decisions; sometimes arrows are labeled state
| transitions, but other times they're unlabeled and state
| transitions are also boxes.
|
| Discoverability is also much worse compared to e.g. Mermaid or
| PlantUML diagrams checked into version control or stored as
| text source in Wiki articles.
| vimax wrote:
| 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 .
| knsv wrote:
| More good input! Appreciate it. What about PNG export? It seems
| more direct than a PDF to me.
| saratogacx wrote:
| I use a similar plugin for graphviz and PNG and SVG output
| are used often when exporting the graphs from the tool.
| darepublic wrote:
| 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
| dataviz1000 wrote:
| I've been asking gpt to use mermaid to diagram before writing
| the code. It seems to help produce better results.
| ashryan wrote:
| 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...
| wfn wrote:
| Re: LLMs & diagrams - in general, diagrams and tables as info
| compression tool (both in the general sense as well as in the
| practical concrete "optimise for token / context window" sense)
| - e.g. today as part of request to do 'deep research' on Dwarf
| Fortress personality / psychology system, at a late point
| (preparing to relaunch with a fresh empty context window among
| other things) I asked GPT 4.5 to (among other diagrams) draw me
| a concise 'psychological data flow diagram' (I was kind of
| vague and was deliberately pushing for abstraction /
| compression) -
|
| among (many elaborate) other things it gave me - and I liked it
| (NB don't trust it willy nilly w.r.t. the below of course) -
| (auto-indented by 2 spaces hope formatting works) =>
|
| ``` DWARVEN PSYCHE DATA FLOW ------------
| -------------------------------------------------------
| External Events (Trauma, Success, Social)
| | V +-------------------------+ |
| Event Processing |--- Modulated by - Personality facets
| | (Emotion generation) |--- Modulated by - Personal values
| +-----------+-------------+ | Generates
| V +-------------------------+ | Emotional
| Reactions |--- Short-term emotion (Anger, Joy, Sadness)
| | (Immediate Thoughts) | +-----------+-------------+
| | Stored as V
| +-------------------------+ | Memory Storage
| |--- Short-term - Long-term memories (core) | (Core &
| transient) |--- Decay/Replacement over time
| +-----------+-------------+ | Recalled as
| V +-------------------------+ | Memory Re-
| experiencing |--- Repeated emotional impacts | (Periodic
| Thoughts) | +-----------+-------------+
| | Accumulate V
| +-------------------------+ | Stress Level
| |--- Increased by negative memories | (Running total
| score) |--- Decreased by positive memories
| +-----------+-------------+ | Monitored
| V +-------------------------+ | Stress Threshold
| Check |--- If threshold breached - Psychological Crisis |
| |--- Else - Coping behaviors activated
| +-----------+-------------+ |
| | +-----+-----+ | |
| V V +-----------+ +-----------------+ |
| Coping | | Psychological | |Mechanisms | | Breakdown
| | |(Needs met,| | (Tantrum, | | hardening,| |
| Depression, | | social) | | Insanity) |
| +-----------+ +-----------------+ |
| | | V |
| +-------------------+ | | Personality Change|
| +------>| (Facet alterations| | via trauma,
| events| +-------------------+
|
| ```
|
| p.s. it chose the syntax/format itself; regardless, some time
| ago when asked for guidance re: how to manage sliding context
| window, it did suggest tables itself (user employing them for
| concise input - and likewise requesting
| tabulated/diagrammatic/schematic output).
|
| p.p.s. ( _edit_ ) many good very particular insights, if
| anyone's by chance interested then lmk, I'll ping once
| distilled interesting output is on a not-yet-extant blog (it's
| gonna happen finally)...
| amanzi wrote:
| 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.
| antman wrote:
| Thats what I also found out, supported by llms, nice looking
| output. I have not found a proper left to right renderer for
| the activity diagrams
| mackenly wrote:
| 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.
___________________________________________________________________
(page generated 2025-04-02 23:00 UTC)