mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-12-24 05:06:28 +01:00
Compare commits
6 Commits
fix/flowch
...
mermaid-ai
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
288205f2dd | ||
|
|
f58f09f346 | ||
|
|
57e526b6af | ||
|
|
d26f2c6043 | ||
|
|
8ca7a28bf3 | ||
|
|
6b77c9c4c7 |
6
.changeset/big-trees-walk.md
Normal file
6
.changeset/big-trees-walk.md
Normal file
@@ -0,0 +1,6 @@
|
||||
---
|
||||
'mermaid': patch
|
||||
'@mermaid-js/docs': patch
|
||||
---
|
||||
|
||||
setting canonicals to mermaid.ai/open-source
|
||||
5
.changeset/tidy-windows-sit.md
Normal file
5
.changeset/tidy-windows-sit.md
Normal file
@@ -0,0 +1,5 @@
|
||||
---
|
||||
'mermaid': patch
|
||||
---
|
||||
|
||||
Replacing links to mermaidchart ith mermaid.ai in the documentation
|
||||
@@ -10,7 +10,7 @@
|
||||
|
||||
# Interface: ParseOptions
|
||||
|
||||
Defined in: [packages/mermaid/src/types.ts:90](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L90)
|
||||
Defined in: [packages/mermaid/src/types.ts:89](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L89)
|
||||
|
||||
## Properties
|
||||
|
||||
@@ -18,7 +18,7 @@ Defined in: [packages/mermaid/src/types.ts:90](https://github.com/mermaid-js/mer
|
||||
|
||||
> `optional` **suppressErrors**: `boolean`
|
||||
|
||||
Defined in: [packages/mermaid/src/types.ts:95](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L95)
|
||||
Defined in: [packages/mermaid/src/types.ts:94](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L94)
|
||||
|
||||
If `true`, parse will return `false` instead of throwing error when the diagram is invalid.
|
||||
The `parseError` function will not be called.
|
||||
|
||||
@@ -10,7 +10,7 @@
|
||||
|
||||
# Interface: ParseResult
|
||||
|
||||
Defined in: [packages/mermaid/src/types.ts:98](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L98)
|
||||
Defined in: [packages/mermaid/src/types.ts:97](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L97)
|
||||
|
||||
## Properties
|
||||
|
||||
@@ -18,7 +18,7 @@ Defined in: [packages/mermaid/src/types.ts:98](https://github.com/mermaid-js/mer
|
||||
|
||||
> **config**: [`MermaidConfig`](MermaidConfig.md)
|
||||
|
||||
Defined in: [packages/mermaid/src/types.ts:106](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L106)
|
||||
Defined in: [packages/mermaid/src/types.ts:105](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L105)
|
||||
|
||||
The config passed as YAML frontmatter or directives
|
||||
|
||||
@@ -28,6 +28,6 @@ The config passed as YAML frontmatter or directives
|
||||
|
||||
> **diagramType**: `string`
|
||||
|
||||
Defined in: [packages/mermaid/src/types.ts:102](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L102)
|
||||
Defined in: [packages/mermaid/src/types.ts:101](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L101)
|
||||
|
||||
The diagram type, e.g. 'flowchart', 'sequence', etc.
|
||||
|
||||
@@ -10,7 +10,7 @@
|
||||
|
||||
# Interface: RenderResult
|
||||
|
||||
Defined in: [packages/mermaid/src/types.ts:116](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L116)
|
||||
Defined in: [packages/mermaid/src/types.ts:115](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L115)
|
||||
|
||||
## Properties
|
||||
|
||||
@@ -18,7 +18,7 @@ Defined in: [packages/mermaid/src/types.ts:116](https://github.com/mermaid-js/me
|
||||
|
||||
> `optional` **bindFunctions**: (`element`) => `void`
|
||||
|
||||
Defined in: [packages/mermaid/src/types.ts:134](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L134)
|
||||
Defined in: [packages/mermaid/src/types.ts:133](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L133)
|
||||
|
||||
Bind function to be called after the svg has been inserted into the DOM.
|
||||
This is necessary for adding event listeners to the elements in the svg.
|
||||
@@ -45,7 +45,7 @@ bindFunctions?.(div); // To call bindFunctions only if it's present.
|
||||
|
||||
> **diagramType**: `string`
|
||||
|
||||
Defined in: [packages/mermaid/src/types.ts:124](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L124)
|
||||
Defined in: [packages/mermaid/src/types.ts:123](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L123)
|
||||
|
||||
The diagram type, e.g. 'flowchart', 'sequence', etc.
|
||||
|
||||
@@ -55,6 +55,6 @@ The diagram type, e.g. 'flowchart', 'sequence', etc.
|
||||
|
||||
> **svg**: `string`
|
||||
|
||||
Defined in: [packages/mermaid/src/types.ts:120](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L120)
|
||||
Defined in: [packages/mermaid/src/types.ts:119](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/types.ts#L119)
|
||||
|
||||
The svg code for the rendered graph.
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
|
||||
The Future of Diagramming & Visual Collaboration
|
||||
|
||||
Try the Ultimate AI, Mermaid, and Visual Diagramming Suite by creating an account at [Mermaid Chart](https://www.mermaidchart.com/app/sign-up).
|
||||
Try the Ultimate AI, Mermaid, and Visual Diagramming Suite by creating an account at [Mermaid Chart](https://mermaid.ai/app/sign-up).
|
||||
|
||||
<br />
|
||||
|
||||
@@ -37,7 +37,7 @@ Try the Ultimate AI, Mermaid, and Visual Diagramming Suite by creating an accoun
|
||||
- [Google Docs](https://gsuite.google.com/marketplace/app/mermaidchart/947683068472)
|
||||
- [Microsoft PowerPoint and Word](https://appsource.microsoft.com/en-us/product/office/WA200006214?tab=Overview)
|
||||
|
||||
Visit our [Plugins](https://www.mermaidchart.com/plugins) page for more information.
|
||||
Visit our [Plugins](https://mermaid.ai/plugins) page for more information.
|
||||
|
||||
- **Collaboration** - A web based collaboration feature for multi-user editing on Mermaid diagrams in real-time (Pro and Enterprise plans).
|
||||
|
||||
@@ -55,7 +55,7 @@ Try the Ultimate AI, Mermaid, and Visual Diagramming Suite by creating an accoun
|
||||
|
||||
To learn more, visit our [Pricing](https://mermaidchart.com/pricing) page.
|
||||
|
||||
Mermaid Chart is currently offering a 7-day free trial on our Pro and Enterprise tiers. Sign up for a free account at [Mermaid Chart](https://www.mermaidchart.com/app/sign-up).
|
||||
Mermaid Chart is currently offering a 7-day free trial on our Pro and Enterprise tiers. Sign up for a free account at [Mermaid Chart](https://mermaid.ai/app/sign-up).
|
||||
|
||||
## Mermaid JS contributions
|
||||
|
||||
|
||||
@@ -130,7 +130,7 @@ And, here is the diagram view from the above example:
|
||||
|
||||
## 2. Using the Mermaid Chart Editor
|
||||
|
||||
Available at the [Mermaid Chart](https://www.mermaidchart.com/) website.
|
||||
Available at the [Mermaid Chart](https://mermaid.ai/) website.
|
||||
|
||||
Mermaid Chart is a web-based diagram editor that allows you to create and edit diagrams in your browser. It is built by the team behind Mermaid.
|
||||
|
||||
@@ -143,7 +143,7 @@ Features include:
|
||||
|
||||
To learn more, visit the [Mermaid Chart page](/ecosystem/mermaid-chart.html) in the Ecosystem section of the documentation.
|
||||
|
||||
Or go to the [Mermaid Chart website](https://www.mermaidchart.com/app/sign-up) to sign up for a Free account.
|
||||
Or go to the [Mermaid Chart website](https://mermaid.ai/app/sign-up) to sign up for a Free account.
|
||||
|
||||
## 3. Using Mermaid Plugins
|
||||
|
||||
@@ -157,13 +157,13 @@ For a list of Mermaid Plugins and Integrations, visit the [Integrations page](..
|
||||
|
||||
Mermaid Chart plugins are available for:
|
||||
|
||||
- [ChatGPT](https://docs.mermaidchart.com/plugins/mermaid-chart-gpt)
|
||||
- [JetBrains IDE](https://docs.mermaidchart.com/plugins/jetbrains-ide)
|
||||
- [Microsoft PowerPoint](https://docs.mermaidchart.com/plugins/microsoft-powerpoint)
|
||||
- [Microsoft Word](https://docs.mermaidchart.com/plugins/microsoft-word)
|
||||
- [Visual Studio Code](https://docs.mermaidchart.com/plugins/visual-studio-code)
|
||||
- [ChatGPT](https://mermaid.ai/plugins/mermaid-chart-gpt)
|
||||
- [JetBrains IDE](https://mermaid.ai/plugins/jetbrains-ide)
|
||||
- [Microsoft PowerPoint](https://mermaid.ai/plugins/microsoft-powerpoint)
|
||||
- [Microsoft Word](https://mermaid.ai/plugins/microsoft-word)
|
||||
- [Visual Studio Code](https://mermaid.ai/plugins/visual-studio-code)
|
||||
|
||||
To learn more, visit the [Mermaid Chart Plugins](https://www.mermaidchart.com/plugins) page.
|
||||
To learn more, visit the [Mermaid Chart Plugins](https://mermaid.ai/plugins) page.
|
||||
|
||||
### Native Mermaid Support
|
||||
|
||||
|
||||
@@ -22,7 +22,7 @@ We're thrilled to announce that Mermaid Chart has successfully raised $7.5 milli
|
||||
|
||||
We are incredibly excited about the future and are grateful to the community, our team, and our investors for being part of this journey. Together, we're not just creating diagrams; we're designing the future of collaboration.
|
||||
|
||||
🌐 Learn more about our groundbreaking tools and what's next for Mermaid Chart by visiting [our website](https://www.mermaidchart.com/blog/posts/mermaid-chart-raises-7.5m-to-reinvent-visual-collaoration-for-enterprises).
|
||||
🌐 Learn more about our groundbreaking tools and what's next for Mermaid Chart by visiting [our website](https://mermaid.ai/blog/posts/mermaid-chart-raises-7.5m-to-reinvent-visual-collaoration-for-enterprises).
|
||||
|
||||
Thank you for being part of our story. Here's to creating, innovating, and collaborating on a global scale!
|
||||
|
||||
@@ -35,12 +35,12 @@ The Mermaid Chart team is excited to introduce a new Visual Editor for Flowchart
|
||||
Learn more:
|
||||
|
||||
- Visual Editor For Flowcharts
|
||||
- [Blog post](https://www.mermaidchart.com/blog/posts/mermaid-chart-releases-new-visual-editor-for-flowcharts)
|
||||
- [Blog post](https://mermaid.ai/blog/posts/mermaid-chart-releases-new-visual-editor-for-flowcharts)
|
||||
|
||||
- [Demo video](https://www.youtube.com/watch?v=5aja0gijoO0)
|
||||
|
||||
- Visual Editor For Sequence diagrams
|
||||
- [Blog post](https://www.mermaidchart.com/blog/posts/mermaid-chart-unveils-visual-editor-for-sequence-diagrams)
|
||||
- [Blog post](https://mermaid.ai/blog/posts/mermaid-chart-unveils-visual-editor-for-sequence-diagrams)
|
||||
|
||||
- [Demo video](https://youtu.be/imc2u5_N6Dc)
|
||||
|
||||
|
||||
@@ -6,337 +6,337 @@
|
||||
|
||||
# Blog
|
||||
|
||||
## [The Essential Guide to Mermaid Chart Plugin for VS Code \[08/2025\]](https://docs.mermaidchart.com/blog/posts/the-essential-guide-to-mermaid-chart-plugin-for-vs-code-08-2025)
|
||||
## [The Essential Guide to Mermaid Chart Plugin for VS Code \[08/2025\]](https://mermaid.ai/blog/posts/the-essential-guide-to-mermaid-chart-plugin-for-vs-code-08-2025)
|
||||
|
||||
9/9/2025 • 5 mins
|
||||
|
||||
Creating diagrams in VS Code has never been easier—the Mermaid VS Code plugin transforms text-based syntax into clear, professional visuals right inside your editor. With live previews, smart editing, and AI-powered diagram generation, it removes the friction from visualization so you can focus on coding.
|
||||
|
||||
## [How to Create Perfect Flowcharts Using AI in 2025 Step-by-Step Guide](https://docs.mermaidchart.com/blog/posts/how-to-create-perfect-flowcharts-using-ai-in-2025-step-by-step-guide)
|
||||
## [How to Create Perfect Flowcharts Using AI in 2025 Step-by-Step Guide](https://mermaid.ai/blog/posts/how-to-create-perfect-flowcharts-using-ai-in-2025-step-by-step-guide)
|
||||
|
||||
7/22/2025 • 8 mins
|
||||
|
||||
In 2025, AI tools make creating flowcharts faster and easier than ever. With Mermaid’s AI flowchart generator, you can turn plain text into clear, accurate diagrams in seconds. This guide walks through how it works and how to get the most out of it for technical and business workflows alike.
|
||||
|
||||
## [Mermaid introduces the Visual Editor for Entity Relationship diagrams](https://docs.mermaidchart.com/blog/posts/mermaid-introduces-the-visual-editor-for-entity-relationship-diagrams)
|
||||
## [Mermaid introduces the Visual Editor for Entity Relationship diagrams](https://mermaid.ai/blog/posts/mermaid-introduces-the-visual-editor-for-entity-relationship-diagrams)
|
||||
|
||||
7/15/2025 • 7 mins
|
||||
|
||||
Mermaid just introduced a Visual Editor for Entity Relationship diagrams, letting anyone map database structures through a simple point-and-click interface instead of code. This no-code ER builder now sits alongside Mermaid’s editors for flowcharts, sequence, and class diagrams, enabling teams to craft and share polished data models for apps, AI, and business processes.
|
||||
|
||||
## [Mermaid supports Treemap Diagrams now!!!](https://docs.mermaidchart.com/blog/posts/mermaid-have-treemap-diagrams-now)
|
||||
## [Mermaid supports Treemap Diagrams now!!!](https://mermaid.ai/blog/posts/mermaid-have-treemap-diagrams-now)
|
||||
|
||||
7/3/2025 • 4 mins
|
||||
|
||||
Mermaid has introduced Treemap diagrams, currently in beta, enhancing hierarchical data visualization. Treemap diagrams use nested rectangles to represent data relationships, focusing on size and proportions. They offer various applications, including budget visualization and market analysis. With simple syntax and customization options, users can effectively present complex data hierarchies.
|
||||
|
||||
## [AI Diagram Generators and Data Visualization: Best Practices](https://docs.mermaidchart.com/blog/posts/ai-diagram-generators-and-data-visualization-best-practices)
|
||||
## [AI Diagram Generators and Data Visualization: Best Practices](https://mermaid.ai/blog/posts/ai-diagram-generators-and-data-visualization-best-practices)
|
||||
|
||||
7/2/2025 • 6 mins
|
||||
|
||||
AI diagram generators transform complex data into clear, interactive visuals – enabling faster analysis, better decisions, and stronger collaboration across teams. By combining automation with manual refinement, these tools empower anyone to communicate insights effectively, regardless of technical skill level.
|
||||
|
||||
## [How to Choose the Best AI Diagram Generator for Your Needs (2025)](https://docs.mermaidchart.com/blog/posts/how-to-choose-the-best-ai-diagram-generator-for-your-needs-2025)
|
||||
## [How to Choose the Best AI Diagram Generator for Your Needs (2025)](https://mermaid.ai/blog/posts/how-to-choose-the-best-ai-diagram-generator-for-your-needs-2025)
|
||||
|
||||
6/26/2025 • 14 mins
|
||||
|
||||
AI diagram generators are transforming how developers visualize and communicate complex systems, reducing hours of manual work into minutes. With tools like Mermaid AI, users benefit from both code-based and visual editing, enabling seamless collaboration and precision. Whether you’re diagramming workflows, software architecture, or data relationships, the right AI tool can significantly boost productivity and streamline communication.
|
||||
|
||||
## [5 Time-Saving Tips for Using Mermaid’s AI Diagram Generator Effectively](https://docs.mermaidchart.com/blog/posts/5-time-saving-tips-for-using-mermaids-ai-diagram-generator-effectively)
|
||||
## [5 Time-Saving Tips for Using Mermaid’s AI Diagram Generator Effectively](https://mermaid.ai/blog/posts/5-time-saving-tips-for-using-mermaids-ai-diagram-generator-effectively)
|
||||
|
||||
6/11/2025 • 10 mins
|
||||
|
||||
See how developers can save time and boost productivity using Mermaid Chart’s AI diagram generator. Learn five practical tips that help turn plain language into powerful, professional diagrams.
|
||||
|
||||
## [Enhancing Team Collaboration with AI-Powered Diagrams](https://docs.mermaidchart.com/blog/posts/enhancing-team-collaboration-with-ai-powered-diagrams)
|
||||
## [Enhancing Team Collaboration with AI-Powered Diagrams](https://mermaid.ai/blog/posts/enhancing-team-collaboration-with-ai-powered-diagrams)
|
||||
|
||||
5/27/2025 • 6 mins
|
||||
|
||||
Software teams move fast, but old-school diagramming tools can’t keep up. Mermaid Chart replaces static slides and whiteboards with real-time, AI-generated visuals that evolve with your code and ideas. Just describe a process in plain English, and watch it come to life.
|
||||
|
||||
## [What is an AI Diagram Generator? Benefits and Use Cases](https://docs.mermaidchart.com/blog/posts/what-is-an-ai-diagram-generator-benefits-and-use-cases)
|
||||
## [What is an AI Diagram Generator? Benefits and Use Cases](https://mermaid.ai/blog/posts/what-is-an-ai-diagram-generator-benefits-and-use-cases)
|
||||
|
||||
5/22/2025 • 6 mins
|
||||
|
||||
Discover how AI diagram generators like Mermaid Chart transform developer workflows. Instantly turn text into flowcharts, ERDs, and system diagrams, no manual drag-and-drop needed. Learn how it works, key benefits, and real-world use cases.
|
||||
|
||||
## [How to Use Mermaid Chart as an AI Diagram Generator for Developers](https://docs.mermaidchart.com/blog/posts/how-to-use-mermaid-chart-as-an-ai-diagram-generator)
|
||||
## [How to Use Mermaid Chart as an AI Diagram Generator for Developers](https://mermaid.ai/blog/posts/how-to-use-mermaid-chart-as-an-ai-diagram-generator)
|
||||
|
||||
5/21/2025 • 9 mins
|
||||
|
||||
Would an AI diagram generator make your life easier? We think it would!
|
||||
|
||||
## [Mermaid Chart VS Code Plugin: Create and Edit Mermaid.js Diagrams in Visual Studio Code](https://docs.mermaidchart.com/blog/posts/mermaid-chart-vs-code-plugin-create-and-edit-mermaid-js-diagrams-in-visual-studio-code)
|
||||
## [Mermaid Chart VS Code Plugin: Create and Edit Mermaid.js Diagrams in Visual Studio Code](https://mermaid.ai/blog/posts/mermaid-chart-vs-code-plugin-create-and-edit-mermaid-js-diagrams-in-visual-studio-code)
|
||||
|
||||
3/21/2025 • 5 mins
|
||||
|
||||
The Mermaid Chart VS Code Plugin is a powerful developer diagramming tool that brings Mermaid.js diagramming directly into your Visual Studio Code environment. Whether you’re visualizing software architecture, documenting API flows, fixing bad documentation, or managing flowcharts and sequence diagrams, this plugin integrates seamlessly into your workflow. Key Features of the Mermaid Chart VS Code \[…]
|
||||
|
||||
## [Mermaid Chart: The Evolution of Mermaid](https://docs.mermaidchart.com/blog/posts/mermaid-chart-the-evolution-of-mermaid)
|
||||
## [Mermaid Chart: The Evolution of Mermaid](https://mermaid.ai/blog/posts/mermaid-chart-the-evolution-of-mermaid)
|
||||
|
||||
1/30/2025 • 3 mins
|
||||
|
||||
Mermaid revolutionized diagramming with its simple, markdown-style syntax, empowering millions of developers worldwide. Now, Mermaid Chart takes it further with AI-powered visuals, a GUI for seamless editing, real-time collaboration, and advanced design tools. Experience the next generation of diagramming—faster, smarter, and built for modern teams. Try Mermaid Chart today!
|
||||
|
||||
## [GUI for editing Mermaid Class Diagrams](https://docs.mermaidchart.com/blog/posts/gui-for-editing-mermaid-class-diagrams)
|
||||
## [GUI for editing Mermaid Class Diagrams](https://mermaid.ai/blog/posts/gui-for-editing-mermaid-class-diagrams)
|
||||
|
||||
1/17/2025 • 5 mins
|
||||
|
||||
Discover how the latest update to the Mermaid Visual Editor transforms class diagramming. With new intuitive tools for creating and editing diagrams, dynamic relationship management, and customizable layouts, this feature-packed enhancement streamlines your diagramming experience like never before.
|
||||
|
||||
## [7 ER Diagram Examples For Database Modeling from Mermaid AI](https://docs.mermaidchart.com/blog/posts/7-er-diagram-examples-for-database-modeling-from-mermaid-ai)
|
||||
## [7 ER Diagram Examples For Database Modeling from Mermaid AI](https://mermaid.ai/blog/posts/7-er-diagram-examples-for-database-modeling-from-mermaid-ai)
|
||||
|
||||
1/16/2025 • 6 mins
|
||||
|
||||
Entity relationship (ER) diagrams are a cornerstone of database design, providing a blueprint for modeling your database and enabling clear communication across functions in your organization. As data volumes continue to soar and as AI models demand clean, well-organized data, ER diagrams have become more vital than ever. You can now quickly build ER diagrams with Mermaid Chart, Mermaid AI to kick-start and fine tune your diagrams . From e-commerce payment flows to social media interactions and healthcare systems, ER diagrams are powering modern, data-driven environments.
|
||||
|
||||
## [Mermaid Whiteboard: Visual Collaboration Made Universal](https://docs.mermaidchart.com/blog/posts/mermaid-whiteboard-visual-collaboration-made-universal)
|
||||
## [Mermaid Whiteboard: Visual Collaboration Made Universal](https://mermaid.ai/blog/posts/mermaid-whiteboard-visual-collaboration-made-universal)
|
||||
|
||||
12/6/2024 • 2 mins
|
||||
|
||||
The Mermaid Whiteboard combines Mermaid syntax with a drag-and-drop interface, making it easier for teams to create, edit, and refine diagrams together. Whether you prefer working with code, visuals, Mermaid AI or all three, this tool adapts to your needs while keeping everything tied to Mermaid’s syntax. Key Features 1. Dual-Mode Editing Switch seamlessly between \[…]
|
||||
|
||||
## [Mermaid 11.4 is out: New Features and Kanban Diagramming](https://www.mermaidchart.com/blog/posts/mermaid-11-4-is-out-new-features-and-kanban-diagramming)
|
||||
## [Mermaid 11.4 is out: New Features and Kanban Diagramming](https://mermaid.ai/blog/posts/mermaid-11-4-is-out-new-features-and-kanban-diagramming)
|
||||
|
||||
October 31, 2024 · 2 mins
|
||||
|
||||
Mermaid 11.4 brings enhanced functionality with the introduction of Kanban diagrams, allowing users to create visual workflows with status columns and task details.
|
||||
|
||||
## [How To Build an ER Diagram with Mermaid Chart](https://www.mermaidchart.com/blog/posts/how-to-build-an-er-diagram-with-mermaid-chart)
|
||||
## [How To Build an ER Diagram with Mermaid Chart](https://mermaid.ai/blog/posts/how-to-build-an-er-diagram-with-mermaid-chart)
|
||||
|
||||
October 24, 2024 · 4 mins
|
||||
|
||||
An entity relationship (ER) diagram acts like a blueprint for your database. This makes ER diagrams effective tools for anyone dealing with complex databases, data modeling, and AI model training.
|
||||
|
||||
## [Expanding the Horizons of Mermaid Flowcharts: Introducing 30 New Shapes!](https://www.mermaidchart.com/blog/posts/new-mermaid-flowchart-shapes/)
|
||||
## [Expanding the Horizons of Mermaid Flowcharts: Introducing 30 New Shapes!](https://mermaid.ai/blog/posts/new-mermaid-flowchart-shapes/)
|
||||
|
||||
24 September 2024 · 5 mins
|
||||
|
||||
Discover 30 new shapes in Mermaid flowcharts, offering enhanced clarity, customization, and versatility for more dynamic and expressive visualizations.
|
||||
|
||||
## [Introducing Architecture Diagrams in Mermaid](https://www.mermaidchart.com/blog/posts/mermaid-supports-architecture-diagrams/)
|
||||
## [Introducing Architecture Diagrams in Mermaid](https://mermaid.ai/blog/posts/mermaid-supports-architecture-diagrams/)
|
||||
|
||||
2 September 2024 · 2 mins
|
||||
|
||||
Discover the fresh new and unique Neo and Hand-Drawn looks for Mermaid Diagrams, while still offering the classic look you love.
|
||||
|
||||
## [Mermaid v11 is out!](https://www.mermaidchart.com/blog/posts/mermaid-v11/)
|
||||
## [Mermaid v11 is out!](https://mermaid.ai/blog/posts/mermaid-v11/)
|
||||
|
||||
23 August 2024 · 2 mins
|
||||
|
||||
Mermaid v11 introduces advanced layout options, new diagram types, and enhanced customization features, thanks to the incredible contributions from our community.
|
||||
|
||||
## [Mermaid Innovation - Introducing New Looks for Mermaid Diagrams](https://www.mermaidchart.com/blog/posts/mermaid-innovation-introducing-new-looks-for-mermaid-diagrams/)
|
||||
## [Mermaid Innovation - Introducing New Looks for Mermaid Diagrams](https://mermaid.ai/blog/posts/mermaid-innovation-introducing-new-looks-for-mermaid-diagrams/)
|
||||
|
||||
6 August 2024 ·3 mins
|
||||
|
||||
Discover the fresh new and unique Neo and Hand-Drawn looks for Mermaid Diagrams, while still offering the classic look you love.
|
||||
|
||||
## [The Mermaid Chart Plugin for Jira: A How-To User Guide](https://www.mermaidchart.com/blog/posts/the-mermaid-chart-plugin-for-jira-a-how-to-user-guide/)
|
||||
## [The Mermaid Chart Plugin for Jira: A How-To User Guide](https://mermaid.ai/blog/posts/the-mermaid-chart-plugin-for-jira-a-how-to-user-guide/)
|
||||
|
||||
31 July 2024 · 5 mins
|
||||
|
||||
The Mermaid Chart plugin for Jira has arrived!
|
||||
|
||||
## [Mermaid AI Is Here to Change the Game For Diagram Creation](https://www.mermaidchart.com/blog/posts/mermaid-ai-is-here-to-change-the-game-for-diagram-creation/)
|
||||
## [Mermaid AI Is Here to Change the Game For Diagram Creation](https://mermaid.ai/blog/posts/mermaid-ai-is-here-to-change-the-game-for-diagram-creation/)
|
||||
|
||||
22 July 2024 · 5 mins
|
||||
|
||||
The Mermaid AI chat interface
|
||||
|
||||
## [How to Make a Sequence Diagram with Mermaid Chart](https://www.mermaidchart.com/blog/posts/how-to-make-a-sequence-diagram-in-mermaid-chart-step-by-step-guide/)
|
||||
## [How to Make a Sequence Diagram with Mermaid Chart](https://mermaid.ai/blog/posts/how-to-make-a-sequence-diagram-in-mermaid-chart-step-by-step-guide/)
|
||||
|
||||
8 July 2024 · 6 mins
|
||||
|
||||
Sequence diagrams are important for communicating complex systems in a clear and concise manner.
|
||||
|
||||
## [How to Use the New “Comments” Feature in Mermaid Chart](https://www.mermaidchart.com/blog/posts/how-to-use-the-new-comments-feature-in-mermaid-chart/)
|
||||
## [How to Use the New “Comments” Feature in Mermaid Chart](https://mermaid.ai/blog/posts/how-to-use-the-new-comments-feature-in-mermaid-chart/)
|
||||
|
||||
2 July 2024 · 3 mins
|
||||
|
||||
How to Use the New Comments Feature in Mermaid Chart
|
||||
|
||||
## [How to Use the official Mermaid Chart for Confluence app](https://www.mermaidchart.com/blog/posts/how-to-use-the-official-mermaid-chart-for-confluence-app/)
|
||||
## [How to Use the official Mermaid Chart for Confluence app](https://mermaid.ai/blog/posts/how-to-use-the-official-mermaid-chart-for-confluence-app/)
|
||||
|
||||
21 May 2024 · 4 mins
|
||||
|
||||
It doesn’t matter if you’re a data enthusiast, software engineer, or visual storyteller; our Confluence app can allow you to embed Mermaid Chart diagrams — and dynamically edit them — within your Confluence pages.
|
||||
|
||||
## [How to Choose the Right Documentation Software](https://www.mermaidchart.com/blog/posts/how-to-choose-the-right-documentation-software/)
|
||||
## [How to Choose the Right Documentation Software](https://mermaid.ai/blog/posts/how-to-choose-the-right-documentation-software/)
|
||||
|
||||
7 May 2024 · 5 mins
|
||||
|
||||
How to Choose the Right Documentation Software. Reliable and efficient documentation software is crucial in the fast-paced world of software development.
|
||||
|
||||
## [AI in software diagramming: What trends will define the future?](https://www.mermaidchart.com/blog/posts/ai-in-software-diagramming/)
|
||||
## [AI in software diagramming: What trends will define the future?](https://mermaid.ai/blog/posts/ai-in-software-diagramming/)
|
||||
|
||||
24 April 2024 · 5 mins
|
||||
|
||||
Artificial intelligence (AI) tools are changing the way developers work.
|
||||
|
||||
## [Mermaid Chart Unveils Visual Editor for Sequence Diagrams](https://www.mermaidchart.com/blog/posts/mermaid-chart-unveils-visual-editor-for-sequence-diagrams/)
|
||||
## [Mermaid Chart Unveils Visual Editor for Sequence Diagrams](https://mermaid.ai/blog/posts/mermaid-chart-unveils-visual-editor-for-sequence-diagrams/)
|
||||
|
||||
8 April 2024 · 5 mins
|
||||
|
||||
Sequence diagrams are excellent tools for communication and documentation.
|
||||
|
||||
## [Modeling system states: It starts with a Turing machine](https://www.mermaidchart.com/blog/posts/modeling-system-states/)
|
||||
## [Modeling system states: It starts with a Turing machine](https://mermaid.ai/blog/posts/modeling-system-states/)
|
||||
|
||||
27 March 2024 · 12 mins
|
||||
|
||||
In computer science, there are a few fundamental papers that, without exaggeration, changed everything.
|
||||
|
||||
## [Mermaid Chart Raises $7.5M to Reinvent Visual Collaboration for Enterprises](https://www.mermaidchart.com/blog/posts/mermaid-chart-raises-7.5m-to-reinvent-visual-collaoration-for-enterprises/)
|
||||
## [Mermaid Chart Raises $7.5M to Reinvent Visual Collaboration for Enterprises](https://mermaid.ai/blog/posts/mermaid-chart-raises-7.5m-to-reinvent-visual-collaoration-for-enterprises/)
|
||||
|
||||
20 March 2024 · 4 mins
|
||||
|
||||
Mermaid Chart, the company offering text-based diagramming and workflow management tools, today announced it has raised $7.5 million in Seed funding.
|
||||
|
||||
## [Mermaid Chart GPT Is Now Available In the GPT Store!](https://www.mermaidchart.com/blog/posts/mermaid-chart-gpt-is-now-available-in-the-gpt-store/)
|
||||
## [Mermaid Chart GPT Is Now Available In the GPT Store!](https://mermaid.ai/blog/posts/mermaid-chart-gpt-is-now-available-in-the-gpt-store/)
|
||||
|
||||
7 March 2024 · 3 mins
|
||||
|
||||
Mermaid Chart GPT is Now Available In the GPT Store!
|
||||
|
||||
## [How to Make a Flowchart with Mermaid Chart](https://www.mermaidchart.com/blog/posts/how-to-make-flowcharts-with-mermaid-chart/)
|
||||
## [How to Make a Flowchart with Mermaid Chart](https://mermaid.ai/blog/posts/how-to-make-flowcharts-with-mermaid-chart/)
|
||||
|
||||
30 January 2024 · 6 mins
|
||||
|
||||
Learn how to make a flowchart with Mermaid Chart, the leading text-to-diagram platform for both developers and non-developers.
|
||||
|
||||
## [How one data scientist uses Mermaid Chart to quickly and easily build flowcharts](https://www.mermaidchart.com/blog/posts/customer-spotlight-ari-tal/)
|
||||
## [How one data scientist uses Mermaid Chart to quickly and easily build flowcharts](https://mermaid.ai/blog/posts/customer-spotlight-ari-tal/)
|
||||
|
||||
23 January 2024 · 4 mins
|
||||
|
||||
Read about how Ari Tal, a data scientist and founder of Leveling Up with XAI, utilizes Mermaid Chart for its easy-to-use flowchart creation capabilities to enhance his work in explainable AI (XAI).
|
||||
|
||||
## [Introducing Mermaid Chart’s JetBrains IDE Extension](https://www.mermaidchart.com/blog/posts/introducing-mermaid-charts-jetbrains-ide-extension/)
|
||||
## [Introducing Mermaid Chart’s JetBrains IDE Extension](https://mermaid.ai/blog/posts/introducing-mermaid-charts-jetbrains-ide-extension/)
|
||||
|
||||
20 December 2023 · 5 mins
|
||||
|
||||
Diagrams are essential for documenting your code.
|
||||
|
||||
## [Mermaid Chart Releases New Visual Editor For Flowcharts](https://www.mermaidchart.com/blog/posts/mermaid-chart-releases-new-visual-editor-for-flowcharts/)
|
||||
## [Mermaid Chart Releases New Visual Editor For Flowcharts](https://mermaid.ai/blog/posts/mermaid-chart-releases-new-visual-editor-for-flowcharts/)
|
||||
|
||||
14 December 2023 · 5 mins
|
||||
|
||||
Mermaid Chart introduces a new Visual Editor for flowcharts, enabling users of all skill levels to create diagrams easily and efficiently, with both GUI and code-based editing options.
|
||||
|
||||
## [7 best practices (+ examples) for good developer documentation](https://www.mermaidchart.com/blog/posts/7-best-practices-for-good-documentation/)
|
||||
## [7 best practices (+ examples) for good developer documentation](https://mermaid.ai/blog/posts/7-best-practices-for-good-documentation/)
|
||||
|
||||
4 December 2023 · 11 min
|
||||
|
||||
Essential strategies for crafting grate developer documentation, with practical examples and insights from leading tech companies.
|
||||
|
||||
## [5 Reasons You Should Be Using Mermaid Chart As Your Diagram Generator](https://www.mermaidchart.com/blog/posts/5-reasons-you-should-be-using-mermaid-chart-as-your-diagram-generator/)
|
||||
## [5 Reasons You Should Be Using Mermaid Chart As Your Diagram Generator](https://mermaid.ai/blog/posts/5-reasons-you-should-be-using-mermaid-chart-as-your-diagram-generator/)
|
||||
|
||||
14 November 2023 · 5 mins
|
||||
|
||||
Mermaid Chart, a user-friendly, code-based diagram generator with AI integrations, templates, collaborative tools, and plugins for developers, streamlines the process of creating and sharing diagrams, enhancing both creativity and collaboration.
|
||||
|
||||
## [How to Use Mermaid Chart as an AI Diagram Generator](https://www.mermaidchart.com/blog/posts/how-to-use-mermaid-chart-as-an-ai-diagram-generator/)
|
||||
## [How to Use Mermaid Chart as an AI Diagram Generator](https://mermaid.ai/blog/posts/how-to-use-mermaid-chart-as-an-ai-diagram-generator/)
|
||||
|
||||
1 November 2023 · 5 mins
|
||||
|
||||
Would an AI diagram generator make your life easier?
|
||||
|
||||
## [Diagrams, Made Even Easier: Introducing “Code Snippets” in the Mermaid Chart Editor](https://www.mermaidchart.com/blog/posts/easier-diagram-editing-with-code-snippets/)
|
||||
## [Diagrams, Made Even Easier: Introducing “Code Snippets” in the Mermaid Chart Editor](https://mermaid.ai/blog/posts/easier-diagram-editing-with-code-snippets/)
|
||||
|
||||
12 October 2023 · 4 mins
|
||||
|
||||
Mermaid Chart introduces Code Snippets in its editor, streamlining the diagramming process for developers and professionals.
|
||||
|
||||
## [How to Make a Git Graph with Mermaid Chart](https://www.mermaidchart.com/blog/posts/how-to-make-a-git-graph-with-mermaid-chart/)
|
||||
## [How to Make a Git Graph with Mermaid Chart](https://mermaid.ai/blog/posts/how-to-make-a-git-graph-with-mermaid-chart/)
|
||||
|
||||
22 September 2023 · 7 mins
|
||||
|
||||
A git graph is one of the more useful forms of diagrams for developers and DevOps professionals.
|
||||
|
||||
## [Present flow data using Sankey diagrams in Mermaid, thanks to Nikolay Rozhkov](https://www.mermaidchart.com/blog/posts/present-flow-data-using-sankey-diagrams/)
|
||||
## [Present flow data using Sankey diagrams in Mermaid, thanks to Nikolay Rozhkov](https://mermaid.ai/blog/posts/present-flow-data-using-sankey-diagrams/)
|
||||
|
||||
8 September 2023 · 4 mins
|
||||
|
||||
Sankey diagrams are a powerful tool for visualizing flow data.
|
||||
|
||||
## [Special cases broke Microsoft Zune and can ruin your code base too](https://www.mermaidchart.com/blog/posts/special-cases-broke-microsoft-zune-and-can-ruin-your-code-base-too/)
|
||||
## [Special cases broke Microsoft Zune and can ruin your code base too](https://mermaid.ai/blog/posts/special-cases-broke-microsoft-zune-and-can-ruin-your-code-base-too/)
|
||||
|
||||
23 August 2023 · 15 mins
|
||||
|
||||
Read about the pitfalls of special cases in programming, illustrating how they can lead to complexity, diminish readability, and create maintenance challenges.
|
||||
|
||||
## [New AI chatbot now available on Mermaid Chart to simplify text-based diagram creation](https://www.mermaidchart.com/blog/posts/ai-chatbot-now-available-on-mermaid-chart-to-simplify-text-based-diagram-creation/)
|
||||
## [New AI chatbot now available on Mermaid Chart to simplify text-based diagram creation](https://mermaid.ai/blog/posts/ai-chatbot-now-available-on-mermaid-chart-to-simplify-text-based-diagram-creation/)
|
||||
|
||||
14 August 2023 · 4 mins
|
||||
|
||||
Introducing Mermaid Chart’s new AI chatbot, a diagramming assistant that simplifies text-based diagram creation for everyone, from developers to educators, offering features to start, edit, and fix diagrams, and embodying our vision to make diagramming accessible, user-friendly, and fun.
|
||||
|
||||
## [Believe It or Not, You Still Need an Online UML Diagram Tool](https://www.mermaidchart.com/blog/posts/uml-diagram-tool/)
|
||||
## [Believe It or Not, You Still Need an Online UML Diagram Tool](https://mermaid.ai/blog/posts/uml-diagram-tool/)
|
||||
|
||||
14 August 2023 · 8 mins
|
||||
|
||||
A UML diagram tool helps developers and other professionals quickly create and share UML diagrams that communicate information about complex software systems.
|
||||
|
||||
## [From Chaos to Clarity: Exploring Mind Maps with MermaidJS](https://www.mermaidchart.com/blog/posts/from-chaos-to-clarity-exploring-mind-maps-with-mermaidjs)
|
||||
## [From Chaos to Clarity: Exploring Mind Maps with MermaidJS](https://mermaid.ai/blog/posts/from-chaos-to-clarity-exploring-mind-maps-with-mermaidjs)
|
||||
|
||||
24 July 2023 · 4 mins
|
||||
|
||||
Introducing the concept of mind mapping as a tool for organizing complex information, and highlights Mermaid as a user-friendly software that simplifies the creation and editing of mind maps for applications in IT solution design, business decision-making, and knowledge organization.
|
||||
|
||||
## [Mermaid Chart Announces Visual Studio Code Plugin to Simplify Development Workflows](https://www.mermaidchart.com/blog/posts/mermaid-chart-announces-visual-studio-code-plugin)
|
||||
## [Mermaid Chart Announces Visual Studio Code Plugin to Simplify Development Workflows](https://mermaid.ai/blog/posts/mermaid-chart-announces-visual-studio-code-plugin)
|
||||
|
||||
17 July 2023 · 3 mins
|
||||
|
||||
New Integration Enhances Workflows By Enabling Developers To Reference And Edit Diagrams Within Visual Studio Code.
|
||||
|
||||
## [Mermaid Chart’s ChatGPT Plugin Combines Generative AI and Smart Diagramming For Users](https://www.mermaidchart.com/blog/posts/mermaid-chart-chatgpt-plugin-combines-generative-ai-and-smart-diagramming)
|
||||
## [Mermaid Chart’s ChatGPT Plugin Combines Generative AI and Smart Diagramming For Users](https://mermaid.ai/blog/posts/mermaid-chart-chatgpt-plugin-combines-generative-ai-and-smart-diagramming)
|
||||
|
||||
29 June 2023 · 4 mins
|
||||
|
||||
Mermaid Chart’s new ChatGPT plugin integrates AI-powered text prompts with Mermaid’s intuitive diagramming editor, enabling users to generate, edit, and share complex diagrams with ease and efficiency.
|
||||
|
||||
## [Sequence diagrams, the only good thing UML brought to software development](https://www.mermaidchart.com/blog/posts/sequence-diagrams-the-good-thing-uml-brought-to-software-development/)
|
||||
## [Sequence diagrams, the only good thing UML brought to software development](https://mermaid.ai/blog/posts/sequence-diagrams-the-good-thing-uml-brought-to-software-development/)
|
||||
|
||||
15 June 2023 · 12 mins
|
||||
|
||||
Sequence diagrams really shine when you’re documenting different parts of a system and the various ways these parts interact with each other.
|
||||
|
||||
## [subhash-halder contributed quadrant charts so you can show your manager what to select - just like the strategy consultants at BCG do](https://www.mermaidchart.com/blog/posts/subhash-halder-contributed-quadrant-charts-so-you-can-show-your-manager-what-to-select-just-like-the-strategy-consultants-at-bcg-do/)
|
||||
## [subhash-halder contributed quadrant charts so you can show your manager what to select - just like the strategy consultants at BCG do](https://mermaid.ai/blog/posts/subhash-halder-contributed-quadrant-charts-so-you-can-show-your-manager-what-to-select-just-like-the-strategy-consultants-at-bcg-do/)
|
||||
|
||||
8 June 2023 · 7 mins
|
||||
|
||||
A quadrant chart is a useful diagram that helps users visualize data and identify patterns in a data set.
|
||||
|
||||
## [Bad documentation is bad for developers](https://www.mermaidchart.com/blog/posts/bad-documentation-is-bad-for-developers)
|
||||
## [Bad documentation is bad for developers](https://mermaid.ai/blog/posts/bad-documentation-is-bad-for-developers)
|
||||
|
||||
26 April 2023 · 11 mins
|
||||
|
||||
Documentation tends to be bad because companies and projects don’t fully realize the costs of bad documentation.
|
||||
|
||||
## [Automatic text wrapping in flowcharts is here!](https://www.mermaidchart.com/blog/posts/automatic-text-wrapping-in-flowcharts-is-here/)
|
||||
## [Automatic text wrapping in flowcharts is here!](https://mermaid.ai/blog/posts/automatic-text-wrapping-in-flowcharts-is-here/)
|
||||
|
||||
3 April 2023 · 3 mins
|
||||
|
||||
Markdown Strings reduce the hassle # Starting from v10.
|
||||
|
||||
## [Mermaid Chart officially launched with sharable diagram links and presentation mode](https://www.mermaidchart.com/blog/posts/mermaid-chart-officially-launched-with-sharable-diagram-links-and-presentation-mode/)
|
||||
## [Mermaid Chart officially launched with sharable diagram links and presentation mode](https://mermaid.ai/blog/posts/mermaid-chart-officially-launched-with-sharable-diagram-links-and-presentation-mode/)
|
||||
|
||||
27 March 2023 · 2 mins
|
||||
|
||||
Exciting news for all Mermaid OSS fans: Mermaid Chart has officially launched with Mermaid Chart!
|
||||
|
||||
## [If you're not excited about ChatGPT, then you're not being creative](https://www.mermaidchart.com/blog/posts/if-youre-not-excited-about-chatgpt-then-youre-not-being-creative-enough/)
|
||||
## [If you're not excited about ChatGPT, then you're not being creative](https://mermaid.ai/blog/posts/if-youre-not-excited-about-chatgpt-then-youre-not-being-creative-enough/)
|
||||
|
||||
8 March 2023 · 9 mins
|
||||
|
||||
The hype around AI in general and ChatGPT, in particular, is so intense that it’s very understandable to assume the hype train is driving straight toward the trough of disillusionment.
|
||||
|
||||
## [Flow charts are O(n)2 complex, so don't go over 100 connections](https://www.mermaidchart.com/blog/posts/flow-charts-are-on2-complex-so-dont-go-over-100-connections/)
|
||||
## [Flow charts are O(n)2 complex, so don't go over 100 connections](https://mermaid.ai/blog/posts/flow-charts-are-on2-complex-so-dont-go-over-100-connections/)
|
||||
|
||||
1 March 2023 · 12 mins
|
||||
|
||||
Flowchart design is a game of balance: Read about the importance of dialling in the right level of detail and how to manage complexity in large flowcharts.
|
||||
|
||||
## [Busting the myth that developers can't write](https://www.mermaidchart.com/blog/posts/busting-the-myth-that-developers-cant-write/)
|
||||
## [Busting the myth that developers can't write](https://mermaid.ai/blog/posts/busting-the-myth-that-developers-cant-write/)
|
||||
|
||||
10 February 2023 · 10 mins
|
||||
|
||||
|
||||
@@ -85,17 +85,6 @@ export class FlowDB implements DiagramDB {
|
||||
return common.sanitizeText(txt, this.config);
|
||||
}
|
||||
|
||||
private sanitizeNodeLabelType(labelType?: string) {
|
||||
switch (labelType) {
|
||||
case 'markdown':
|
||||
case 'string':
|
||||
case 'text':
|
||||
return labelType;
|
||||
default:
|
||||
return 'markdown';
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Function to lookup domId from id in the graph definition.
|
||||
*
|
||||
@@ -219,7 +208,6 @@ export class FlowDB implements DiagramDB {
|
||||
|
||||
if (doc?.label) {
|
||||
vertex.text = doc?.label;
|
||||
vertex.labelType = this.sanitizeNodeLabelType(doc?.labelType);
|
||||
}
|
||||
if (doc?.icon) {
|
||||
vertex.icon = doc?.icon;
|
||||
@@ -279,7 +267,7 @@ export class FlowDB implements DiagramDB {
|
||||
if (edge.text.startsWith('"') && edge.text.endsWith('"')) {
|
||||
edge.text = edge.text.substring(1, edge.text.length - 1);
|
||||
}
|
||||
edge.labelType = this.sanitizeNodeLabelType(linkTextObj.type);
|
||||
edge.labelType = linkTextObj.type;
|
||||
}
|
||||
|
||||
if (type !== undefined) {
|
||||
@@ -714,7 +702,7 @@ You have to call mermaid.initialize.`
|
||||
title: title.trim(),
|
||||
classes: [],
|
||||
dir,
|
||||
labelType: this.sanitizeNodeLabelType(_title?.type),
|
||||
labelType: _title.type,
|
||||
};
|
||||
|
||||
log.info('Adding', subGraph.id, subGraph.nodes, subGraph.dir);
|
||||
@@ -1024,7 +1012,6 @@ You have to call mermaid.initialize.`
|
||||
const baseNode = {
|
||||
id: vertex.id,
|
||||
label: vertex.text,
|
||||
labelType: vertex.labelType,
|
||||
labelStyle: '',
|
||||
parentId,
|
||||
padding: config.flowchart?.padding || 8,
|
||||
@@ -1101,7 +1088,6 @@ You have to call mermaid.initialize.`
|
||||
id: subGraph.id,
|
||||
label: subGraph.title,
|
||||
labelStyle: '',
|
||||
labelType: subGraph.labelType,
|
||||
parentId: parentDB.get(subGraph.id),
|
||||
padding: 8,
|
||||
cssCompiledStyles: this.getCompiledStyles(subGraph.classes),
|
||||
@@ -1133,7 +1119,6 @@ You have to call mermaid.initialize.`
|
||||
end: rawEdge.end,
|
||||
type: rawEdge.type ?? 'normal',
|
||||
label: rawEdge.text,
|
||||
labelType: rawEdge.labelType,
|
||||
labelpos: 'c',
|
||||
thickness: rawEdge.stroke,
|
||||
minlen: rawEdge.length,
|
||||
|
||||
@@ -29,7 +29,7 @@ export interface FlowVertex {
|
||||
domId: string;
|
||||
haveCallback?: boolean;
|
||||
id: string;
|
||||
labelType: 'markdown' | 'string' | 'text';
|
||||
labelType: 'text';
|
||||
link?: string;
|
||||
linkTarget?: string;
|
||||
props?: any;
|
||||
@@ -62,7 +62,7 @@ export interface FlowEdge {
|
||||
style?: string[];
|
||||
length?: number;
|
||||
text: string;
|
||||
labelType: 'markdown' | 'string' | 'text';
|
||||
labelType: 'text';
|
||||
classes: string[];
|
||||
id?: string;
|
||||
animation?: 'fast' | 'slow';
|
||||
|
||||
@@ -8,7 +8,7 @@ import type { CanonicalUrlConfig } from './canonical-urls.js';
|
||||
*/
|
||||
export const canonicalConfig: CanonicalUrlConfig = {
|
||||
// Base URL for the Mermaid documentation site
|
||||
baseUrl: 'https://docs.mermaidchart.com',
|
||||
baseUrl: 'https://mermaid.ai/open-source',
|
||||
|
||||
// Disable automatic generation - only use specificCanonicalUrls
|
||||
autoGenerate: false,
|
||||
@@ -57,93 +57,6 @@ export const canonicalConfig: CanonicalUrlConfig = {
|
||||
},
|
||||
};
|
||||
|
||||
/**
|
||||
* Pages that should have specific canonical URLs
|
||||
*
|
||||
* Since autoGenerate is set to false, ONLY pages listed here will get canonical URLs.
|
||||
*
|
||||
* Usage: Add entries to this object where the key is the relative path
|
||||
* of the markdown file and the value is the desired canonical URL.
|
||||
*
|
||||
* Examples:
|
||||
* - 'intro/index.md': 'https://docs.mermaidchart.com/intro/index.html'
|
||||
* - 'syntax/flowchart.md': 'https://docs.mermaidchart.com/mermaid-oss/syntax/flowchart.html'
|
||||
* - 'config/configuration.md': 'https://docs.mermaidchart.com/mermaid-oss/config/configuration.html'
|
||||
*/
|
||||
export const specificCanonicalUrls: Record<string, string> = {
|
||||
// Add your specific canonical URLs here
|
||||
// Example:
|
||||
// 'syntax/flowchart.md': 'https://docs.mermaidchart.com/mermaid-oss/syntax/flowchart.html',
|
||||
|
||||
// Intro section
|
||||
'intro/index.md': 'https://docs.mermaidchart.com/intro/index.html',
|
||||
'intro/getting-started.md':
|
||||
'https://docs.mermaidchart.com/mermaid-oss/intro/getting-started.html',
|
||||
'intro/syntax-reference.md':
|
||||
'https://docs.mermaidchart.com/mermaid-oss/intro/syntax-reference.html',
|
||||
|
||||
// Syntax section
|
||||
'syntax/flowchart.md': 'https://docs.mermaidchart.com/mermaid-oss/syntax/flowchart.html',
|
||||
'syntax/sequenceDiagram.md':
|
||||
'https://docs.mermaidchart.com/mermaid-oss/syntax/sequenceDiagram.html',
|
||||
'syntax/classDiagram.md': 'https://docs.mermaidchart.com/mermaid-oss/syntax/classDiagram.html',
|
||||
'syntax/stateDiagram.md': 'https://docs.mermaidchart.com/mermaid-oss/syntax/stateDiagram.html',
|
||||
'syntax/entityRelationshipDiagram.md':
|
||||
'https://docs.mermaidchart.com/mermaid-oss/syntax/entityRelationshipDiagram.html',
|
||||
'syntax/userJourney.md': 'https://docs.mermaidchart.com/mermaid-oss/syntax/userJourney.html',
|
||||
'syntax/gantt.md': 'https://docs.mermaidchart.com/mermaid-oss/syntax/gantt.html',
|
||||
'syntax/pie.md': 'https://docs.mermaidchart.com/mermaid-oss/syntax/pie.html',
|
||||
'syntax/quadrantChart.md': 'https://docs.mermaidchart.com/mermaid-oss/syntax/quadrantChart.html',
|
||||
'syntax/requirementDiagram.md':
|
||||
'https://docs.mermaidchart.com/mermaid-oss/syntax/requirementDiagram.html',
|
||||
'syntax/mindmap.md': 'https://docs.mermaidchart.com/mermaid-oss/syntax/mindmap.html',
|
||||
'syntax/timeline.md': 'https://docs.mermaidchart.com/mermaid-oss/syntax/timeline.html',
|
||||
'syntax/gitgraph.md': 'https://docs.mermaidchart.com/mermaid-oss/syntax/gitgraph.html',
|
||||
'syntax/c4.md': 'https://docs.mermaidchart.com/mermaid-oss/syntax/c4.html',
|
||||
'syntax/sankey.md': 'https://docs.mermaidchart.com/mermaid-oss/syntax/sankey.html',
|
||||
'syntax/xyChart.md': 'https://docs.mermaidchart.com/mermaid-oss/syntax/xyChart.html',
|
||||
'syntax/block.md': 'https://docs.mermaidchart.com/mermaid-oss/syntax/block.html',
|
||||
'syntax/packet.md': 'https://docs.mermaidchart.com/mermaid-oss/syntax/packet.html',
|
||||
'syntax/kanban.md': 'https://docs.mermaidchart.com/mermaid-oss/syntax/kanban.html',
|
||||
'syntax/architecture.md': 'https://docs.mermaidchart.com/mermaid-oss/syntax/architecture.html',
|
||||
'syntax/radar.md': 'https://docs.mermaidchart.com/mermaid-oss/syntax/radar.html',
|
||||
'syntax/examples.md': 'https://docs.mermaidchart.com/mermaid-oss/syntax/examples.html',
|
||||
|
||||
// Config section
|
||||
'config/configuration.md': 'https://docs.mermaidchart.com/mermaid-oss/config/configuration.html',
|
||||
'config/usage.md': 'https://docs.mermaidchart.com/mermaid-oss/config/usage.html',
|
||||
'config/icons.md': 'https://docs.mermaidchart.com/mermaid-oss/config/icons.html',
|
||||
'config/directives.md': 'https://docs.mermaidchart.com/mermaid-oss/config/directives.html',
|
||||
'config/theming.md': 'https://docs.mermaidchart.com/mermaid-oss/config/theming.html',
|
||||
'config/math.md': 'https://docs.mermaidchart.com/mermaid-oss/config/math.html',
|
||||
'config/accessibility.md': 'https://docs.mermaidchart.com/mermaid-oss/config/accessibility.html',
|
||||
'config/mermaidCLI.md': 'https://docs.mermaidchart.com/mermaid-oss/config/mermaidCLI.html',
|
||||
'config/faq.md': 'https://docs.mermaidchart.com/mermaid-oss/config/faq.html',
|
||||
|
||||
// Ecosystem section
|
||||
'ecosystem/mermaid-chart.md':
|
||||
'https://docs.mermaidchart.com/mermaid-oss/ecosystem/mermaid-chart.html',
|
||||
'ecosystem/tutorials.md': 'https://docs.mermaidchart.com/mermaid-oss/ecosystem/tutorials.html',
|
||||
'ecosystem/integrations-community.md':
|
||||
'https://docs.mermaidchart.com/mermaid-oss/ecosystem/integrations-community.html',
|
||||
'ecosystem/integrations-create.md':
|
||||
'https://docs.mermaidchart.com/mermaid-oss/ecosystem/integrations-create.html',
|
||||
|
||||
// Community section
|
||||
'community/intro.md': 'https://docs.mermaidchart.com/mermaid-oss/community/intro.html',
|
||||
'community/contributing.md':
|
||||
'https://docs.mermaidchart.com/mermaid-oss/community/contributing.html',
|
||||
'community/new-diagram.md':
|
||||
'https://docs.mermaidchart.com/mermaid-oss/community/new-diagram.html',
|
||||
'community/questions-and-suggestions.md':
|
||||
'https://docs.mermaidchart.com/mermaid-oss/community/questions-and-suggestions.html',
|
||||
'community/security.md': 'https://docs.mermaidchart.com/mermaid-oss/community/security.html',
|
||||
};
|
||||
|
||||
/**
|
||||
* Helper function to get canonical URL for a specific page
|
||||
* This can be used in frontmatter or for manual overrides
|
||||
*/
|
||||
export function getCanonicalUrl(relativePath: string): string | undefined {
|
||||
return specificCanonicalUrls[relativePath];
|
||||
return `https://mermaid.ai/open-source/${relativePath}`;
|
||||
}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import type { PageData } from 'vitepress';
|
||||
import { canonicalConfig, specificCanonicalUrls } from './canonical-config.js';
|
||||
import { canonicalConfig } from './canonical-config.js';
|
||||
|
||||
/**
|
||||
* Configuration for canonical URL generation
|
||||
@@ -48,31 +48,15 @@ const defaultConfig: CanonicalUrlConfig = {
|
||||
},
|
||||
};
|
||||
|
||||
/**
|
||||
* Check if a path matches any of the exclude patterns
|
||||
*/
|
||||
function shouldExcludePath(relativePath: string, excludePatterns: string[] = []): boolean {
|
||||
return excludePatterns.some((pattern) => {
|
||||
// Convert glob pattern to regex
|
||||
const regexPattern = pattern
|
||||
.replace(/\*\*/g, '.*')
|
||||
.replace(/\*/g, '[^/]*')
|
||||
.replace(/\?/g, '.')
|
||||
.replace(/\./g, '\\.');
|
||||
const regex = new RegExp(`^${regexPattern}$`);
|
||||
return regex.test(relativePath);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Transform a relative path to a canonical URL path
|
||||
*/
|
||||
function transformPath(relativePath: string, config: CanonicalUrlConfig): string {
|
||||
export function transformPath(relativePath: string, config: CanonicalUrlConfig): string {
|
||||
let transformedPath = relativePath;
|
||||
|
||||
// Apply built-in transformations
|
||||
if (config.transformations?.removeMarkdownExtension) {
|
||||
transformedPath = transformedPath.replace(/\.md$/, '');
|
||||
transformedPath = transformedPath.replace(/\.md$/, '.html');
|
||||
}
|
||||
|
||||
if (config.transformations?.removeIndex) {
|
||||
@@ -116,45 +100,9 @@ function generateCanonicalUrl(relativePath: string, config: CanonicalUrlConfig):
|
||||
export function addCanonicalUrls(pageData: PageData): void {
|
||||
const config = canonicalConfig;
|
||||
|
||||
// Check for specific canonical URLs first
|
||||
const specificUrl = specificCanonicalUrls[pageData.relativePath];
|
||||
if (specificUrl) {
|
||||
addCanonicalToHead(pageData, specificUrl);
|
||||
return;
|
||||
}
|
||||
|
||||
// Skip if canonical URL is already explicitly set in frontmatter
|
||||
if (pageData.frontmatter.canonical) {
|
||||
// If it's already a full URL, use as-is
|
||||
if (pageData.frontmatter.canonical.startsWith('http')) {
|
||||
addCanonicalToHead(pageData, pageData.frontmatter.canonical);
|
||||
return;
|
||||
}
|
||||
// If it's a relative path, convert to absolute URL
|
||||
const canonicalUrl = config.baseUrl + pageData.frontmatter.canonical;
|
||||
addCanonicalToHead(pageData, canonicalUrl);
|
||||
return;
|
||||
}
|
||||
|
||||
// Skip if canonicalPath is set in frontmatter
|
||||
if (pageData.frontmatter.canonicalPath) {
|
||||
const canonicalUrl = config.baseUrl + pageData.frontmatter.canonicalPath;
|
||||
addCanonicalToHead(pageData, canonicalUrl);
|
||||
return;
|
||||
}
|
||||
|
||||
// Skip if auto-generation is disabled
|
||||
if (!config.autoGenerate) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Skip if path should be excluded
|
||||
if (shouldExcludePath(pageData.relativePath, config.excludePatterns)) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Generate canonical URL
|
||||
const canonicalUrl = generateCanonicalUrl(pageData.relativePath, config);
|
||||
transformPath(pageData.relativePath, config);
|
||||
addCanonicalToHead(pageData, canonicalUrl);
|
||||
}
|
||||
|
||||
|
||||
@@ -48,7 +48,7 @@ const editorColumns: EditorColumn[] = [
|
||||
redBarText: 'Recommended',
|
||||
proTrialButtonText: 'Start free trial',
|
||||
proTrialUrl:
|
||||
'https://www.mermaidchart.com/app/sign-up?utm_source=mermaid_js&utm_medium=2_editor_selection&utm_campaign=start_pro&redirect=%2Fapp%2Fuser%2Fbilling%2Fcheckout%3FisFromMermaid%3Dtrue',
|
||||
'https://mermaid.ai/app/sign-up?utm_source=mermaid_js&utm_medium=2_editor_selection&utm_campaign=start_pro&redirect=%2Fapp%2Fuser%2Fbilling%2Fcheckout%3FisFromMermaid%3Dtrue',
|
||||
features: mermaidChartFeatures,
|
||||
},
|
||||
{
|
||||
|
||||
@@ -10,15 +10,15 @@ interface Taglines {
|
||||
const taglines: Taglines[] = [
|
||||
{
|
||||
label: 'Customize your layout and design in Mermaid Chart’s visual editor!',
|
||||
url: 'https://www.mermaidchart.com/whiteboard?utm_source=mermaid_js&utm_medium=banner_ad&utm_campaign=visual_editor',
|
||||
url: 'https://mermaid.ai/whiteboard?utm_source=mermaid_js&utm_medium=banner_ad&utm_campaign=visual_editor',
|
||||
},
|
||||
{
|
||||
label: 'Replace ChatGPT Pro, Mermaid.live, and Lucid Chart with Mermaid Chart',
|
||||
url: 'https://www.mermaidchart.com/mermaid-ai?utm_source=mermaid_js&utm_medium=banner_ad&utm_campaign=aibundle',
|
||||
url: 'https://mermaid.ai/mermaid-ai?utm_source=mermaid_js&utm_medium=banner_ad&utm_campaign=aibundle',
|
||||
},
|
||||
{
|
||||
label: 'Diagram live with teammates in Mermaid Chart',
|
||||
url: 'https://www.mermaidchart.com/landing?utm_source=mermaid_js&utm_medium=banner_ad&utm_campaign=team_collaboration',
|
||||
url: 'https://mermaid.ai/landing?utm_source=mermaid_js&utm_medium=banner_ad&utm_campaign=team_collaboration',
|
||||
},
|
||||
];
|
||||
|
||||
|
||||
@@ -81,7 +81,7 @@ export default defineConfig({
|
||||
icon: {
|
||||
svg: '<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 490.16 490.16"><defs><mask id="Mask"><rect x="0" y="0" width="490.16" height="490.16" fill="white" /><path fill="black" d="M407.48,111.18A165.2,165.2,0,0,0,245.08,220,165.2,165.2,0,0,0,82.68,111.18a165.5,165.5,0,0,0,72.06,143.64,88.81,88.81,0,0,1,38.53,73.45v50.86H296.9V328.27a88.8,88.8,0,0,1,38.52-73.45,165.41,165.41,0,0,0,72.06-143.64Z"/><path fill="black" d="M160.63,328.27a56.09,56.09,0,0,0-24.27-46.49,198.74,198.74,0,0,1-28.54-23.66A196.87,196.87,0,0,1,82.53,227V379.13h78.1Z"/><path fill="black" d="M329.53,328.27a56.09,56.09,0,0,1,24.27-46.49,198.74,198.74,0,0,0,28.54-23.66A196.87,196.87,0,0,0,407.63,227V379.13h-78.1Z"/></mask><style>.cls-1{fill:#76767B;}.cls-1:hover{fill:#FF3570}</style></defs><rect class="cls-1" width="490.16" height="490.16" rx="84.61" mask="url(#Mask)" /></svg>',
|
||||
},
|
||||
link: 'https://www.mermaidchart.com/',
|
||||
link: 'https://mermaid.ai/',
|
||||
},
|
||||
],
|
||||
},
|
||||
@@ -122,7 +122,7 @@ function nav() {
|
||||
},
|
||||
{
|
||||
text: '💻 Open Editor',
|
||||
link: 'https://mermaid.live/edit',
|
||||
link: 'https://mermaid.ai/live/edit',
|
||||
target: '_blank',
|
||||
rel: 'external',
|
||||
},
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
|
||||
The Future of Diagramming & Visual Collaboration
|
||||
|
||||
Try the Ultimate AI, Mermaid, and Visual Diagramming Suite by creating an account at [Mermaid Chart](https://www.mermaidchart.com/app/sign-up).
|
||||
Try the Ultimate AI, Mermaid, and Visual Diagramming Suite by creating an account at [Mermaid Chart](https://mermaid.ai/app/sign-up).
|
||||
|
||||
<br />
|
||||
|
||||
@@ -31,7 +31,7 @@ Try the Ultimate AI, Mermaid, and Visual Diagramming Suite by creating an accoun
|
||||
- [Google Docs](https://gsuite.google.com/marketplace/app/mermaidchart/947683068472)
|
||||
- [Microsoft PowerPoint and Word](https://appsource.microsoft.com/en-us/product/office/WA200006214?tab=Overview)
|
||||
|
||||
Visit our [Plugins](https://www.mermaidchart.com/plugins) page for more information.
|
||||
Visit our [Plugins](https://mermaid.ai/plugins) page for more information.
|
||||
|
||||
- **Collaboration** - A web based collaboration feature for multi-user editing on Mermaid diagrams in real-time (Pro and Enterprise plans).
|
||||
|
||||
@@ -49,7 +49,7 @@ Try the Ultimate AI, Mermaid, and Visual Diagramming Suite by creating an accoun
|
||||
|
||||
To learn more, visit our [Pricing](https://mermaidchart.com/pricing) page.
|
||||
|
||||
Mermaid Chart is currently offering a 7-day free trial on our Pro and Enterprise tiers. Sign up for a free account at [Mermaid Chart](https://www.mermaidchart.com/app/sign-up).
|
||||
Mermaid Chart is currently offering a 7-day free trial on our Pro and Enterprise tiers. Sign up for a free account at [Mermaid Chart](https://mermaid.ai/app/sign-up).
|
||||
|
||||
## Mermaid JS contributions
|
||||
|
||||
|
||||
@@ -119,7 +119,7 @@ And, here is the diagram view from the above example:
|
||||
|
||||
## 2. Using the Mermaid Chart Editor
|
||||
|
||||
Available at the [Mermaid Chart](https://www.mermaidchart.com/) website.
|
||||
Available at the [Mermaid Chart](https://mermaid.ai/) website.
|
||||
|
||||
Mermaid Chart is a web-based diagram editor that allows you to create and edit diagrams in your browser. It is built by the team behind Mermaid.
|
||||
|
||||
@@ -132,7 +132,7 @@ Features include:
|
||||
|
||||
To learn more, visit the [Mermaid Chart page](/ecosystem/mermaid-chart.html) in the Ecosystem section of the documentation.
|
||||
|
||||
Or go to the [Mermaid Chart website](https://www.mermaidchart.com/app/sign-up) to sign up for a Free account.
|
||||
Or go to the [Mermaid Chart website](https://mermaid.ai/app/sign-up) to sign up for a Free account.
|
||||
|
||||
## 3. Using Mermaid Plugins
|
||||
|
||||
@@ -146,13 +146,13 @@ For a list of Mermaid Plugins and Integrations, visit the [Integrations page](..
|
||||
|
||||
Mermaid Chart plugins are available for:
|
||||
|
||||
- [ChatGPT](https://docs.mermaidchart.com/plugins/mermaid-chart-gpt)
|
||||
- [JetBrains IDE](https://docs.mermaidchart.com/plugins/jetbrains-ide)
|
||||
- [Microsoft PowerPoint](https://docs.mermaidchart.com/plugins/microsoft-powerpoint)
|
||||
- [Microsoft Word](https://docs.mermaidchart.com/plugins/microsoft-word)
|
||||
- [Visual Studio Code](https://docs.mermaidchart.com/plugins/visual-studio-code)
|
||||
- [ChatGPT](https://mermaid.ai/plugins/mermaid-chart-gpt)
|
||||
- [JetBrains IDE](https://mermaid.ai/plugins/jetbrains-ide)
|
||||
- [Microsoft PowerPoint](https://mermaid.ai/plugins/microsoft-powerpoint)
|
||||
- [Microsoft Word](https://mermaid.ai/plugins/microsoft-word)
|
||||
- [Visual Studio Code](https://mermaid.ai/plugins/visual-studio-code)
|
||||
|
||||
To learn more, visit the [Mermaid Chart Plugins](https://www.mermaidchart.com/plugins) page.
|
||||
To learn more, visit the [Mermaid Chart Plugins](https://mermaid.ai/plugins) page.
|
||||
|
||||
### Native Mermaid Support
|
||||
|
||||
|
||||
@@ -20,7 +20,7 @@ We're thrilled to announce that Mermaid Chart has successfully raised $7.5 milli
|
||||
|
||||
We are incredibly excited about the future and are grateful to the community, our team, and our investors for being part of this journey. Together, we're not just creating diagrams; we're designing the future of collaboration.
|
||||
|
||||
🌐 Learn more about our groundbreaking tools and what's next for Mermaid Chart by visiting [our website](https://www.mermaidchart.com/blog/posts/mermaid-chart-raises-7.5m-to-reinvent-visual-collaoration-for-enterprises).
|
||||
🌐 Learn more about our groundbreaking tools and what's next for Mermaid Chart by visiting [our website](https://mermaid.ai/blog/posts/mermaid-chart-raises-7.5m-to-reinvent-visual-collaoration-for-enterprises).
|
||||
|
||||
Thank you for being part of our story. Here's to creating, innovating, and collaborating on a global scale!
|
||||
|
||||
@@ -33,12 +33,12 @@ The Mermaid Chart team is excited to introduce a new Visual Editor for Flowchart
|
||||
Learn more:
|
||||
|
||||
- Visual Editor For Flowcharts
|
||||
- [Blog post](https://www.mermaidchart.com/blog/posts/mermaid-chart-releases-new-visual-editor-for-flowcharts)
|
||||
- [Blog post](https://mermaid.ai/blog/posts/mermaid-chart-releases-new-visual-editor-for-flowcharts)
|
||||
|
||||
- [Demo video](https://www.youtube.com/watch?v=5aja0gijoO0)
|
||||
|
||||
- Visual Editor For Sequence diagrams
|
||||
- [Blog post](https://www.mermaidchart.com/blog/posts/mermaid-chart-unveils-visual-editor-for-sequence-diagrams)
|
||||
- [Blog post](https://mermaid.ai/blog/posts/mermaid-chart-unveils-visual-editor-for-sequence-diagrams)
|
||||
|
||||
- [Demo video](https://youtu.be/imc2u5_N6Dc)
|
||||
|
||||
|
||||
@@ -1,336 +1,336 @@
|
||||
# Blog
|
||||
|
||||
## [The Essential Guide to Mermaid Chart Plugin for VS Code [08/2025]](https://docs.mermaidchart.com/blog/posts/the-essential-guide-to-mermaid-chart-plugin-for-vs-code-08-2025)
|
||||
## [The Essential Guide to Mermaid Chart Plugin for VS Code [08/2025]](https://mermaid.ai/blog/posts/the-essential-guide-to-mermaid-chart-plugin-for-vs-code-08-2025)
|
||||
|
||||
9/9/2025 • 5 mins
|
||||
|
||||
Creating diagrams in VS Code has never been easier—the Mermaid VS Code plugin transforms text-based syntax into clear, professional visuals right inside your editor. With live previews, smart editing, and AI-powered diagram generation, it removes the friction from visualization so you can focus on coding.
|
||||
|
||||
## [How to Create Perfect Flowcharts Using AI in 2025 Step-by-Step Guide](https://docs.mermaidchart.com/blog/posts/how-to-create-perfect-flowcharts-using-ai-in-2025-step-by-step-guide)
|
||||
## [How to Create Perfect Flowcharts Using AI in 2025 Step-by-Step Guide](https://mermaid.ai/blog/posts/how-to-create-perfect-flowcharts-using-ai-in-2025-step-by-step-guide)
|
||||
|
||||
7/22/2025 • 8 mins
|
||||
|
||||
In 2025, AI tools make creating flowcharts faster and easier than ever. With Mermaid’s AI flowchart generator, you can turn plain text into clear, accurate diagrams in seconds. This guide walks through how it works and how to get the most out of it for technical and business workflows alike.
|
||||
|
||||
## [Mermaid introduces the Visual Editor for Entity Relationship diagrams](https://docs.mermaidchart.com/blog/posts/mermaid-introduces-the-visual-editor-for-entity-relationship-diagrams)
|
||||
## [Mermaid introduces the Visual Editor for Entity Relationship diagrams](https://mermaid.ai/blog/posts/mermaid-introduces-the-visual-editor-for-entity-relationship-diagrams)
|
||||
|
||||
7/15/2025 • 7 mins
|
||||
|
||||
Mermaid just introduced a Visual Editor for Entity Relationship diagrams, letting anyone map database structures through a simple point-and-click interface instead of code. This no-code ER builder now sits alongside Mermaid’s editors for flowcharts, sequence, and class diagrams, enabling teams to craft and share polished data models for apps, AI, and business processes.
|
||||
|
||||
## [Mermaid supports Treemap Diagrams now!!!](https://docs.mermaidchart.com/blog/posts/mermaid-have-treemap-diagrams-now)
|
||||
## [Mermaid supports Treemap Diagrams now!!!](https://mermaid.ai/blog/posts/mermaid-have-treemap-diagrams-now)
|
||||
|
||||
7/3/2025 • 4 mins
|
||||
|
||||
Mermaid has introduced Treemap diagrams, currently in beta, enhancing hierarchical data visualization. Treemap diagrams use nested rectangles to represent data relationships, focusing on size and proportions. They offer various applications, including budget visualization and market analysis. With simple syntax and customization options, users can effectively present complex data hierarchies.
|
||||
|
||||
## [AI Diagram Generators and Data Visualization: Best Practices](https://docs.mermaidchart.com/blog/posts/ai-diagram-generators-and-data-visualization-best-practices)
|
||||
## [AI Diagram Generators and Data Visualization: Best Practices](https://mermaid.ai/blog/posts/ai-diagram-generators-and-data-visualization-best-practices)
|
||||
|
||||
7/2/2025 • 6 mins
|
||||
|
||||
AI diagram generators transform complex data into clear, interactive visuals – enabling faster analysis, better decisions, and stronger collaboration across teams. By combining automation with manual refinement, these tools empower anyone to communicate insights effectively, regardless of technical skill level.
|
||||
|
||||
## [How to Choose the Best AI Diagram Generator for Your Needs (2025)](https://docs.mermaidchart.com/blog/posts/how-to-choose-the-best-ai-diagram-generator-for-your-needs-2025)
|
||||
## [How to Choose the Best AI Diagram Generator for Your Needs (2025)](https://mermaid.ai/blog/posts/how-to-choose-the-best-ai-diagram-generator-for-your-needs-2025)
|
||||
|
||||
6/26/2025 • 14 mins
|
||||
|
||||
AI diagram generators are transforming how developers visualize and communicate complex systems, reducing hours of manual work into minutes. With tools like Mermaid AI, users benefit from both code-based and visual editing, enabling seamless collaboration and precision. Whether you’re diagramming workflows, software architecture, or data relationships, the right AI tool can significantly boost productivity and streamline communication.
|
||||
|
||||
## [5 Time-Saving Tips for Using Mermaid’s AI Diagram Generator Effectively](https://docs.mermaidchart.com/blog/posts/5-time-saving-tips-for-using-mermaids-ai-diagram-generator-effectively)
|
||||
## [5 Time-Saving Tips for Using Mermaid’s AI Diagram Generator Effectively](https://mermaid.ai/blog/posts/5-time-saving-tips-for-using-mermaids-ai-diagram-generator-effectively)
|
||||
|
||||
6/11/2025 • 10 mins
|
||||
|
||||
See how developers can save time and boost productivity using Mermaid Chart’s AI diagram generator. Learn five practical tips that help turn plain language into powerful, professional diagrams.
|
||||
|
||||
## [Enhancing Team Collaboration with AI-Powered Diagrams](https://docs.mermaidchart.com/blog/posts/enhancing-team-collaboration-with-ai-powered-diagrams)
|
||||
## [Enhancing Team Collaboration with AI-Powered Diagrams](https://mermaid.ai/blog/posts/enhancing-team-collaboration-with-ai-powered-diagrams)
|
||||
|
||||
5/27/2025 • 6 mins
|
||||
|
||||
Software teams move fast, but old-school diagramming tools can’t keep up. Mermaid Chart replaces static slides and whiteboards with real-time, AI-generated visuals that evolve with your code and ideas. Just describe a process in plain English, and watch it come to life.
|
||||
|
||||
## [What is an AI Diagram Generator? Benefits and Use Cases](https://docs.mermaidchart.com/blog/posts/what-is-an-ai-diagram-generator-benefits-and-use-cases)
|
||||
## [What is an AI Diagram Generator? Benefits and Use Cases](https://mermaid.ai/blog/posts/what-is-an-ai-diagram-generator-benefits-and-use-cases)
|
||||
|
||||
5/22/2025 • 6 mins
|
||||
|
||||
Discover how AI diagram generators like Mermaid Chart transform developer workflows. Instantly turn text into flowcharts, ERDs, and system diagrams, no manual drag-and-drop needed. Learn how it works, key benefits, and real-world use cases.
|
||||
|
||||
## [How to Use Mermaid Chart as an AI Diagram Generator for Developers](https://docs.mermaidchart.com/blog/posts/how-to-use-mermaid-chart-as-an-ai-diagram-generator)
|
||||
## [How to Use Mermaid Chart as an AI Diagram Generator for Developers](https://mermaid.ai/blog/posts/how-to-use-mermaid-chart-as-an-ai-diagram-generator)
|
||||
|
||||
5/21/2025 • 9 mins
|
||||
|
||||
Would an AI diagram generator make your life easier? We think it would!
|
||||
|
||||
## [Mermaid Chart VS Code Plugin: Create and Edit Mermaid.js Diagrams in Visual Studio Code](https://docs.mermaidchart.com/blog/posts/mermaid-chart-vs-code-plugin-create-and-edit-mermaid-js-diagrams-in-visual-studio-code)
|
||||
## [Mermaid Chart VS Code Plugin: Create and Edit Mermaid.js Diagrams in Visual Studio Code](https://mermaid.ai/blog/posts/mermaid-chart-vs-code-plugin-create-and-edit-mermaid-js-diagrams-in-visual-studio-code)
|
||||
|
||||
3/21/2025 • 5 mins
|
||||
|
||||
The Mermaid Chart VS Code Plugin is a powerful developer diagramming tool that brings Mermaid.js diagramming directly into your Visual Studio Code environment. Whether you’re visualizing software architecture, documenting API flows, fixing bad documentation, or managing flowcharts and sequence diagrams, this plugin integrates seamlessly into your workflow. Key Features of the Mermaid Chart VS Code […]
|
||||
|
||||
## [Mermaid Chart: The Evolution of Mermaid](https://docs.mermaidchart.com/blog/posts/mermaid-chart-the-evolution-of-mermaid)
|
||||
## [Mermaid Chart: The Evolution of Mermaid](https://mermaid.ai/blog/posts/mermaid-chart-the-evolution-of-mermaid)
|
||||
|
||||
1/30/2025 • 3 mins
|
||||
|
||||
Mermaid revolutionized diagramming with its simple, markdown-style syntax, empowering millions of developers worldwide. Now, Mermaid Chart takes it further with AI-powered visuals, a GUI for seamless editing, real-time collaboration, and advanced design tools. Experience the next generation of diagramming—faster, smarter, and built for modern teams. Try Mermaid Chart today!
|
||||
|
||||
## [GUI for editing Mermaid Class Diagrams](https://docs.mermaidchart.com/blog/posts/gui-for-editing-mermaid-class-diagrams)
|
||||
## [GUI for editing Mermaid Class Diagrams](https://mermaid.ai/blog/posts/gui-for-editing-mermaid-class-diagrams)
|
||||
|
||||
1/17/2025 • 5 mins
|
||||
|
||||
Discover how the latest update to the Mermaid Visual Editor transforms class diagramming. With new intuitive tools for creating and editing diagrams, dynamic relationship management, and customizable layouts, this feature-packed enhancement streamlines your diagramming experience like never before.
|
||||
|
||||
## [7 ER Diagram Examples For Database Modeling from Mermaid AI](https://docs.mermaidchart.com/blog/posts/7-er-diagram-examples-for-database-modeling-from-mermaid-ai)
|
||||
## [7 ER Diagram Examples For Database Modeling from Mermaid AI](https://mermaid.ai/blog/posts/7-er-diagram-examples-for-database-modeling-from-mermaid-ai)
|
||||
|
||||
1/16/2025 • 6 mins
|
||||
|
||||
Entity relationship (ER) diagrams are a cornerstone of database design, providing a blueprint for modeling your database and enabling clear communication across functions in your organization. As data volumes continue to soar and as AI models demand clean, well-organized data, ER diagrams have become more vital than ever. You can now quickly build ER diagrams with Mermaid Chart, Mermaid AI to kick-start and fine tune your diagrams . From e-commerce payment flows to social media interactions and healthcare systems, ER diagrams are powering modern, data-driven environments.
|
||||
|
||||
## [Mermaid Whiteboard: Visual Collaboration Made Universal](https://docs.mermaidchart.com/blog/posts/mermaid-whiteboard-visual-collaboration-made-universal)
|
||||
## [Mermaid Whiteboard: Visual Collaboration Made Universal](https://mermaid.ai/blog/posts/mermaid-whiteboard-visual-collaboration-made-universal)
|
||||
|
||||
12/6/2024 • 2 mins
|
||||
|
||||
The Mermaid Whiteboard combines Mermaid syntax with a drag-and-drop interface, making it easier for teams to create, edit, and refine diagrams together. Whether you prefer working with code, visuals, Mermaid AI or all three, this tool adapts to your needs while keeping everything tied to Mermaid’s syntax. Key Features 1. Dual-Mode Editing Switch seamlessly between […]
|
||||
|
||||
## [Mermaid 11.4 is out: New Features and Kanban Diagramming](https://www.mermaidchart.com/blog/posts/mermaid-11-4-is-out-new-features-and-kanban-diagramming)
|
||||
## [Mermaid 11.4 is out: New Features and Kanban Diagramming](https://mermaid.ai/blog/posts/mermaid-11-4-is-out-new-features-and-kanban-diagramming)
|
||||
|
||||
October 31, 2024 · 2 mins
|
||||
|
||||
Mermaid 11.4 brings enhanced functionality with the introduction of Kanban diagrams, allowing users to create visual workflows with status columns and task details.
|
||||
|
||||
## [How To Build an ER Diagram with Mermaid Chart](https://www.mermaidchart.com/blog/posts/how-to-build-an-er-diagram-with-mermaid-chart)
|
||||
## [How To Build an ER Diagram with Mermaid Chart](https://mermaid.ai/blog/posts/how-to-build-an-er-diagram-with-mermaid-chart)
|
||||
|
||||
October 24, 2024 · 4 mins
|
||||
|
||||
An entity relationship (ER) diagram acts like a blueprint for your database. This makes ER diagrams effective tools for anyone dealing with complex databases, data modeling, and AI model training.
|
||||
|
||||
## [Expanding the Horizons of Mermaid Flowcharts: Introducing 30 New Shapes!](https://www.mermaidchart.com/blog/posts/new-mermaid-flowchart-shapes/)
|
||||
## [Expanding the Horizons of Mermaid Flowcharts: Introducing 30 New Shapes!](https://mermaid.ai/blog/posts/new-mermaid-flowchart-shapes/)
|
||||
|
||||
24 September 2024 · 5 mins
|
||||
|
||||
Discover 30 new shapes in Mermaid flowcharts, offering enhanced clarity, customization, and versatility for more dynamic and expressive visualizations.
|
||||
|
||||
## [Introducing Architecture Diagrams in Mermaid](https://www.mermaidchart.com/blog/posts/mermaid-supports-architecture-diagrams/)
|
||||
## [Introducing Architecture Diagrams in Mermaid](https://mermaid.ai/blog/posts/mermaid-supports-architecture-diagrams/)
|
||||
|
||||
2 September 2024 · 2 mins
|
||||
|
||||
Discover the fresh new and unique Neo and Hand-Drawn looks for Mermaid Diagrams, while still offering the classic look you love.
|
||||
|
||||
## [Mermaid v11 is out!](https://www.mermaidchart.com/blog/posts/mermaid-v11/)
|
||||
## [Mermaid v11 is out!](https://mermaid.ai/blog/posts/mermaid-v11/)
|
||||
|
||||
23 August 2024 · 2 mins
|
||||
|
||||
Mermaid v11 introduces advanced layout options, new diagram types, and enhanced customization features, thanks to the incredible contributions from our community.
|
||||
|
||||
## [Mermaid Innovation - Introducing New Looks for Mermaid Diagrams](https://www.mermaidchart.com/blog/posts/mermaid-innovation-introducing-new-looks-for-mermaid-diagrams/)
|
||||
## [Mermaid Innovation - Introducing New Looks for Mermaid Diagrams](https://mermaid.ai/blog/posts/mermaid-innovation-introducing-new-looks-for-mermaid-diagrams/)
|
||||
|
||||
6 August 2024 ·3 mins
|
||||
|
||||
Discover the fresh new and unique Neo and Hand-Drawn looks for Mermaid Diagrams, while still offering the classic look you love.
|
||||
|
||||
## [The Mermaid Chart Plugin for Jira: A How-To User Guide](https://www.mermaidchart.com/blog/posts/the-mermaid-chart-plugin-for-jira-a-how-to-user-guide/)
|
||||
## [The Mermaid Chart Plugin for Jira: A How-To User Guide](https://mermaid.ai/blog/posts/the-mermaid-chart-plugin-for-jira-a-how-to-user-guide/)
|
||||
|
||||
31 July 2024 · 5 mins
|
||||
|
||||
The Mermaid Chart plugin for Jira has arrived!
|
||||
|
||||
## [Mermaid AI Is Here to Change the Game For Diagram Creation](https://www.mermaidchart.com/blog/posts/mermaid-ai-is-here-to-change-the-game-for-diagram-creation/)
|
||||
## [Mermaid AI Is Here to Change the Game For Diagram Creation](https://mermaid.ai/blog/posts/mermaid-ai-is-here-to-change-the-game-for-diagram-creation/)
|
||||
|
||||
22 July 2024 · 5 mins
|
||||
|
||||
The Mermaid AI chat interface
|
||||
|
||||
## [How to Make a Sequence Diagram with Mermaid Chart](https://www.mermaidchart.com/blog/posts/how-to-make-a-sequence-diagram-in-mermaid-chart-step-by-step-guide/)
|
||||
## [How to Make a Sequence Diagram with Mermaid Chart](https://mermaid.ai/blog/posts/how-to-make-a-sequence-diagram-in-mermaid-chart-step-by-step-guide/)
|
||||
|
||||
8 July 2024 · 6 mins
|
||||
|
||||
Sequence diagrams are important for communicating complex systems in a clear and concise manner.
|
||||
|
||||
## [How to Use the New “Comments” Feature in Mermaid Chart](https://www.mermaidchart.com/blog/posts/how-to-use-the-new-comments-feature-in-mermaid-chart/)
|
||||
## [How to Use the New “Comments” Feature in Mermaid Chart](https://mermaid.ai/blog/posts/how-to-use-the-new-comments-feature-in-mermaid-chart/)
|
||||
|
||||
2 July 2024 · 3 mins
|
||||
|
||||
How to Use the New Comments Feature in Mermaid Chart
|
||||
|
||||
## [How to Use the official Mermaid Chart for Confluence app](https://www.mermaidchart.com/blog/posts/how-to-use-the-official-mermaid-chart-for-confluence-app/)
|
||||
## [How to Use the official Mermaid Chart for Confluence app](https://mermaid.ai/blog/posts/how-to-use-the-official-mermaid-chart-for-confluence-app/)
|
||||
|
||||
21 May 2024 · 4 mins
|
||||
|
||||
It doesn’t matter if you’re a data enthusiast, software engineer, or visual storyteller; our Confluence app can allow you to embed Mermaid Chart diagrams — and dynamically edit them — within your Confluence pages.
|
||||
|
||||
## [How to Choose the Right Documentation Software](https://www.mermaidchart.com/blog/posts/how-to-choose-the-right-documentation-software/)
|
||||
## [How to Choose the Right Documentation Software](https://mermaid.ai/blog/posts/how-to-choose-the-right-documentation-software/)
|
||||
|
||||
7 May 2024 · 5 mins
|
||||
|
||||
How to Choose the Right Documentation Software. Reliable and efficient documentation software is crucial in the fast-paced world of software development.
|
||||
|
||||
## [AI in software diagramming: What trends will define the future?](https://www.mermaidchart.com/blog/posts/ai-in-software-diagramming/)
|
||||
## [AI in software diagramming: What trends will define the future?](https://mermaid.ai/blog/posts/ai-in-software-diagramming/)
|
||||
|
||||
24 April 2024 · 5 mins
|
||||
|
||||
Artificial intelligence (AI) tools are changing the way developers work.
|
||||
|
||||
## [Mermaid Chart Unveils Visual Editor for Sequence Diagrams](https://www.mermaidchart.com/blog/posts/mermaid-chart-unveils-visual-editor-for-sequence-diagrams/)
|
||||
## [Mermaid Chart Unveils Visual Editor for Sequence Diagrams](https://mermaid.ai/blog/posts/mermaid-chart-unveils-visual-editor-for-sequence-diagrams/)
|
||||
|
||||
8 April 2024 · 5 mins
|
||||
|
||||
Sequence diagrams are excellent tools for communication and documentation.
|
||||
|
||||
## [Modeling system states: It starts with a Turing machine](https://www.mermaidchart.com/blog/posts/modeling-system-states/)
|
||||
## [Modeling system states: It starts with a Turing machine](https://mermaid.ai/blog/posts/modeling-system-states/)
|
||||
|
||||
27 March 2024 · 12 mins
|
||||
|
||||
In computer science, there are a few fundamental papers that, without exaggeration, changed everything.
|
||||
|
||||
## [Mermaid Chart Raises $7.5M to Reinvent Visual Collaboration for Enterprises](https://www.mermaidchart.com/blog/posts/mermaid-chart-raises-7.5m-to-reinvent-visual-collaoration-for-enterprises/)
|
||||
## [Mermaid Chart Raises $7.5M to Reinvent Visual Collaboration for Enterprises](https://mermaid.ai/blog/posts/mermaid-chart-raises-7.5m-to-reinvent-visual-collaoration-for-enterprises/)
|
||||
|
||||
20 March 2024 · 4 mins
|
||||
|
||||
Mermaid Chart, the company offering text-based diagramming and workflow management tools, today announced it has raised $7.5 million in Seed funding.
|
||||
|
||||
## [Mermaid Chart GPT Is Now Available In the GPT Store!](https://www.mermaidchart.com/blog/posts/mermaid-chart-gpt-is-now-available-in-the-gpt-store/)
|
||||
## [Mermaid Chart GPT Is Now Available In the GPT Store!](https://mermaid.ai/blog/posts/mermaid-chart-gpt-is-now-available-in-the-gpt-store/)
|
||||
|
||||
7 March 2024 · 3 mins
|
||||
|
||||
Mermaid Chart GPT is Now Available In the GPT Store!
|
||||
|
||||
## [How to Make a Flowchart with Mermaid Chart](https://www.mermaidchart.com/blog/posts/how-to-make-flowcharts-with-mermaid-chart/)
|
||||
## [How to Make a Flowchart with Mermaid Chart](https://mermaid.ai/blog/posts/how-to-make-flowcharts-with-mermaid-chart/)
|
||||
|
||||
30 January 2024 · 6 mins
|
||||
|
||||
Learn how to make a flowchart with Mermaid Chart, the leading text-to-diagram platform for both developers and non-developers.
|
||||
|
||||
## [How one data scientist uses Mermaid Chart to quickly and easily build flowcharts](https://www.mermaidchart.com/blog/posts/customer-spotlight-ari-tal/)
|
||||
## [How one data scientist uses Mermaid Chart to quickly and easily build flowcharts](https://mermaid.ai/blog/posts/customer-spotlight-ari-tal/)
|
||||
|
||||
23 January 2024 · 4 mins
|
||||
|
||||
Read about how Ari Tal, a data scientist and founder of Leveling Up with XAI, utilizes Mermaid Chart for its easy-to-use flowchart creation capabilities to enhance his work in explainable AI (XAI).
|
||||
|
||||
## [Introducing Mermaid Chart’s JetBrains IDE Extension](https://www.mermaidchart.com/blog/posts/introducing-mermaid-charts-jetbrains-ide-extension/)
|
||||
## [Introducing Mermaid Chart’s JetBrains IDE Extension](https://mermaid.ai/blog/posts/introducing-mermaid-charts-jetbrains-ide-extension/)
|
||||
|
||||
20 December 2023 · 5 mins
|
||||
|
||||
Diagrams are essential for documenting your code.
|
||||
|
||||
## [Mermaid Chart Releases New Visual Editor For Flowcharts](https://www.mermaidchart.com/blog/posts/mermaid-chart-releases-new-visual-editor-for-flowcharts/)
|
||||
## [Mermaid Chart Releases New Visual Editor For Flowcharts](https://mermaid.ai/blog/posts/mermaid-chart-releases-new-visual-editor-for-flowcharts/)
|
||||
|
||||
14 December 2023 · 5 mins
|
||||
|
||||
Mermaid Chart introduces a new Visual Editor for flowcharts, enabling users of all skill levels to create diagrams easily and efficiently, with both GUI and code-based editing options.
|
||||
|
||||
## [7 best practices (+ examples) for good developer documentation](https://www.mermaidchart.com/blog/posts/7-best-practices-for-good-documentation/)
|
||||
## [7 best practices (+ examples) for good developer documentation](https://mermaid.ai/blog/posts/7-best-practices-for-good-documentation/)
|
||||
|
||||
4 December 2023 · 11 min
|
||||
|
||||
Essential strategies for crafting grate developer documentation, with practical examples and insights from leading tech companies.
|
||||
|
||||
## [5 Reasons You Should Be Using Mermaid Chart As Your Diagram Generator](https://www.mermaidchart.com/blog/posts/5-reasons-you-should-be-using-mermaid-chart-as-your-diagram-generator/)
|
||||
## [5 Reasons You Should Be Using Mermaid Chart As Your Diagram Generator](https://mermaid.ai/blog/posts/5-reasons-you-should-be-using-mermaid-chart-as-your-diagram-generator/)
|
||||
|
||||
14 November 2023 · 5 mins
|
||||
|
||||
Mermaid Chart, a user-friendly, code-based diagram generator with AI integrations, templates, collaborative tools, and plugins for developers, streamlines the process of creating and sharing diagrams, enhancing both creativity and collaboration.
|
||||
|
||||
## [How to Use Mermaid Chart as an AI Diagram Generator](https://www.mermaidchart.com/blog/posts/how-to-use-mermaid-chart-as-an-ai-diagram-generator/)
|
||||
## [How to Use Mermaid Chart as an AI Diagram Generator](https://mermaid.ai/blog/posts/how-to-use-mermaid-chart-as-an-ai-diagram-generator/)
|
||||
|
||||
1 November 2023 · 5 mins
|
||||
|
||||
Would an AI diagram generator make your life easier?
|
||||
|
||||
## [Diagrams, Made Even Easier: Introducing “Code Snippets” in the Mermaid Chart Editor](https://www.mermaidchart.com/blog/posts/easier-diagram-editing-with-code-snippets/)
|
||||
## [Diagrams, Made Even Easier: Introducing “Code Snippets” in the Mermaid Chart Editor](https://mermaid.ai/blog/posts/easier-diagram-editing-with-code-snippets/)
|
||||
|
||||
12 October 2023 · 4 mins
|
||||
|
||||
Mermaid Chart introduces Code Snippets in its editor, streamlining the diagramming process for developers and professionals.
|
||||
|
||||
## [How to Make a Git Graph with Mermaid Chart](https://www.mermaidchart.com/blog/posts/how-to-make-a-git-graph-with-mermaid-chart/)
|
||||
## [How to Make a Git Graph with Mermaid Chart](https://mermaid.ai/blog/posts/how-to-make-a-git-graph-with-mermaid-chart/)
|
||||
|
||||
22 September 2023 · 7 mins
|
||||
|
||||
A git graph is one of the more useful forms of diagrams for developers and DevOps professionals.
|
||||
|
||||
## [Present flow data using Sankey diagrams in Mermaid, thanks to Nikolay Rozhkov](https://www.mermaidchart.com/blog/posts/present-flow-data-using-sankey-diagrams/)
|
||||
## [Present flow data using Sankey diagrams in Mermaid, thanks to Nikolay Rozhkov](https://mermaid.ai/blog/posts/present-flow-data-using-sankey-diagrams/)
|
||||
|
||||
8 September 2023 · 4 mins
|
||||
|
||||
Sankey diagrams are a powerful tool for visualizing flow data.
|
||||
|
||||
## [Special cases broke Microsoft Zune and can ruin your code base too](https://www.mermaidchart.com/blog/posts/special-cases-broke-microsoft-zune-and-can-ruin-your-code-base-too/)
|
||||
## [Special cases broke Microsoft Zune and can ruin your code base too](https://mermaid.ai/blog/posts/special-cases-broke-microsoft-zune-and-can-ruin-your-code-base-too/)
|
||||
|
||||
23 August 2023 · 15 mins
|
||||
|
||||
Read about the pitfalls of special cases in programming, illustrating how they can lead to complexity, diminish readability, and create maintenance challenges.
|
||||
|
||||
## [New AI chatbot now available on Mermaid Chart to simplify text-based diagram creation](https://www.mermaidchart.com/blog/posts/ai-chatbot-now-available-on-mermaid-chart-to-simplify-text-based-diagram-creation/)
|
||||
## [New AI chatbot now available on Mermaid Chart to simplify text-based diagram creation](https://mermaid.ai/blog/posts/ai-chatbot-now-available-on-mermaid-chart-to-simplify-text-based-diagram-creation/)
|
||||
|
||||
14 August 2023 · 4 mins
|
||||
|
||||
Introducing Mermaid Chart’s new AI chatbot, a diagramming assistant that simplifies text-based diagram creation for everyone, from developers to educators, offering features to start, edit, and fix diagrams, and embodying our vision to make diagramming accessible, user-friendly, and fun.
|
||||
|
||||
## [Believe It or Not, You Still Need an Online UML Diagram Tool](https://www.mermaidchart.com/blog/posts/uml-diagram-tool/)
|
||||
## [Believe It or Not, You Still Need an Online UML Diagram Tool](https://mermaid.ai/blog/posts/uml-diagram-tool/)
|
||||
|
||||
14 August 2023 · 8 mins
|
||||
|
||||
A UML diagram tool helps developers and other professionals quickly create and share UML diagrams that communicate information about complex software systems.
|
||||
|
||||
## [From Chaos to Clarity: Exploring Mind Maps with MermaidJS](https://www.mermaidchart.com/blog/posts/from-chaos-to-clarity-exploring-mind-maps-with-mermaidjs)
|
||||
## [From Chaos to Clarity: Exploring Mind Maps with MermaidJS](https://mermaid.ai/blog/posts/from-chaos-to-clarity-exploring-mind-maps-with-mermaidjs)
|
||||
|
||||
24 July 2023 · 4 mins
|
||||
|
||||
Introducing the concept of mind mapping as a tool for organizing complex information, and highlights Mermaid as a user-friendly software that simplifies the creation and editing of mind maps for applications in IT solution design, business decision-making, and knowledge organization.
|
||||
|
||||
## [Mermaid Chart Announces Visual Studio Code Plugin to Simplify Development Workflows](https://www.mermaidchart.com/blog/posts/mermaid-chart-announces-visual-studio-code-plugin)
|
||||
## [Mermaid Chart Announces Visual Studio Code Plugin to Simplify Development Workflows](https://mermaid.ai/blog/posts/mermaid-chart-announces-visual-studio-code-plugin)
|
||||
|
||||
17 July 2023 · 3 mins
|
||||
|
||||
New Integration Enhances Workflows By Enabling Developers To Reference And Edit Diagrams Within Visual Studio Code.
|
||||
|
||||
## [Mermaid Chart’s ChatGPT Plugin Combines Generative AI and Smart Diagramming For Users](https://www.mermaidchart.com/blog/posts/mermaid-chart-chatgpt-plugin-combines-generative-ai-and-smart-diagramming)
|
||||
## [Mermaid Chart’s ChatGPT Plugin Combines Generative AI and Smart Diagramming For Users](https://mermaid.ai/blog/posts/mermaid-chart-chatgpt-plugin-combines-generative-ai-and-smart-diagramming)
|
||||
|
||||
29 June 2023 · 4 mins
|
||||
|
||||
Mermaid Chart’s new ChatGPT plugin integrates AI-powered text prompts with Mermaid’s intuitive diagramming editor, enabling users to generate, edit, and share complex diagrams with ease and efficiency.
|
||||
|
||||
## [Sequence diagrams, the only good thing UML brought to software development](https://www.mermaidchart.com/blog/posts/sequence-diagrams-the-good-thing-uml-brought-to-software-development/)
|
||||
## [Sequence diagrams, the only good thing UML brought to software development](https://mermaid.ai/blog/posts/sequence-diagrams-the-good-thing-uml-brought-to-software-development/)
|
||||
|
||||
15 June 2023 · 12 mins
|
||||
|
||||
Sequence diagrams really shine when you’re documenting different parts of a system and the various ways these parts interact with each other.
|
||||
|
||||
## [subhash-halder contributed quadrant charts so you can show your manager what to select - just like the strategy consultants at BCG do](https://www.mermaidchart.com/blog/posts/subhash-halder-contributed-quadrant-charts-so-you-can-show-your-manager-what-to-select-just-like-the-strategy-consultants-at-bcg-do/)
|
||||
## [subhash-halder contributed quadrant charts so you can show your manager what to select - just like the strategy consultants at BCG do](https://mermaid.ai/blog/posts/subhash-halder-contributed-quadrant-charts-so-you-can-show-your-manager-what-to-select-just-like-the-strategy-consultants-at-bcg-do/)
|
||||
|
||||
8 June 2023 · 7 mins
|
||||
|
||||
A quadrant chart is a useful diagram that helps users visualize data and identify patterns in a data set.
|
||||
|
||||
## [Bad documentation is bad for developers](https://www.mermaidchart.com/blog/posts/bad-documentation-is-bad-for-developers)
|
||||
## [Bad documentation is bad for developers](https://mermaid.ai/blog/posts/bad-documentation-is-bad-for-developers)
|
||||
|
||||
26 April 2023 · 11 mins
|
||||
|
||||
Documentation tends to be bad because companies and projects don’t fully realize the costs of bad documentation.
|
||||
|
||||
## [Automatic text wrapping in flowcharts is here!](https://www.mermaidchart.com/blog/posts/automatic-text-wrapping-in-flowcharts-is-here/)
|
||||
## [Automatic text wrapping in flowcharts is here!](https://mermaid.ai/blog/posts/automatic-text-wrapping-in-flowcharts-is-here/)
|
||||
|
||||
3 April 2023 · 3 mins
|
||||
|
||||
Markdown Strings reduce the hassle # Starting from v10.
|
||||
|
||||
## [Mermaid Chart officially launched with sharable diagram links and presentation mode](https://www.mermaidchart.com/blog/posts/mermaid-chart-officially-launched-with-sharable-diagram-links-and-presentation-mode/)
|
||||
## [Mermaid Chart officially launched with sharable diagram links and presentation mode](https://mermaid.ai/blog/posts/mermaid-chart-officially-launched-with-sharable-diagram-links-and-presentation-mode/)
|
||||
|
||||
27 March 2023 · 2 mins
|
||||
|
||||
Exciting news for all Mermaid OSS fans: Mermaid Chart has officially launched with Mermaid Chart!
|
||||
|
||||
## [If you're not excited about ChatGPT, then you're not being creative](https://www.mermaidchart.com/blog/posts/if-youre-not-excited-about-chatgpt-then-youre-not-being-creative-enough/)
|
||||
## [If you're not excited about ChatGPT, then you're not being creative](https://mermaid.ai/blog/posts/if-youre-not-excited-about-chatgpt-then-youre-not-being-creative-enough/)
|
||||
|
||||
8 March 2023 · 9 mins
|
||||
|
||||
The hype around AI in general and ChatGPT, in particular, is so intense that it’s very understandable to assume the hype train is driving straight toward the trough of disillusionment.
|
||||
|
||||
## [Flow charts are O(n)2 complex, so don't go over 100 connections](https://www.mermaidchart.com/blog/posts/flow-charts-are-on2-complex-so-dont-go-over-100-connections/)
|
||||
## [Flow charts are O(n)2 complex, so don't go over 100 connections](https://mermaid.ai/blog/posts/flow-charts-are-on2-complex-so-dont-go-over-100-connections/)
|
||||
|
||||
1 March 2023 · 12 mins
|
||||
|
||||
Flowchart design is a game of balance: Read about the importance of dialling in the right level of detail and how to manage complexity in large flowcharts.
|
||||
|
||||
## [Busting the myth that developers can't write](https://www.mermaidchart.com/blog/posts/busting-the-myth-that-developers-cant-write/)
|
||||
## [Busting the myth that developers can't write](https://mermaid.ai/blog/posts/busting-the-myth-that-developers-cant-write/)
|
||||
|
||||
10 February 2023 · 10 mins
|
||||
|
||||
|
||||
@@ -13,7 +13,7 @@ export const labelHelper = async <T extends SVGGraphicsElement>(
|
||||
_classes?: string
|
||||
) => {
|
||||
let cssClasses;
|
||||
const useHtmlLabels = node.useHtmlLabels || evaluate(getConfig()?.flowchart?.htmlLabels);
|
||||
const useHtmlLabels = node.useHtmlLabels || evaluate(getConfig()?.htmlLabels);
|
||||
if (!_classes) {
|
||||
cssClasses = 'node default';
|
||||
} else {
|
||||
@@ -48,7 +48,6 @@ export const labelHelper = async <T extends SVGGraphicsElement>(
|
||||
style: node.labelStyle,
|
||||
addSvgBackground: !!node.icon || !!node.img,
|
||||
});
|
||||
|
||||
// Get the size of the label
|
||||
let bbox = text.getBBox();
|
||||
const halfPadding = (node?.padding ?? 0) / 2;
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
export interface NodeMetaData {
|
||||
shape?: string;
|
||||
label?: string;
|
||||
labelType?: string;
|
||||
icon?: string;
|
||||
form?: string;
|
||||
pos?: 't' | 'b';
|
||||
|
||||
Reference in New Issue
Block a user