Show HN: Mermaid Chart VS Code Plugin: Mermaid.js Diagrams in Visual Studio Code
The Mermaid Chart VS Code Plugin enables developers to create and edit diagrams in Visual Studio Code, offering features like real-time rendering, Markdown integration, offline editing, and AI-generated diagrams.
Read original article
The Mermaid Chart VS Code Plugin is a tool designed for developers to create and edit Mermaid.js diagrams directly within Visual Studio Code. It allows users to visualize software architecture, document API flows, and manage various types of diagrams without needing an account for basic functionalities. Key features include automatic recognition of .mmd files, syntax highlighting, real-time rendering with pan and zoom capabilities, and integration with Markdown for embedding diagrams. For collaborative work, users can log in to access advanced features such as cloud integration, which allows for sharing diagrams with non-developers through a browser-based editor. The plugin also supports offline editing and Git-based version control, enabling developers to manage diagrams in version-controlled repositories. Additionally, it offers AI capabilities to generate diagrams from source code, enhancing productivity. The plugin is suitable for various real-world applications, including DevOps visualization, API flow documentation, and improving internal documentation. Users can quickly get started by installing the plugin from the VS Code Marketplace and utilizing the real-time preview feature.
- The Mermaid Chart VS Code Plugin allows for seamless diagram creation and editing within Visual Studio Code.
- Basic features do not require an account, while advanced functionalities like cloud sync need user login.
- The plugin supports various diagram types and integrates with Markdown for easy documentation.
- It offers offline editing and Git version control for managing diagrams.
- AI capabilities enable automatic diagram generation from source code, enhancing developer efficiency.
Related
Mermaid Gantt diagrams are great for displaying distributed traces in Markdown (2023)
Mermaid Gantt diagrams offer a Markdown-friendly solution for visualizing distributed trace information. By repurposing traditional scheduling tools, users can create clear trace diagrams resembling OpenTelemetry traces, enhancing documentation and web compatibility.
Mermaid: Diagramming and Charting Tool
Mermaid is a JavaScript tool for creating diagrams and charts, featuring a Live Editor for collaboration, winning the 2019 JavaScript Open Source Award, and supporting various application integrations.
Launch HN: CodeViz (YC S24) – Visual maps of your codebase in VS Code
Liam and Will from CodeViz are developing a VS Code extension that creates interactive diagrams, including call graphs and architecture diagrams, to help software engineers visualize and navigate complex code structures.
Mermaid v11 Is Out: Advanced Layouts, New Diagram Types – Community-Driven
Mermaid v11 has been released, featuring advanced layout options, new diagram types like packet diagrams, enhanced configuration settings, and significant community contributions to improve user experience in visual diagram creation.
Show HN: GUI for Editing Mermaid Class Diagrams
Mermaid Chart has launched an updated Visual Editor for class diagrams, enhancing user experience with intuitive drag-and-drop functionality, real-time editing, and customization options, making diagramming more accessible.
- Many users appreciate Mermaid's integration with Markdown but express concerns about the standalone .mmd file format, which they find less useful.
- Some users compare Mermaid unfavorably to other diagramming tools like PlantUML, citing better functionality and features in the latter.
- There are requests for a visual interface and better support for real-time diagram viewing within Markdown previews.
- Users highlight the potential of using Mermaid with AI tools like GPT for generating diagrams, indicating a positive experience with this integration.
- Concerns about usability and readability of diagrams created with Mermaid are also mentioned, with some users preferring text explanations over diagrams.
11 comments- 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.
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...
https://github.blog/developer-skills/github/include-diagrams...
https://handbook.gitlab.com/handbook/tools-and-tips/mermaid/
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"
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.
Related
Mermaid Gantt diagrams are great for displaying distributed traces in Markdown (2023)
Mermaid Gantt diagrams offer a Markdown-friendly solution for visualizing distributed trace information. By repurposing traditional scheduling tools, users can create clear trace diagrams resembling OpenTelemetry traces, enhancing documentation and web compatibility.
Mermaid: Diagramming and Charting Tool
Mermaid is a JavaScript tool for creating diagrams and charts, featuring a Live Editor for collaboration, winning the 2019 JavaScript Open Source Award, and supporting various application integrations.
Launch HN: CodeViz (YC S24) – Visual maps of your codebase in VS Code
Liam and Will from CodeViz are developing a VS Code extension that creates interactive diagrams, including call graphs and architecture diagrams, to help software engineers visualize and navigate complex code structures.
Mermaid v11 Is Out: Advanced Layouts, New Diagram Types – Community-Driven
Mermaid v11 has been released, featuring advanced layout options, new diagram types like packet diagrams, enhanced configuration settings, and significant community contributions to improve user experience in visual diagram creation.
Show HN: GUI for Editing Mermaid Class Diagrams
Mermaid Chart has launched an updated Visual Editor for class diagrams, enhancing user experience with intuitive drag-and-drop functionality, real-time editing, and customization options, making diagramming more accessible.