mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-10-26 01:14:09 +02:00
Compare commits
5 Commits
architectu
...
fix-update
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
6f919ebafa | ||
|
|
a302ead548 | ||
|
|
918bcef6e6 | ||
|
|
fe6ddc89c3 | ||
|
|
2708b1c2f8 |
5
.changeset/clean-wolves-turn.md
Normal file
5
.changeset/clean-wolves-turn.md
Normal file
@@ -0,0 +1,5 @@
|
|||||||
|
---
|
||||||
|
'mermaid': patch
|
||||||
|
---
|
||||||
|
|
||||||
|
fix: Render newlines as spaces in class diagrams
|
||||||
5
.changeset/crazy-loops-matter.md
Normal file
5
.changeset/crazy-loops-matter.md
Normal file
@@ -0,0 +1,5 @@
|
|||||||
|
---
|
||||||
|
'mermaid': patch
|
||||||
|
---
|
||||||
|
|
||||||
|
fix: Handle arrows correctly when auto number is enabled
|
||||||
@@ -1,5 +0,0 @@
|
|||||||
---
|
|
||||||
'mermaid': patch
|
|
||||||
---
|
|
||||||
|
|
||||||
chore: Fix mindmap rendering in docs and apply tidytree layout
|
|
||||||
5
.changeset/deep-times-make.md
Normal file
5
.changeset/deep-times-make.md
Normal file
@@ -0,0 +1,5 @@
|
|||||||
|
---
|
||||||
|
'mermaid': minor
|
||||||
|
---
|
||||||
|
|
||||||
|
Add IDs in architecture diagrams
|
||||||
5
.changeset/hungry-baths-glow.md
Normal file
5
.changeset/hungry-baths-glow.md
Normal file
@@ -0,0 +1,5 @@
|
|||||||
|
---
|
||||||
|
'mermaid': minor
|
||||||
|
---
|
||||||
|
|
||||||
|
feat: Added support for new participant types (`actor`, `boundary`, `control`, `entity`, `database`, `collections`, `queue`) in `sequenceDiagram`.
|
||||||
7
.changeset/hungry-guests-drive.md
Normal file
7
.changeset/hungry-guests-drive.md
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
---
|
||||||
|
'mermaid': minor
|
||||||
|
'@mermaid-js/layout-tidy-tree': minor
|
||||||
|
'@mermaid-js/layout-elk': minor
|
||||||
|
---
|
||||||
|
|
||||||
|
feat: Update mindmap rendering to support multiple layouts, improved edge intersections, and new shapes
|
||||||
10
.github/workflows/codeql.yml
vendored
10
.github/workflows/codeql.yml
vendored
@@ -26,8 +26,8 @@ jobs:
|
|||||||
strategy:
|
strategy:
|
||||||
fail-fast: false
|
fail-fast: false
|
||||||
matrix:
|
matrix:
|
||||||
language: ['javascript', 'actions']
|
language: ['javascript']
|
||||||
# CodeQL supports [ 'actions', 'cpp', 'csharp', 'go', 'java', 'javascript', 'python', 'ruby' ]
|
# CodeQL supports [ 'cpp', 'csharp', 'go', 'java', 'javascript', 'python', 'ruby' ]
|
||||||
# Learn more about CodeQL language support at https://aka.ms/codeql-docs/language-support
|
# Learn more about CodeQL language support at https://aka.ms/codeql-docs/language-support
|
||||||
|
|
||||||
steps:
|
steps:
|
||||||
@@ -36,7 +36,7 @@ jobs:
|
|||||||
|
|
||||||
# Initializes the CodeQL tools for scanning.
|
# Initializes the CodeQL tools for scanning.
|
||||||
- name: Initialize CodeQL
|
- name: Initialize CodeQL
|
||||||
uses: github/codeql-action/init@5378192d256ef1302a6980fffe5ca04426d43091 # v3.28.21
|
uses: github/codeql-action/init@b56ba49b26e50535fa1e7f7db0f4f7b4bf65d80d # v3.28.10
|
||||||
with:
|
with:
|
||||||
config-file: ./.github/codeql/codeql-config.yml
|
config-file: ./.github/codeql/codeql-config.yml
|
||||||
languages: ${{ matrix.language }}
|
languages: ${{ matrix.language }}
|
||||||
@@ -48,7 +48,7 @@ jobs:
|
|||||||
# Autobuild attempts to build any compiled languages (C/C++, C#, or Java).
|
# Autobuild attempts to build any compiled languages (C/C++, C#, or Java).
|
||||||
# If this step fails, then you should remove it and run the build manually (see below)
|
# If this step fails, then you should remove it and run the build manually (see below)
|
||||||
- name: Autobuild
|
- name: Autobuild
|
||||||
uses: github/codeql-action/autobuild@5378192d256ef1302a6980fffe5ca04426d43091 # v3.28.21
|
uses: github/codeql-action/autobuild@b56ba49b26e50535fa1e7f7db0f4f7b4bf65d80d # v3.28.10
|
||||||
|
|
||||||
# ℹ️ Command-line programs to run using the OS shell.
|
# ℹ️ Command-line programs to run using the OS shell.
|
||||||
# 📚 See https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#jobsjob_idstepsrun
|
# 📚 See https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#jobsjob_idstepsrun
|
||||||
@@ -62,4 +62,4 @@ jobs:
|
|||||||
# make release
|
# make release
|
||||||
|
|
||||||
- name: Perform CodeQL Analysis
|
- name: Perform CodeQL Analysis
|
||||||
uses: github/codeql-action/analyze@5378192d256ef1302a6980fffe5ca04426d43091 # v3.28.21
|
uses: github/codeql-action/analyze@b56ba49b26e50535fa1e7f7db0f4f7b4bf65d80d # v3.28.10
|
||||||
|
|||||||
2
.github/workflows/e2e-applitools.yml
vendored
2
.github/workflows/e2e-applitools.yml
vendored
@@ -53,7 +53,7 @@ jobs:
|
|||||||
args: -X POST "$APPLITOOLS_SERVER_URL/api/externals/github/push?apiKey=$APPLITOOLS_API_KEY&CommitSha=$GITHUB_SHA&BranchName=${APPLITOOLS_BRANCH}$&ParentBranchName=$APPLITOOLS_PARENT_BRANCH"
|
args: -X POST "$APPLITOOLS_SERVER_URL/api/externals/github/push?apiKey=$APPLITOOLS_API_KEY&CommitSha=$GITHUB_SHA&BranchName=${APPLITOOLS_BRANCH}$&ParentBranchName=$APPLITOOLS_PARENT_BRANCH"
|
||||||
|
|
||||||
- name: Cypress run
|
- name: Cypress run
|
||||||
uses: cypress-io/github-action@108b8684ae52e735ff7891524cbffbcd4be5b19f # v6.7.16
|
uses: cypress-io/github-action@18a6541367f4580a515371905f499a27a44e8dbe # v6.7.12
|
||||||
id: cypress
|
id: cypress
|
||||||
with:
|
with:
|
||||||
start: pnpm run dev
|
start: pnpm run dev
|
||||||
|
|||||||
4
.github/workflows/e2e-timings.yml
vendored
4
.github/workflows/e2e-timings.yml
vendored
@@ -27,12 +27,12 @@ jobs:
|
|||||||
with:
|
with:
|
||||||
node-version-file: '.node-version'
|
node-version-file: '.node-version'
|
||||||
- name: Install dependencies
|
- name: Install dependencies
|
||||||
uses: cypress-io/github-action@108b8684ae52e735ff7891524cbffbcd4be5b19f # v6.7.16
|
uses: cypress-io/github-action@18a6541367f4580a515371905f499a27a44e8dbe # v6.7.12
|
||||||
with:
|
with:
|
||||||
runTests: false
|
runTests: false
|
||||||
|
|
||||||
- name: Cypress run
|
- name: Cypress run
|
||||||
uses: cypress-io/github-action@108b8684ae52e735ff7891524cbffbcd4be5b19f # v6.7.16
|
uses: cypress-io/github-action@18a6541367f4580a515371905f499a27a44e8dbe # v6.7.12
|
||||||
id: cypress
|
id: cypress
|
||||||
with:
|
with:
|
||||||
install: false
|
install: false
|
||||||
|
|||||||
10
.github/workflows/e2e.yml
vendored
10
.github/workflows/e2e.yml
vendored
@@ -45,7 +45,7 @@ jobs:
|
|||||||
node-version-file: '.node-version'
|
node-version-file: '.node-version'
|
||||||
- name: Cache snapshots
|
- name: Cache snapshots
|
||||||
id: cache-snapshot
|
id: cache-snapshot
|
||||||
uses: actions/cache@0400d5f644dc74513175e3cd8d07132dd4860809 # v4.2.4
|
uses: actions/cache@0c907a75c2c80ebcb7f088228285e798b750cf8f # v4.2.1
|
||||||
with:
|
with:
|
||||||
path: ./cypress/snapshots
|
path: ./cypress/snapshots
|
||||||
key: ${{ runner.os }}-snapshots-${{ env.targetHash }}
|
key: ${{ runner.os }}-snapshots-${{ env.targetHash }}
|
||||||
@@ -59,7 +59,7 @@ jobs:
|
|||||||
|
|
||||||
- name: Install dependencies
|
- name: Install dependencies
|
||||||
if: ${{ steps.cache-snapshot.outputs.cache-hit != 'true' }}
|
if: ${{ steps.cache-snapshot.outputs.cache-hit != 'true' }}
|
||||||
uses: cypress-io/github-action@108b8684ae52e735ff7891524cbffbcd4be5b19f # v6.7.16
|
uses: cypress-io/github-action@18a6541367f4580a515371905f499a27a44e8dbe # v6.7.12
|
||||||
with:
|
with:
|
||||||
# just perform install
|
# just perform install
|
||||||
runTests: false
|
runTests: false
|
||||||
@@ -95,13 +95,13 @@ jobs:
|
|||||||
# These cached snapshots are downloaded, providing the reference snapshots.
|
# These cached snapshots are downloaded, providing the reference snapshots.
|
||||||
- name: Cache snapshots
|
- name: Cache snapshots
|
||||||
id: cache-snapshot
|
id: cache-snapshot
|
||||||
uses: actions/cache/restore@0400d5f644dc74513175e3cd8d07132dd4860809 # v4.2.4
|
uses: actions/cache/restore@0c907a75c2c80ebcb7f088228285e798b750cf8f # v4.2.1
|
||||||
with:
|
with:
|
||||||
path: ./cypress/snapshots
|
path: ./cypress/snapshots
|
||||||
key: ${{ runner.os }}-snapshots-${{ env.targetHash }}
|
key: ${{ runner.os }}-snapshots-${{ env.targetHash }}
|
||||||
|
|
||||||
- name: Install dependencies
|
- name: Install dependencies
|
||||||
uses: cypress-io/github-action@108b8684ae52e735ff7891524cbffbcd4be5b19f # v6.7.16
|
uses: cypress-io/github-action@18a6541367f4580a515371905f499a27a44e8dbe # v6.7.12
|
||||||
with:
|
with:
|
||||||
runTests: false
|
runTests: false
|
||||||
|
|
||||||
@@ -117,7 +117,7 @@ jobs:
|
|||||||
# Install NPM dependencies, cache them correctly
|
# Install NPM dependencies, cache them correctly
|
||||||
# and run all Cypress tests
|
# and run all Cypress tests
|
||||||
- name: Cypress run
|
- name: Cypress run
|
||||||
uses: cypress-io/github-action@108b8684ae52e735ff7891524cbffbcd4be5b19f # v6.7.16
|
uses: cypress-io/github-action@18a6541367f4580a515371905f499a27a44e8dbe # v6.7.12
|
||||||
id: cypress
|
id: cypress
|
||||||
with:
|
with:
|
||||||
install: false
|
install: false
|
||||||
|
|||||||
2
.github/workflows/link-checker.yml
vendored
2
.github/workflows/link-checker.yml
vendored
@@ -32,7 +32,7 @@ jobs:
|
|||||||
- uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
|
- uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
|
||||||
|
|
||||||
- name: Restore lychee cache
|
- name: Restore lychee cache
|
||||||
uses: actions/cache@0400d5f644dc74513175e3cd8d07132dd4860809 # v4.2.4
|
uses: actions/cache@0c907a75c2c80ebcb7f088228285e798b750cf8f # v4.2.1
|
||||||
with:
|
with:
|
||||||
path: .lycheecache
|
path: .lycheecache
|
||||||
key: cache-lychee-${{ github.sha }}
|
key: cache-lychee-${{ github.sha }}
|
||||||
|
|||||||
2
.github/workflows/release.yml
vendored
2
.github/workflows/release.yml
vendored
@@ -36,7 +36,7 @@ jobs:
|
|||||||
|
|
||||||
- name: Create Release Pull Request or Publish to npm
|
- name: Create Release Pull Request or Publish to npm
|
||||||
id: changesets
|
id: changesets
|
||||||
uses: changesets/action@06245a4e0a36c064a573d4150030f5ec548e4fcc # v1.4.10
|
uses: changesets/action@c8bada60c408975afd1a20b3db81d6eee6789308 # v1.4.9
|
||||||
with:
|
with:
|
||||||
version: pnpm changeset:version
|
version: pnpm changeset:version
|
||||||
publish: pnpm changeset:publish
|
publish: pnpm changeset:publish
|
||||||
|
|||||||
6
.github/workflows/scorecard.yml
vendored
6
.github/workflows/scorecard.yml
vendored
@@ -20,18 +20,18 @@ jobs:
|
|||||||
with:
|
with:
|
||||||
persist-credentials: false
|
persist-credentials: false
|
||||||
- name: Run analysis
|
- name: Run analysis
|
||||||
uses: ossf/scorecard-action@05b42c624433fc40578a4040d5cf5e36ddca8cde # v2.4.2
|
uses: ossf/scorecard-action@f49aabe0b5af0936a0987cfb85d86b75731b0186 # v2.4.1
|
||||||
with:
|
with:
|
||||||
results_file: results.sarif
|
results_file: results.sarif
|
||||||
results_format: sarif
|
results_format: sarif
|
||||||
publish_results: true
|
publish_results: true
|
||||||
- name: Upload artifact
|
- name: Upload artifact
|
||||||
uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4.6.2
|
uses: actions/upload-artifact@4cec3d8aa04e39d1a68397de0c4cd6fb9dce8ec1 # v4.6.1
|
||||||
with:
|
with:
|
||||||
name: SARIF file
|
name: SARIF file
|
||||||
path: results.sarif
|
path: results.sarif
|
||||||
retention-days: 5
|
retention-days: 5
|
||||||
- name: Upload to code-scanning
|
- name: Upload to code-scanning
|
||||||
uses: github/codeql-action/upload-sarif@5378192d256ef1302a6980fffe5ca04426d43091 # v3.28.21
|
uses: github/codeql-action/upload-sarif@b56ba49b26e50535fa1e7f7db0f4f7b4bf65d80d # v3.28.10
|
||||||
with:
|
with:
|
||||||
sarif_file: results.sarif
|
sarif_file: results.sarif
|
||||||
|
|||||||
2
.github/workflows/update-browserlist.yml
vendored
2
.github/workflows/update-browserlist.yml
vendored
@@ -19,7 +19,7 @@ jobs:
|
|||||||
message: 'chore: update browsers list'
|
message: 'chore: update browsers list'
|
||||||
push: false
|
push: false
|
||||||
- name: Create Pull Request
|
- name: Create Pull Request
|
||||||
uses: peter-evans/create-pull-request@271a8d0340265f705b14b6d32b9829c1cb33d45e # v7.0.8
|
uses: peter-evans/create-pull-request@67ccf781d68cd99b580ae25a5c18a1cc84ffff1f # v7.0.6
|
||||||
with:
|
with:
|
||||||
branch: update-browserslist
|
branch: update-browserslist
|
||||||
title: Update Browserslist
|
title: Update Browserslist
|
||||||
|
|||||||
@@ -2,7 +2,7 @@
|
|||||||
"compilerOptions": {
|
"compilerOptions": {
|
||||||
"target": "es2020",
|
"target": "es2020",
|
||||||
"lib": ["es2020", "dom"],
|
"lib": ["es2020", "dom"],
|
||||||
"types": ["cypress", "node", "@argos-ci/cypress/support"],
|
"types": ["cypress", "node", "@argos-ci/cypress/dist/support.d.ts"],
|
||||||
"allowImportingTsExtensions": true,
|
"allowImportingTsExtensions": true,
|
||||||
"noEmit": true
|
"noEmit": true
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -11,7 +11,7 @@
|
|||||||
rel="stylesheet"
|
rel="stylesheet"
|
||||||
/>
|
/>
|
||||||
<link
|
<link
|
||||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"
|
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
|
||||||
rel="stylesheet"
|
rel="stylesheet"
|
||||||
/>
|
/>
|
||||||
<link
|
<link
|
||||||
|
|||||||
@@ -29,8 +29,7 @@ In GitHub, you first [**fork a mermaid repository**](https://github.com/mermaid-
|
|||||||
|
|
||||||
Then you **clone** a copy to your local development machine (e.g. where you code) to make a copy with all the files to work with.
|
Then you **clone** a copy to your local development machine (e.g. where you code) to make a copy with all the files to work with.
|
||||||
|
|
||||||
> **💡 Tip**
|
> **💡 Tip** > [Here is a GitHub document that gives an overview of the process](https://docs.github.com/en/get-started/quickstart/fork-a-repo).
|
||||||
> [Here is a GitHub document that gives an overview of the process](https://docs.github.com/en/get-started/quickstart/fork-a-repo).
|
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
git clone git@github.com/your-fork/mermaid
|
git clone git@github.com/your-fork/mermaid
|
||||||
|
|||||||
@@ -33,8 +33,7 @@ mindmap
|
|||||||
|
|
||||||
## Join the Development
|
## Join the Development
|
||||||
|
|
||||||
> **💡 Tip**
|
> **💡 Tip** > **Check out our** [**detailed contribution guide**](./contributing.md).
|
||||||
> **Check out our** [**detailed contribution guide**](./contributing.md).
|
|
||||||
|
|
||||||
Where to start:
|
Where to start:
|
||||||
|
|
||||||
@@ -48,8 +47,7 @@ Where to start:
|
|||||||
|
|
||||||
## A Question Or a Suggestion?
|
## A Question Or a Suggestion?
|
||||||
|
|
||||||
> **💡 Tip**
|
> **💡 Tip** > **Have a look at** [**how to open an issue**](./questions-and-suggestions.md).
|
||||||
> **Have a look at** [**how to open an issue**](./questions-and-suggestions.md).
|
|
||||||
|
|
||||||
If you have faced a vulnerability [report it to us](./security.md).
|
If you have faced a vulnerability [report it to us](./security.md).
|
||||||
|
|
||||||
|
|||||||
@@ -22,6 +22,7 @@ While directives allow you to change most of the default configuration settings,
|
|||||||
Mermaid basically supports two types of configuration options to be overridden by directives.
|
Mermaid basically supports two types of configuration options to be overridden by directives.
|
||||||
|
|
||||||
1. _General/Top Level configurations_ : These are the configurations that are available and applied to all the diagram. **Some of the most important top-level** configurations are:
|
1. _General/Top Level configurations_ : These are the configurations that are available and applied to all the diagram. **Some of the most important top-level** configurations are:
|
||||||
|
|
||||||
- theme
|
- theme
|
||||||
- fontFamily
|
- fontFamily
|
||||||
- logLevel
|
- logLevel
|
||||||
|
|||||||
@@ -29,6 +29,7 @@ Try the Ultimate AI, Mermaid, and Visual Diagramming Suite by creating an accoun
|
|||||||
- **Plugins** - A plugin system for extending the functionality of Mermaid.
|
- **Plugins** - A plugin system for extending the functionality of Mermaid.
|
||||||
|
|
||||||
Official Mermaid Chart plugins:
|
Official Mermaid Chart plugins:
|
||||||
|
|
||||||
- [Mermaid Chart GPT](https://chatgpt.com/g/g-684cc36f30208191b21383b88650a45d-mermaid-chart-diagrams-and-charts)
|
- [Mermaid Chart GPT](https://chatgpt.com/g/g-684cc36f30208191b21383b88650a45d-mermaid-chart-diagrams-and-charts)
|
||||||
- [Confluence](https://marketplace.atlassian.com/apps/1234056/mermaid-chart-for-confluence?hosting=cloud&tab=overview)
|
- [Confluence](https://marketplace.atlassian.com/apps/1234056/mermaid-chart-for-confluence?hosting=cloud&tab=overview)
|
||||||
- [Jira](https://marketplace.atlassian.com/apps/1234810/mermaid-chart-for-jira?tab=overview&hosting=cloud)
|
- [Jira](https://marketplace.atlassian.com/apps/1234810/mermaid-chart-for-jira?tab=overview&hosting=cloud)
|
||||||
|
|||||||
@@ -35,11 +35,13 @@ The Mermaid Chart team is excited to introduce a new Visual Editor for Flowchart
|
|||||||
Learn more:
|
Learn more:
|
||||||
|
|
||||||
- Visual Editor For Flowcharts
|
- Visual Editor For Flowcharts
|
||||||
|
|
||||||
- [Blog post](https://www.mermaidchart.com/blog/posts/mermaid-chart-releases-new-visual-editor-for-flowcharts)
|
- [Blog post](https://www.mermaidchart.com/blog/posts/mermaid-chart-releases-new-visual-editor-for-flowcharts)
|
||||||
|
|
||||||
- [Demo video](https://www.youtube.com/watch?v=5aja0gijoO0)
|
- [Demo video](https://www.youtube.com/watch?v=5aja0gijoO0)
|
||||||
|
|
||||||
- Visual Editor For Sequence diagrams
|
- Visual Editor For Sequence diagrams
|
||||||
|
|
||||||
- [Blog post](https://www.mermaidchart.com/blog/posts/mermaid-chart-unveils-visual-editor-for-sequence-diagrams)
|
- [Blog post](https://www.mermaidchart.com/blog/posts/mermaid-chart-unveils-visual-editor-for-sequence-diagrams)
|
||||||
|
|
||||||
- [Demo video](https://youtu.be/imc2u5_N6Dc)
|
- [Demo video](https://youtu.be/imc2u5_N6Dc)
|
||||||
|
|||||||
@@ -6,18 +6,6 @@
|
|||||||
|
|
||||||
# Blog
|
# 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)
|
|
||||||
|
|
||||||
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)
|
|
||||||
|
|
||||||
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://docs.mermaidchart.com/blog/posts/mermaid-introduces-the-visual-editor-for-entity-relationship-diagrams)
|
||||||
|
|
||||||
7/15/2025 • 7 mins
|
7/15/2025 • 7 mins
|
||||||
|
|||||||
@@ -194,7 +194,7 @@ architecture-beta
|
|||||||
## Icons
|
## Icons
|
||||||
|
|
||||||
By default, architecture diagram supports the following icons: `cloud`, `database`, `disk`, `internet`, `server`.
|
By default, architecture diagram supports the following icons: `cloud`, `database`, `disk`, `internet`, `server`.
|
||||||
Users can use any of the 200,000+ icons available in iconify.design, or add other custom icons, by [registering an icon pack](../config/icons.md).
|
Users can use any of the 200,000+ icons available in iconify.design, or [add custom icons](../config/icons.md).
|
||||||
|
|
||||||
After the icons are installed, they can be used in the architecture diagram by using the format "name:icon-name", where name is the value used when registering the icon pack.
|
After the icons are installed, they can be used in the architecture diagram by using the format "name:icon-name", where name is the value used when registering the icon pack.
|
||||||
|
|
||||||
|
|||||||
@@ -139,6 +139,7 @@ The following unfinished features are not supported in the short term.
|
|||||||
- [ ] Legend
|
- [ ] Legend
|
||||||
|
|
||||||
- [x] System Context
|
- [x] System Context
|
||||||
|
|
||||||
- [x] Person(alias, label, ?descr, ?sprite, ?tags, $link)
|
- [x] Person(alias, label, ?descr, ?sprite, ?tags, $link)
|
||||||
- [x] Person_Ext
|
- [x] Person_Ext
|
||||||
- [x] System(alias, label, ?descr, ?sprite, ?tags, $link)
|
- [x] System(alias, label, ?descr, ?sprite, ?tags, $link)
|
||||||
@@ -152,6 +153,7 @@ The following unfinished features are not supported in the short term.
|
|||||||
- [x] System_Boundary
|
- [x] System_Boundary
|
||||||
|
|
||||||
- [x] Container diagram
|
- [x] Container diagram
|
||||||
|
|
||||||
- [x] Container(alias, label, ?techn, ?descr, ?sprite, ?tags, $link)
|
- [x] Container(alias, label, ?techn, ?descr, ?sprite, ?tags, $link)
|
||||||
- [x] ContainerDb
|
- [x] ContainerDb
|
||||||
- [x] ContainerQueue
|
- [x] ContainerQueue
|
||||||
@@ -161,6 +163,7 @@ The following unfinished features are not supported in the short term.
|
|||||||
- [x] Container_Boundary(alias, label, ?tags, $link)
|
- [x] Container_Boundary(alias, label, ?tags, $link)
|
||||||
|
|
||||||
- [x] Component diagram
|
- [x] Component diagram
|
||||||
|
|
||||||
- [x] Component(alias, label, ?techn, ?descr, ?sprite, ?tags, $link)
|
- [x] Component(alias, label, ?techn, ?descr, ?sprite, ?tags, $link)
|
||||||
- [x] ComponentDb
|
- [x] ComponentDb
|
||||||
- [x] ComponentQueue
|
- [x] ComponentQueue
|
||||||
@@ -169,15 +172,18 @@ The following unfinished features are not supported in the short term.
|
|||||||
- [x] ComponentQueue_Ext
|
- [x] ComponentQueue_Ext
|
||||||
|
|
||||||
- [x] Dynamic diagram
|
- [x] Dynamic diagram
|
||||||
|
|
||||||
- [x] RelIndex(index, from, to, label, ?tags, $link)
|
- [x] RelIndex(index, from, to, label, ?tags, $link)
|
||||||
|
|
||||||
- [x] Deployment diagram
|
- [x] Deployment diagram
|
||||||
|
|
||||||
- [x] Deployment_Node(alias, label, ?type, ?descr, ?sprite, ?tags, $link)
|
- [x] Deployment_Node(alias, label, ?type, ?descr, ?sprite, ?tags, $link)
|
||||||
- [x] Node(alias, label, ?type, ?descr, ?sprite, ?tags, $link): short name of Deployment_Node()
|
- [x] Node(alias, label, ?type, ?descr, ?sprite, ?tags, $link): short name of Deployment_Node()
|
||||||
- [x] Node_L(alias, label, ?type, ?descr, ?sprite, ?tags, $link): left aligned Node()
|
- [x] Node_L(alias, label, ?type, ?descr, ?sprite, ?tags, $link): left aligned Node()
|
||||||
- [x] Node_R(alias, label, ?type, ?descr, ?sprite, ?tags, $link): right aligned Node()
|
- [x] Node_R(alias, label, ?type, ?descr, ?sprite, ?tags, $link): right aligned Node()
|
||||||
|
|
||||||
- [x] Relationship Types
|
- [x] Relationship Types
|
||||||
|
|
||||||
- [x] Rel(from, to, label, ?techn, ?descr, ?sprite, ?tags, $link)
|
- [x] Rel(from, to, label, ?techn, ?descr, ?sprite, ?tags, $link)
|
||||||
- [x] BiRel (bidirectional relationship)
|
- [x] BiRel (bidirectional relationship)
|
||||||
- [x] Rel_U, Rel_Up
|
- [x] Rel_U, Rel_Up
|
||||||
|
|||||||
@@ -360,8 +360,7 @@ gantt
|
|||||||
weekday monday
|
weekday monday
|
||||||
```
|
```
|
||||||
|
|
||||||
> **Warning**
|
> **Warning** > `millisecond` and `second` support was added in v10.3.0
|
||||||
> `millisecond` and `second` support was added in v10.3.0
|
|
||||||
|
|
||||||
## Output in compact mode
|
## Output in compact mode
|
||||||
|
|
||||||
|
|||||||
54
package.json
54
package.json
@@ -63,36 +63,36 @@
|
|||||||
]
|
]
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@applitools/eyes-cypress": "^3.55.2",
|
"@applitools/eyes-cypress": "^3.44.9",
|
||||||
"@argos-ci/cypress": "^6.1.1",
|
"@argos-ci/cypress": "^5.0.2",
|
||||||
"@changesets/changelog-github": "^0.5.1",
|
"@changesets/changelog-github": "^0.5.1",
|
||||||
"@changesets/cli": "^2.29.7",
|
"@changesets/cli": "^2.27.12",
|
||||||
"@cspell/eslint-plugin": "^8.19.4",
|
"@cspell/eslint-plugin": "^8.19.4",
|
||||||
"@cypress/code-coverage": "^3.14.6",
|
"@cypress/code-coverage": "^3.12.49",
|
||||||
"@eslint/js": "^9.26.0",
|
"@eslint/js": "^9.26.0",
|
||||||
"@rollup/plugin-typescript": "^12.1.4",
|
"@rollup/plugin-typescript": "^12.1.2",
|
||||||
"@types/cors": "^2.8.19",
|
"@types/cors": "^2.8.17",
|
||||||
"@types/express": "^5.0.3",
|
"@types/express": "^5.0.0",
|
||||||
"@types/js-yaml": "^4.0.9",
|
"@types/js-yaml": "^4.0.9",
|
||||||
"@types/jsdom": "^21.1.7",
|
"@types/jsdom": "^21.1.7",
|
||||||
"@types/lodash": "^4.17.20",
|
"@types/lodash": "^4.17.15",
|
||||||
"@types/mdast": "^4.0.4",
|
"@types/mdast": "^4.0.4",
|
||||||
"@types/node": "^22.18.6",
|
"@types/node": "^22.13.5",
|
||||||
"@types/rollup-plugin-visualizer": "^5.0.3",
|
"@types/rollup-plugin-visualizer": "^5.0.3",
|
||||||
"@vitest/coverage-v8": "^3.2.4",
|
"@vitest/coverage-v8": "^3.0.6",
|
||||||
"@vitest/spy": "^3.2.4",
|
"@vitest/spy": "^3.0.6",
|
||||||
"@vitest/ui": "^3.2.4",
|
"@vitest/ui": "^3.0.6",
|
||||||
"ajv": "^8.17.1",
|
"ajv": "^8.17.1",
|
||||||
"chokidar": "3.6.0",
|
"chokidar": "3.6.0",
|
||||||
"concurrently": "^9.2.1",
|
"concurrently": "^9.1.2",
|
||||||
"cors": "^2.8.5",
|
"cors": "^2.8.5",
|
||||||
"cpy-cli": "^5.0.0",
|
"cpy-cli": "^5.0.0",
|
||||||
"cross-env": "^7.0.3",
|
"cross-env": "^7.0.3",
|
||||||
"cspell": "^9.2.1",
|
"cspell": "^9.1.3",
|
||||||
"cypress": "^14.5.4",
|
"cypress": "^14.5.1",
|
||||||
"cypress-image-snapshot": "^4.0.1",
|
"cypress-image-snapshot": "^4.0.1",
|
||||||
"cypress-split": "^1.24.23",
|
"cypress-split": "^1.24.14",
|
||||||
"esbuild": "^0.25.10",
|
"esbuild": "^0.25.0",
|
||||||
"eslint": "^9.26.0",
|
"eslint": "^9.26.0",
|
||||||
"eslint-config-prettier": "^10.1.8",
|
"eslint-config-prettier": "^10.1.8",
|
||||||
"eslint-plugin-cypress": "^4.3.0",
|
"eslint-plugin-cypress": "^4.3.0",
|
||||||
@@ -106,30 +106,30 @@
|
|||||||
"eslint-plugin-tsdoc": "^0.4.0",
|
"eslint-plugin-tsdoc": "^0.4.0",
|
||||||
"eslint-plugin-unicorn": "^59.0.1",
|
"eslint-plugin-unicorn": "^59.0.1",
|
||||||
"express": "^5.1.0",
|
"express": "^5.1.0",
|
||||||
"globals": "^16.4.0",
|
"globals": "^16.0.0",
|
||||||
"globby": "^14.1.0",
|
"globby": "^14.0.2",
|
||||||
"husky": "^9.1.7",
|
"husky": "^9.1.7",
|
||||||
"jest": "^30.1.3",
|
"jest": "^30.0.4",
|
||||||
"jison": "^0.4.18",
|
"jison": "^0.4.18",
|
||||||
"js-yaml": "^4.1.0",
|
"js-yaml": "^4.1.0",
|
||||||
"jsdom": "^26.1.0",
|
"jsdom": "^26.1.0",
|
||||||
"langium-cli": "3.3.0",
|
"langium-cli": "3.3.0",
|
||||||
"lint-staged": "^16.1.6",
|
"lint-staged": "^16.1.2",
|
||||||
"markdown-table": "^3.0.4",
|
"markdown-table": "^3.0.4",
|
||||||
"nyc": "^17.1.0",
|
"nyc": "^17.1.0",
|
||||||
"path-browserify": "^1.0.1",
|
"path-browserify": "^1.0.1",
|
||||||
"prettier": "^3.6.2",
|
"prettier": "^3.5.2",
|
||||||
"prettier-plugin-jsdoc": "^1.3.3",
|
"prettier-plugin-jsdoc": "^1.3.2",
|
||||||
"rimraf": "^6.0.1",
|
"rimraf": "^6.0.1",
|
||||||
"rollup-plugin-visualizer": "^6.0.3",
|
"rollup-plugin-visualizer": "^6.0.3",
|
||||||
"start-server-and-test": "^2.1.2",
|
"start-server-and-test": "^2.0.10",
|
||||||
"tslib": "^2.8.1",
|
"tslib": "^2.8.1",
|
||||||
"tsx": "^4.20.5",
|
"tsx": "^4.7.3",
|
||||||
"typescript": "~5.7.3",
|
"typescript": "~5.7.3",
|
||||||
"typescript-eslint": "^8.38.0",
|
"typescript-eslint": "^8.38.0",
|
||||||
"vite": "^7.0.7",
|
"vite": "^7.0.3",
|
||||||
"vite-plugin-istanbul": "^7.0.0",
|
"vite-plugin-istanbul": "^7.0.0",
|
||||||
"vitest": "^3.2.4"
|
"vitest": "^3.0.6"
|
||||||
},
|
},
|
||||||
"nyc": {
|
"nyc": {
|
||||||
"report-dir": "coverage/cypress"
|
"report-dir": "coverage/cypress"
|
||||||
|
|||||||
@@ -37,12 +37,12 @@
|
|||||||
]
|
]
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@braintree/sanitize-url": "^7.1.1",
|
"@braintree/sanitize-url": "^7.0.4",
|
||||||
"d3": "^7.9.0",
|
"d3": "^7.9.0",
|
||||||
"khroma": "^2.1.0"
|
"khroma": "^2.1.0"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"concurrently": "^9.2.1",
|
"concurrently": "^9.1.2",
|
||||||
"mermaid": "workspace:*",
|
"mermaid": "workspace:*",
|
||||||
"rimraf": "^6.0.1"
|
"rimraf": "^6.0.1"
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -1,16 +1,5 @@
|
|||||||
# @mermaid-js/layout-elk
|
# @mermaid-js/layout-elk
|
||||||
|
|
||||||
## 0.2.0
|
|
||||||
|
|
||||||
### Minor Changes
|
|
||||||
|
|
||||||
- [#6802](https://github.com/mermaid-js/mermaid/pull/6802) [`c8e5027`](https://github.com/mermaid-js/mermaid/commit/c8e50276e877c4de7593a09ec458c99353e65af8) Thanks [@darshanr0107](https://github.com/darshanr0107)! - feat: Update mindmap rendering to support multiple layouts, improved edge intersections, and new shapes
|
|
||||||
|
|
||||||
### Patch Changes
|
|
||||||
|
|
||||||
- Updated dependencies [[`33bc4a0`](https://github.com/mermaid-js/mermaid/commit/33bc4a0b4e2ca6d937bb0a8c4e2081b1362b2800), [`e0b45c2`](https://github.com/mermaid-js/mermaid/commit/e0b45c2d2b41c2a9038bf87646fa3ccd7560eb20), [`012530e`](https://github.com/mermaid-js/mermaid/commit/012530e98e9b8b80962ab270b6bb3b6d9f6ada05), [`c8e5027`](https://github.com/mermaid-js/mermaid/commit/c8e50276e877c4de7593a09ec458c99353e65af8)]:
|
|
||||||
- mermaid@11.11.0
|
|
||||||
|
|
||||||
## 0.1.9
|
## 0.1.9
|
||||||
|
|
||||||
### Patch Changes
|
### Patch Changes
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "@mermaid-js/layout-elk",
|
"name": "@mermaid-js/layout-elk",
|
||||||
"version": "0.2.0",
|
"version": "0.1.9",
|
||||||
"description": "ELK layout engine for mermaid",
|
"description": "ELK layout engine for mermaid",
|
||||||
"module": "dist/mermaid-layout-elk.core.mjs",
|
"module": "dist/mermaid-layout-elk.core.mjs",
|
||||||
"types": "dist/layouts.d.ts",
|
"types": "dist/layouts.d.ts",
|
||||||
|
|||||||
@@ -1,12 +0,0 @@
|
|||||||
# @mermaid-js/layout-tidy-tree
|
|
||||||
|
|
||||||
## 0.2.0
|
|
||||||
|
|
||||||
### Minor Changes
|
|
||||||
|
|
||||||
- [#6802](https://github.com/mermaid-js/mermaid/pull/6802) [`c8e5027`](https://github.com/mermaid-js/mermaid/commit/c8e50276e877c4de7593a09ec458c99353e65af8) Thanks [@darshanr0107](https://github.com/darshanr0107)! - feat: Update mindmap rendering to support multiple layouts, improved edge intersections, and new shapes
|
|
||||||
|
|
||||||
### Patch Changes
|
|
||||||
|
|
||||||
- Updated dependencies [[`33bc4a0`](https://github.com/mermaid-js/mermaid/commit/33bc4a0b4e2ca6d937bb0a8c4e2081b1362b2800), [`e0b45c2`](https://github.com/mermaid-js/mermaid/commit/e0b45c2d2b41c2a9038bf87646fa3ccd7560eb20), [`012530e`](https://github.com/mermaid-js/mermaid/commit/012530e98e9b8b80962ab270b6bb3b6d9f6ada05), [`c8e5027`](https://github.com/mermaid-js/mermaid/commit/c8e50276e877c4de7593a09ec458c99353e65af8)]:
|
|
||||||
- mermaid@11.11.0
|
|
||||||
@@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "@mermaid-js/layout-tidy-tree",
|
"name": "@mermaid-js/layout-tidy-tree",
|
||||||
"version": "0.2.0",
|
"version": "0.1.0",
|
||||||
"description": "Tidy-tree layout engine for mermaid",
|
"description": "Tidy-tree layout engine for mermaid",
|
||||||
"module": "dist/mermaid-layout-tidy-tree.core.mjs",
|
"module": "dist/mermaid-layout-tidy-tree.core.mjs",
|
||||||
"types": "dist/layouts.d.ts",
|
"types": "dist/layouts.d.ts",
|
||||||
|
|||||||
@@ -33,7 +33,7 @@
|
|||||||
],
|
],
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@zenuml/core": "^3.41.4"
|
"@zenuml/core": "^3.35.2"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"mermaid": "workspace:^"
|
"mermaid": "workspace:^"
|
||||||
|
|||||||
@@ -1,19 +1,5 @@
|
|||||||
# mermaid
|
# mermaid
|
||||||
|
|
||||||
## 11.11.0
|
|
||||||
|
|
||||||
### Minor Changes
|
|
||||||
|
|
||||||
- [#6704](https://github.com/mermaid-js/mermaid/pull/6704) [`012530e`](https://github.com/mermaid-js/mermaid/commit/012530e98e9b8b80962ab270b6bb3b6d9f6ada05) Thanks [@omkarht](https://github.com/omkarht)! - feat: Added support for new participant types (`actor`, `boundary`, `control`, `entity`, `database`, `collections`, `queue`) in `sequenceDiagram`.
|
|
||||||
|
|
||||||
- [#6802](https://github.com/mermaid-js/mermaid/pull/6802) [`c8e5027`](https://github.com/mermaid-js/mermaid/commit/c8e50276e877c4de7593a09ec458c99353e65af8) Thanks [@darshanr0107](https://github.com/darshanr0107)! - feat: Update mindmap rendering to support multiple layouts, improved edge intersections, and new shapes
|
|
||||||
|
|
||||||
### Patch Changes
|
|
||||||
|
|
||||||
- [#6905](https://github.com/mermaid-js/mermaid/pull/6905) [`33bc4a0`](https://github.com/mermaid-js/mermaid/commit/33bc4a0b4e2ca6d937bb0a8c4e2081b1362b2800) Thanks [@darshanr0107](https://github.com/darshanr0107)! - fix: Render newlines as spaces in class diagrams
|
|
||||||
|
|
||||||
- [#6886](https://github.com/mermaid-js/mermaid/pull/6886) [`e0b45c2`](https://github.com/mermaid-js/mermaid/commit/e0b45c2d2b41c2a9038bf87646fa3ccd7560eb20) Thanks [@darshanr0107](https://github.com/darshanr0107)! - fix: Handle arrows correctly when auto number is enabled
|
|
||||||
|
|
||||||
## 11.10.0
|
## 11.10.0
|
||||||
|
|
||||||
### Minor Changes
|
### Minor Changes
|
||||||
@@ -168,6 +154,7 @@
|
|||||||
### Minor Changes
|
### Minor Changes
|
||||||
|
|
||||||
- [#6408](https://github.com/mermaid-js/mermaid/pull/6408) [`ad65313`](https://github.com/mermaid-js/mermaid/commit/ad653138e16765d095613a6e5de86dc5e52ac8f0) Thanks [@ashishjain0512](https://github.com/ashishjain0512)! - fix: restore curve type configuration functionality for flowcharts. This fixes the issue where curve type settings were not being applied when configured through any of the following methods:
|
- [#6408](https://github.com/mermaid-js/mermaid/pull/6408) [`ad65313`](https://github.com/mermaid-js/mermaid/commit/ad653138e16765d095613a6e5de86dc5e52ac8f0) Thanks [@ashishjain0512](https://github.com/ashishjain0512)! - fix: restore curve type configuration functionality for flowcharts. This fixes the issue where curve type settings were not being applied when configured through any of the following methods:
|
||||||
|
|
||||||
- Config
|
- Config
|
||||||
- Init directive (%%{ init: { 'flowchart': { 'curve': '...' } } }%%)
|
- Init directive (%%{ init: { 'flowchart': { 'curve': '...' } } }%%)
|
||||||
- LinkStyle command (linkStyle default interpolate ...)
|
- LinkStyle command (linkStyle default interpolate ...)
|
||||||
@@ -186,12 +173,14 @@
|
|||||||
### Minor Changes
|
### Minor Changes
|
||||||
|
|
||||||
- [#6187](https://github.com/mermaid-js/mermaid/pull/6187) [`7809b5a`](https://github.com/mermaid-js/mermaid/commit/7809b5a93fae127f45727071f5ff14325222c518) Thanks [@ashishjain0512](https://github.com/ashishjain0512)! - Flowchart new syntax for node metadata bugs
|
- [#6187](https://github.com/mermaid-js/mermaid/pull/6187) [`7809b5a`](https://github.com/mermaid-js/mermaid/commit/7809b5a93fae127f45727071f5ff14325222c518) Thanks [@ashishjain0512](https://github.com/ashishjain0512)! - Flowchart new syntax for node metadata bugs
|
||||||
|
|
||||||
- Incorrect label mapping for nodes when using `&`
|
- Incorrect label mapping for nodes when using `&`
|
||||||
- Syntax error when `}` with trailing spaces before new line
|
- Syntax error when `}` with trailing spaces before new line
|
||||||
|
|
||||||
- [#6136](https://github.com/mermaid-js/mermaid/pull/6136) [`ec0d9c3`](https://github.com/mermaid-js/mermaid/commit/ec0d9c389aa6018043187654044c1e0b5aa4f600) Thanks [@knsv](https://github.com/knsv)! - Adding support for animation of flowchart edges
|
- [#6136](https://github.com/mermaid-js/mermaid/pull/6136) [`ec0d9c3`](https://github.com/mermaid-js/mermaid/commit/ec0d9c389aa6018043187654044c1e0b5aa4f600) Thanks [@knsv](https://github.com/knsv)! - Adding support for animation of flowchart edges
|
||||||
|
|
||||||
- [#6373](https://github.com/mermaid-js/mermaid/pull/6373) [`05bdf0e`](https://github.com/mermaid-js/mermaid/commit/05bdf0e20e2629fe77513218fbd4e28e65f75882) Thanks [@ashishjain0512](https://github.com/ashishjain0512)! - Upgrade Requirement and ER diagram to use the common renderer flow
|
- [#6373](https://github.com/mermaid-js/mermaid/pull/6373) [`05bdf0e`](https://github.com/mermaid-js/mermaid/commit/05bdf0e20e2629fe77513218fbd4e28e65f75882) Thanks [@ashishjain0512](https://github.com/ashishjain0512)! - Upgrade Requirement and ER diagram to use the common renderer flow
|
||||||
|
|
||||||
- Added support for directions
|
- Added support for directions
|
||||||
- Added support for hand drawn look
|
- Added support for hand drawn look
|
||||||
|
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "mermaid",
|
"name": "mermaid",
|
||||||
"version": "11.11.0",
|
"version": "11.10.0",
|
||||||
"description": "Markdown-ish syntax for generating flowcharts, mindmaps, sequence diagrams, class diagrams, gantt charts, git graphs and more.",
|
"description": "Markdown-ish syntax for generating flowcharts, mindmaps, sequence diagrams, class diagrams, gantt charts, git graphs and more.",
|
||||||
"type": "module",
|
"type": "module",
|
||||||
"module": "./dist/mermaid.core.mjs",
|
"module": "./dist/mermaid.core.mjs",
|
||||||
@@ -67,29 +67,29 @@
|
|||||||
]
|
]
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@braintree/sanitize-url": "^7.1.1",
|
"@braintree/sanitize-url": "^7.0.4",
|
||||||
"@iconify/utils": "^3.0.2",
|
"@iconify/utils": "^3.0.1",
|
||||||
"@mermaid-js/parser": "workspace:^",
|
"@mermaid-js/parser": "workspace:^",
|
||||||
"@types/d3": "^7.4.3",
|
"@types/d3": "^7.4.3",
|
||||||
"cytoscape": "^3.33.1",
|
"cytoscape": "^3.29.3",
|
||||||
"cytoscape-cose-bilkent": "^4.1.0",
|
"cytoscape-cose-bilkent": "^4.1.0",
|
||||||
"cytoscape-fcose": "^2.2.0",
|
"cytoscape-fcose": "^2.2.0",
|
||||||
"d3": "^7.9.0",
|
"d3": "^7.9.0",
|
||||||
"d3-sankey": "^0.12.3",
|
"d3-sankey": "^0.12.3",
|
||||||
"dagre-d3-es": "7.0.11",
|
"dagre-d3-es": "7.0.11",
|
||||||
"dayjs": "^1.11.18",
|
"dayjs": "^1.11.13",
|
||||||
"dompurify": "^3.2.5",
|
"dompurify": "^3.2.5",
|
||||||
"katex": "^0.16.22",
|
"katex": "^0.16.22",
|
||||||
"khroma": "^2.1.0",
|
"khroma": "^2.1.0",
|
||||||
"lodash-es": "^4.17.21",
|
"lodash-es": "^4.17.21",
|
||||||
"marked": "^16.3.0",
|
"marked": "^16.0.0",
|
||||||
"roughjs": "^4.6.6",
|
"roughjs": "^4.6.6",
|
||||||
"stylis": "^4.3.6",
|
"stylis": "^4.3.6",
|
||||||
"ts-dedent": "^2.2.0",
|
"ts-dedent": "^2.2.0",
|
||||||
"uuid": "^11.1.0"
|
"uuid": "^11.1.0"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@adobe/jsonschema2md": "^8.0.5",
|
"@adobe/jsonschema2md": "^8.0.2",
|
||||||
"@iconify/types": "^2.0.0",
|
"@iconify/types": "^2.0.0",
|
||||||
"@types/cytoscape": "^3.21.9",
|
"@types/cytoscape": "^3.21.9",
|
||||||
"@types/cytoscape-fcose": "^2.2.4",
|
"@types/cytoscape-fcose": "^2.2.4",
|
||||||
@@ -105,30 +105,30 @@
|
|||||||
"@types/stylis": "^4.2.7",
|
"@types/stylis": "^4.2.7",
|
||||||
"@types/uuid": "^10.0.0",
|
"@types/uuid": "^10.0.0",
|
||||||
"ajv": "^8.17.1",
|
"ajv": "^8.17.1",
|
||||||
"canvas": "^3.2.0",
|
"canvas": "^3.1.0",
|
||||||
"chokidar": "3.6.0",
|
"chokidar": "3.6.0",
|
||||||
"concurrently": "^9.2.1",
|
"concurrently": "^9.1.2",
|
||||||
"csstree-validator": "^4.0.1",
|
"csstree-validator": "^4.0.1",
|
||||||
"globby": "^14.1.0",
|
"globby": "^14.0.2",
|
||||||
"jison": "^0.4.18",
|
"jison": "^0.4.18",
|
||||||
"js-base64": "^3.7.8",
|
"js-base64": "^3.7.7",
|
||||||
"jsdom": "^26.1.0",
|
"jsdom": "^26.1.0",
|
||||||
"json-schema-to-typescript": "^15.0.4",
|
"json-schema-to-typescript": "^15.0.4",
|
||||||
"micromatch": "^4.0.8",
|
"micromatch": "^4.0.8",
|
||||||
"path-browserify": "^1.0.1",
|
"path-browserify": "^1.0.1",
|
||||||
"prettier": "^3.6.2",
|
"prettier": "^3.5.2",
|
||||||
"remark": "^15.0.1",
|
"remark": "^15.0.1",
|
||||||
"remark-frontmatter": "^5.0.0",
|
"remark-frontmatter": "^5.0.0",
|
||||||
"remark-gfm": "^4.0.1",
|
"remark-gfm": "^4.0.1",
|
||||||
"rimraf": "^6.0.1",
|
"rimraf": "^6.0.1",
|
||||||
"start-server-and-test": "^2.1.2",
|
"start-server-and-test": "^2.0.10",
|
||||||
"type-fest": "^4.41.0",
|
"type-fest": "^4.35.0",
|
||||||
"typedoc": "^0.28.13",
|
"typedoc": "^0.28.9",
|
||||||
"typedoc-plugin-markdown": "^4.8.1",
|
"typedoc-plugin-markdown": "^4.8.0",
|
||||||
"typescript": "~5.7.3",
|
"typescript": "~5.7.3",
|
||||||
"unist-util-flatmap": "^1.0.0",
|
"unist-util-flatmap": "^1.0.0",
|
||||||
"unist-util-visit": "^5.0.0",
|
"unist-util-visit": "^5.0.0",
|
||||||
"vitepress": "^1.6.4",
|
"vitepress": "^1.0.2",
|
||||||
"vitepress-plugin-search": "1.0.4-alpha.22"
|
"vitepress-plugin-search": "1.0.4-alpha.22"
|
||||||
},
|
},
|
||||||
"files": [
|
"files": [
|
||||||
|
|||||||
@@ -3,9 +3,7 @@ import type { ArchitectureDiagramConfig } from '../../config.type.js';
|
|||||||
import DEFAULT_CONFIG from '../../defaultConfig.js';
|
import DEFAULT_CONFIG from '../../defaultConfig.js';
|
||||||
import type { DiagramDB } from '../../diagram-api/types.js';
|
import type { DiagramDB } from '../../diagram-api/types.js';
|
||||||
import type { D3Element } from '../../types.js';
|
import type { D3Element } from '../../types.js';
|
||||||
import { cleanAndMerge, getEdgeId } from '../../utils.js';
|
import { cleanAndMerge } from '../../utils.js';
|
||||||
import type { LayoutData, Node, Edge } from '../../rendering-util/types.js';
|
|
||||||
|
|
||||||
import {
|
import {
|
||||||
clear as commonClear,
|
clear as commonClear,
|
||||||
getAccDescription,
|
getAccDescription,
|
||||||
@@ -353,147 +351,15 @@ export class ArchitectureDB implements DiagramDB {
|
|||||||
public getDiagramTitle = getDiagramTitle;
|
public getDiagramTitle = getDiagramTitle;
|
||||||
public getAccDescription = getAccDescription;
|
public getAccDescription = getAccDescription;
|
||||||
public setAccDescription = setAccDescription;
|
public setAccDescription = setAccDescription;
|
||||||
|
|
||||||
/**
|
|
||||||
* Converts architecture diagram data to LayoutData format for unified rendering
|
|
||||||
*/
|
|
||||||
public getData(): LayoutData {
|
|
||||||
const config = commonGetConfig();
|
|
||||||
const nodes: Node[] = [];
|
|
||||||
const edges: Edge[] = [];
|
|
||||||
|
|
||||||
const groups = this.getGroups();
|
|
||||||
for (const group of groups) {
|
|
||||||
const padding = this.getConfigField('padding');
|
|
||||||
const fontSize = this.getConfigField('fontSize');
|
|
||||||
|
|
||||||
const groupWidth = 200;
|
|
||||||
let groupHeight = 150;
|
|
||||||
|
|
||||||
if (group.title || group.icon) {
|
|
||||||
groupHeight += fontSize + padding;
|
|
||||||
}
|
|
||||||
|
|
||||||
nodes.push({
|
|
||||||
id: group.id,
|
|
||||||
label: group.title,
|
|
||||||
parentId: group.in,
|
|
||||||
isGroup: true,
|
|
||||||
shape: 'rect',
|
|
||||||
icon: group.icon,
|
|
||||||
width: groupWidth,
|
|
||||||
height: groupHeight,
|
|
||||||
padding: padding,
|
|
||||||
cssClasses: 'architecture-group',
|
|
||||||
cssCompiledStyles: [
|
|
||||||
'stroke: #cccccc',
|
|
||||||
'stroke-width: 2px',
|
|
||||||
'stroke-dasharray: 8,8',
|
|
||||||
'fill: transparent',
|
|
||||||
],
|
|
||||||
labelStyle: '',
|
|
||||||
look: config.look || 'classic',
|
|
||||||
rx: 5,
|
|
||||||
ry: 5,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
const services = this.getServices();
|
|
||||||
for (const service of services) {
|
|
||||||
const iconSize = this.getConfigField('iconSize');
|
|
||||||
let nodeWidth = iconSize;
|
|
||||||
let nodeHeight = iconSize;
|
|
||||||
|
|
||||||
if (service.title) {
|
|
||||||
nodeHeight += iconSize * 0.3;
|
|
||||||
nodeWidth = Math.max(nodeWidth, iconSize * 1.5);
|
|
||||||
}
|
|
||||||
|
|
||||||
nodes.push({
|
|
||||||
id: service.id,
|
|
||||||
label: service.title,
|
|
||||||
parentId: service.in,
|
|
||||||
isGroup: false,
|
|
||||||
shape: service.icon || (service as any).iconText ? 'icon' : 'squareRect',
|
|
||||||
icon: service.icon ? `mermaid-architecture:${service.icon}` : 'mermaid-architecture:blank',
|
|
||||||
width: service.width || nodeWidth,
|
|
||||||
height: service.height || nodeHeight,
|
|
||||||
cssClasses: 'architecture-service',
|
|
||||||
look: config.look,
|
|
||||||
padding: this.getConfigField('padding') / 4,
|
|
||||||
description: (service as any).iconText ? [(service as any).iconText] : undefined,
|
|
||||||
assetWidth: iconSize,
|
|
||||||
assetHeight: iconSize,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
const junctions = this.getJunctions();
|
|
||||||
for (const junction of junctions) {
|
|
||||||
nodes.push({
|
|
||||||
id: junction.id,
|
|
||||||
parentId: junction.in,
|
|
||||||
isGroup: false,
|
|
||||||
shape: 'squareRect',
|
|
||||||
width: 2,
|
|
||||||
height: 2,
|
|
||||||
cssClasses: 'architecture-junction',
|
|
||||||
look: config.look,
|
|
||||||
type: 'junction' as any,
|
|
||||||
padding: 0,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
const architectureEdges = this.getEdges();
|
|
||||||
let edgeCounter = 0;
|
|
||||||
for (const edge of architectureEdges) {
|
|
||||||
const edgeData = {
|
|
||||||
id: getEdgeId(edge.lhsId, edge.rhsId, { counter: edgeCounter, prefix: 'L' }),
|
|
||||||
start: edge.lhsId,
|
|
||||||
end: edge.rhsId,
|
|
||||||
source: edge.lhsId,
|
|
||||||
target: edge.rhsId,
|
|
||||||
label: edge.title || '',
|
|
||||||
labelpos: 'c',
|
|
||||||
type: 'normal',
|
|
||||||
minlen: 2,
|
|
||||||
weight: 1,
|
|
||||||
classes: 'edge-thickness-normal edge-pattern-solid architecture-edge',
|
|
||||||
look: config.look || 'classic',
|
|
||||||
curve: 'linear',
|
|
||||||
arrowTypeStart: edge.lhsInto ? 'point' : 'none',
|
|
||||||
arrowTypeEnd: edge.rhsInto ? 'point' : 'none',
|
|
||||||
arrowheadStyle: 'fill: #333',
|
|
||||||
thickness: 'normal',
|
|
||||||
pattern: 'solid',
|
|
||||||
style: ['stroke: #333333', 'stroke-width: 3px', 'fill: none'],
|
|
||||||
cssCompiledStyles: [],
|
|
||||||
labelStyle: [],
|
|
||||||
lhsDir: edge.lhsDir,
|
|
||||||
rhsDir: edge.rhsDir,
|
|
||||||
lhsInto: edge.lhsInto,
|
|
||||||
rhsInto: edge.rhsInto,
|
|
||||||
lhsGroup: edge.lhsGroup,
|
|
||||||
rhsGroup: edge.rhsGroup,
|
|
||||||
} as Edge & {
|
|
||||||
lhsDir: any;
|
|
||||||
rhsDir: any;
|
|
||||||
lhsInto?: boolean;
|
|
||||||
rhsInto?: boolean;
|
|
||||||
lhsGroup?: boolean;
|
|
||||||
rhsGroup?: boolean;
|
|
||||||
};
|
|
||||||
|
|
||||||
edges.push(edgeData);
|
|
||||||
edgeCounter++;
|
|
||||||
}
|
|
||||||
|
|
||||||
const result = {
|
|
||||||
nodes,
|
|
||||||
edges,
|
|
||||||
config,
|
|
||||||
dataStructures: this.getDataStructures(),
|
|
||||||
};
|
|
||||||
|
|
||||||
return result;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Typed wrapper for resolving an architecture diagram's config fields. Returns the default value if undefined
|
||||||
|
* @param field - the config field to access
|
||||||
|
* @returns
|
||||||
|
*/
|
||||||
|
// export function getConfigField<T extends keyof ArchitectureDiagramConfig>(
|
||||||
|
// field: T
|
||||||
|
// ): Required<ArchitectureDiagramConfig>[T] {
|
||||||
|
// return db.getConfig()[field];
|
||||||
|
// }
|
||||||
|
|||||||
@@ -2,7 +2,7 @@ import type { DiagramDefinition } from '../../diagram-api/types.js';
|
|||||||
import { parser } from './architectureParser.js';
|
import { parser } from './architectureParser.js';
|
||||||
import { ArchitectureDB } from './architectureDb.js';
|
import { ArchitectureDB } from './architectureDb.js';
|
||||||
import styles from './architectureStyles.js';
|
import styles from './architectureStyles.js';
|
||||||
import { renderer } from './architectureRenderer-unified.js';
|
import { renderer } from './architectureRenderer.js';
|
||||||
|
|
||||||
export const diagram: DiagramDefinition = {
|
export const diagram: DiagramDefinition = {
|
||||||
parser,
|
parser,
|
||||||
|
|||||||
@@ -1,50 +0,0 @@
|
|||||||
import { getConfig } from '../../diagram-api/diagramAPI.js';
|
|
||||||
import type { DiagramStyleClassDef } from '../../diagram-api/types.js';
|
|
||||||
import { log } from '../../logger.js';
|
|
||||||
import { getDiagramElement } from '../../rendering-util/insertElementsForSize.js';
|
|
||||||
import { getRegisteredLayoutAlgorithm, render } from '../../rendering-util/render.js';
|
|
||||||
import { setupViewPortForSVG } from '../../rendering-util/setupViewPortForSVG.js';
|
|
||||||
import type { LayoutData } from '../../rendering-util/types.js';
|
|
||||||
import utils from '../../utils.js';
|
|
||||||
|
|
||||||
import { registerIconPacks } from '../../rendering-util/icons.js';
|
|
||||||
import { architectureIcons } from './architectureIcons.js';
|
|
||||||
|
|
||||||
export const getClasses = function (
|
|
||||||
_text: string,
|
|
||||||
_diagramObj: any
|
|
||||||
): Map<string, DiagramStyleClassDef> {
|
|
||||||
return new Map();
|
|
||||||
};
|
|
||||||
|
|
||||||
export const draw = async function (_text: string, id: string, _version: string, diag: any) {
|
|
||||||
registerIconPacks([
|
|
||||||
{
|
|
||||||
name: architectureIcons.prefix,
|
|
||||||
icons: architectureIcons,
|
|
||||||
},
|
|
||||||
]);
|
|
||||||
const { securityLevel, architecture: conf, layout } = getConfig();
|
|
||||||
|
|
||||||
const data4Layout = diag.db.getData() as LayoutData;
|
|
||||||
|
|
||||||
const svg = getDiagramElement(id, securityLevel);
|
|
||||||
|
|
||||||
data4Layout.type = diag.type;
|
|
||||||
data4Layout.layoutAlgorithm = getRegisteredLayoutAlgorithm(layout, { fallback: 'dagre' });
|
|
||||||
|
|
||||||
data4Layout.nodeSpacing = 100;
|
|
||||||
data4Layout.rankSpacing = 100;
|
|
||||||
data4Layout.markers = ['point'];
|
|
||||||
data4Layout.diagramId = id;
|
|
||||||
|
|
||||||
log.debug('Architecture layout data:', data4Layout);
|
|
||||||
await render(data4Layout, svg);
|
|
||||||
|
|
||||||
const padding = conf?.padding ?? 8;
|
|
||||||
utils.insertTitle(svg, 'architectureTitleText', 0, diag.db.getDiagramTitle());
|
|
||||||
|
|
||||||
setupViewPortForSVG(svg, padding, 'architecture', conf?.useMaxWidth ?? true);
|
|
||||||
};
|
|
||||||
|
|
||||||
export const renderer = { draw };
|
|
||||||
@@ -2,7 +2,6 @@ import type { DiagramDBBase } from '../../diagram-api/types.js';
|
|||||||
import type { ArchitectureDiagramConfig } from '../../config.type.js';
|
import type { ArchitectureDiagramConfig } from '../../config.type.js';
|
||||||
import type { D3Element } from '../../types.js';
|
import type { D3Element } from '../../types.js';
|
||||||
import type cytoscape from 'cytoscape';
|
import type cytoscape from 'cytoscape';
|
||||||
import type { LayoutData } from '../../rendering-util/types.js';
|
|
||||||
|
|
||||||
/*=======================================*\
|
/*=======================================*\
|
||||||
| Architecture Diagram Types |
|
| Architecture Diagram Types |
|
||||||
@@ -257,8 +256,7 @@ export interface ArchitectureDB extends DiagramDBBase<ArchitectureDiagramConfig>
|
|||||||
getEdges: () => ArchitectureEdge[];
|
getEdges: () => ArchitectureEdge[];
|
||||||
setElementForId: (id: string, element: D3Element) => void;
|
setElementForId: (id: string, element: D3Element) => void;
|
||||||
getElementById: (id: string) => D3Element;
|
getElementById: (id: string) => D3Element;
|
||||||
getData: () => LayoutData;
|
getDataStructures: () => ArchitectureDataStructures;
|
||||||
getDirection: () => string;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export type ArchitectureAdjacencyList = Record<string, ArchitectureDirectionPairMap>;
|
export type ArchitectureAdjacencyList = Record<string, ArchitectureDirectionPairMap>;
|
||||||
|
|||||||
@@ -40,26 +40,105 @@ const openSourceFeatures: Feature[] = [
|
|||||||
{ iconUrl: '/icons/version-history.svg', featureName: 'Version history' },
|
{ iconUrl: '/icons/version-history.svg', featureName: 'Version history' },
|
||||||
];
|
];
|
||||||
|
|
||||||
const editorColumns: EditorColumn[] = [
|
const playgroundFeatures: Feature[] = [
|
||||||
{
|
{ iconUrl: '/icons/public.svg', featureName: 'Diagram stored in URL' },
|
||||||
title: 'Mermaid Pro',
|
{ iconUrl: '/icons/terminal.svg', featureName: 'Code editor' },
|
||||||
description: 'Unlock AI and real-time collaboration',
|
{ iconUrl: '/icons/whiteboard.svg', featureName: 'Whiteboard' },
|
||||||
highlighted: true,
|
|
||||||
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',
|
|
||||||
features: mermaidChartFeatures,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Open Source',
|
|
||||||
description: 'Code only, no login',
|
|
||||||
buttonText: 'Start free',
|
|
||||||
redirectUrl: 'https://mermaid.live/edit',
|
|
||||||
features: openSourceFeatures,
|
|
||||||
},
|
|
||||||
];
|
];
|
||||||
|
|
||||||
|
const editorColumnVariants: EditorColumn[][] = [
|
||||||
|
[
|
||||||
|
{
|
||||||
|
title: 'Playground',
|
||||||
|
description: 'Basic features, no login',
|
||||||
|
redirectUrl:
|
||||||
|
'https://www.mermaidchart.com/app/sign-up?utm_source=mermaid_js&utm_medium=3_editor_selection_A&utm_campaign=start_playground',
|
||||||
|
buttonText: 'Start free',
|
||||||
|
features: playgroundFeatures,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Free or Pro',
|
||||||
|
description: 'Advanced features, Free or Pro account',
|
||||||
|
proTrialUrl:
|
||||||
|
'https://www.mermaidchart.com/app/sign-up?utm_source=mermaid_js&utm_medium=3_editor_selection_A&utm_campaign=start_free',
|
||||||
|
proTrialButtonText: 'Start free',
|
||||||
|
highlighted: true,
|
||||||
|
redBarText: 'Best for collaboration',
|
||||||
|
features: mermaidChartFeatures,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Open Source',
|
||||||
|
description: 'Code only, no login',
|
||||||
|
redirectUrl: 'https://mermaid.live/edit',
|
||||||
|
buttonText: 'Start free',
|
||||||
|
features: openSourceFeatures,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
[
|
||||||
|
{
|
||||||
|
title: 'Mermaid Pro',
|
||||||
|
description: 'Unlock AI and real-time collaboration',
|
||||||
|
redirectUrl:
|
||||||
|
'https://www.mermaidchart.com/app/sign-up?utm_source=mermaid_js&utm_medium=editor_selection_B&utm_campaign=start_free',
|
||||||
|
buttonText: 'Start Free',
|
||||||
|
highlighted: true,
|
||||||
|
redBarText: 'Recommended',
|
||||||
|
proTrialButtonText: 'Start Pro trial',
|
||||||
|
proTrialUrl:
|
||||||
|
'https://www.mermaidchart.com/app/sign-up?utm_source=mermaid_js&utm_medium=editor_selection_B&utm_campaign=start_trial&redirect=%2Fapp%2Fuser%2Fbilling%2Fcheckout%3FisFromMermaid%3Dtrue',
|
||||||
|
features: mermaidChartFeatures,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Open Source',
|
||||||
|
description: 'Code only, no login',
|
||||||
|
buttonText: 'Start free',
|
||||||
|
redirectUrl: 'https://mermaid.live/edit',
|
||||||
|
isButtonMargined: true,
|
||||||
|
features: openSourceFeatures,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
[
|
||||||
|
{
|
||||||
|
title: 'Mermaid Pro',
|
||||||
|
description: 'Unlock AI and real-time collaboration',
|
||||||
|
highlighted: true,
|
||||||
|
redBarText: 'Recommended',
|
||||||
|
proTrialButtonText: 'Start free trial',
|
||||||
|
proTrialUrl:
|
||||||
|
'https://www.mermaidchart.com/app/sign-up?utm_source=mermaid_js&utm_medium=editor_selection_C&utm_campaign=start_trial&redirect=%2Fapp%2Fuser%2Fbilling%2Fcheckout%3FisFromMermaid%3Dtrue',
|
||||||
|
features: mermaidChartFeatures,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Open Source',
|
||||||
|
description: 'Code only, no login',
|
||||||
|
buttonText: 'Start free',
|
||||||
|
redirectUrl: 'https://mermaid.live/edit',
|
||||||
|
features: openSourceFeatures,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
[
|
||||||
|
{
|
||||||
|
title: 'Mermaid Pro',
|
||||||
|
description: 'Unlock AI and real-time collaboration',
|
||||||
|
highlighted: true,
|
||||||
|
redBarText: 'Recommended',
|
||||||
|
proTrialButtonText: 'Start free',
|
||||||
|
proTrialUrl:
|
||||||
|
'https://www.mermaidchart.com/app/sign-up?utm_source=mermaid_js&utm_medium=editor_selection_D&utm_campaign=start_free',
|
||||||
|
features: mermaidChartFeatures,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Open Source',
|
||||||
|
description: 'Code only, no login',
|
||||||
|
redirectUrl: 'https://mermaid.live/edit',
|
||||||
|
buttonText: 'Start free',
|
||||||
|
features: openSourceFeatures,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
];
|
||||||
|
|
||||||
|
const editorColumns = editorColumnVariants[Math.floor(Math.random() * editorColumnVariants.length)];
|
||||||
|
|
||||||
const isVisible = ref(false);
|
const isVisible = ref(false);
|
||||||
|
|
||||||
const handleMouseDown = (e: MouseEvent) => {
|
const handleMouseDown = (e: MouseEvent) => {
|
||||||
|
|||||||
@@ -17,6 +17,7 @@ While directives allow you to change most of the default configuration settings,
|
|||||||
Mermaid basically supports two types of configuration options to be overridden by directives.
|
Mermaid basically supports two types of configuration options to be overridden by directives.
|
||||||
|
|
||||||
1. _General/Top Level configurations_ : These are the configurations that are available and applied to all the diagram. **Some of the most important top-level** configurations are:
|
1. _General/Top Level configurations_ : These are the configurations that are available and applied to all the diagram. **Some of the most important top-level** configurations are:
|
||||||
|
|
||||||
- theme
|
- theme
|
||||||
- fontFamily
|
- fontFamily
|
||||||
- logLevel
|
- logLevel
|
||||||
|
|||||||
@@ -23,6 +23,7 @@ Try the Ultimate AI, Mermaid, and Visual Diagramming Suite by creating an accoun
|
|||||||
- **Plugins** - A plugin system for extending the functionality of Mermaid.
|
- **Plugins** - A plugin system for extending the functionality of Mermaid.
|
||||||
|
|
||||||
Official Mermaid Chart plugins:
|
Official Mermaid Chart plugins:
|
||||||
|
|
||||||
- [Mermaid Chart GPT](https://chatgpt.com/g/g-684cc36f30208191b21383b88650a45d-mermaid-chart-diagrams-and-charts)
|
- [Mermaid Chart GPT](https://chatgpt.com/g/g-684cc36f30208191b21383b88650a45d-mermaid-chart-diagrams-and-charts)
|
||||||
- [Confluence](https://marketplace.atlassian.com/apps/1234056/mermaid-chart-for-confluence?hosting=cloud&tab=overview)
|
- [Confluence](https://marketplace.atlassian.com/apps/1234056/mermaid-chart-for-confluence?hosting=cloud&tab=overview)
|
||||||
- [Jira](https://marketplace.atlassian.com/apps/1234810/mermaid-chart-for-jira?tab=overview&hosting=cloud)
|
- [Jira](https://marketplace.atlassian.com/apps/1234810/mermaid-chart-for-jira?tab=overview&hosting=cloud)
|
||||||
|
|||||||
@@ -33,11 +33,13 @@ The Mermaid Chart team is excited to introduce a new Visual Editor for Flowchart
|
|||||||
Learn more:
|
Learn more:
|
||||||
|
|
||||||
- Visual Editor For Flowcharts
|
- Visual Editor For Flowcharts
|
||||||
|
|
||||||
- [Blog post](https://www.mermaidchart.com/blog/posts/mermaid-chart-releases-new-visual-editor-for-flowcharts)
|
- [Blog post](https://www.mermaidchart.com/blog/posts/mermaid-chart-releases-new-visual-editor-for-flowcharts)
|
||||||
|
|
||||||
- [Demo video](https://www.youtube.com/watch?v=5aja0gijoO0)
|
- [Demo video](https://www.youtube.com/watch?v=5aja0gijoO0)
|
||||||
|
|
||||||
- Visual Editor For Sequence diagrams
|
- Visual Editor For Sequence diagrams
|
||||||
|
|
||||||
- [Blog post](https://www.mermaidchart.com/blog/posts/mermaid-chart-unveils-visual-editor-for-sequence-diagrams)
|
- [Blog post](https://www.mermaidchart.com/blog/posts/mermaid-chart-unveils-visual-editor-for-sequence-diagrams)
|
||||||
|
|
||||||
- [Demo video](https://youtu.be/imc2u5_N6Dc)
|
- [Demo video](https://youtu.be/imc2u5_N6Dc)
|
||||||
|
|||||||
@@ -1,17 +1,5 @@
|
|||||||
# Blog
|
# 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)
|
|
||||||
|
|
||||||
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)
|
|
||||||
|
|
||||||
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://docs.mermaidchart.com/blog/posts/mermaid-introduces-the-visual-editor-for-entity-relationship-diagrams)
|
||||||
|
|
||||||
7/15/2025 • 7 mins
|
7/15/2025 • 7 mins
|
||||||
|
|||||||
@@ -17,25 +17,25 @@
|
|||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@mdi/font": "^7.4.47",
|
"@mdi/font": "^7.4.47",
|
||||||
"@vueuse/core": "^13.9.0",
|
"@vueuse/core": "^13.1.0",
|
||||||
"font-awesome": "^4.7.0",
|
"font-awesome": "^4.7.0",
|
||||||
"jiti": "^2.4.2",
|
"jiti": "^2.4.2",
|
||||||
"mermaid": "workspace:^",
|
"mermaid": "workspace:^",
|
||||||
"vue": "^3.5.21"
|
"vue": "^3.4.38"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@iconify-json/carbon": "^1.2.13",
|
"@iconify-json/carbon": "^1.1.37",
|
||||||
"@unocss/reset": "^66.5.1",
|
"@unocss/reset": "^66.0.0",
|
||||||
"@vite-pwa/vitepress": "^1.0.0",
|
"@vite-pwa/vitepress": "^1.0.0",
|
||||||
"@vitejs/plugin-vue": "^6.0.1",
|
"@vitejs/plugin-vue": "^6.0.0",
|
||||||
"fast-glob": "^3.3.3",
|
"fast-glob": "^3.3.3",
|
||||||
"https-localhost": "^4.7.1",
|
"https-localhost": "^4.7.1",
|
||||||
"pathe": "^2.0.3",
|
"pathe": "^2.0.3",
|
||||||
"unocss": "^66.5.1",
|
"unocss": "^66.4.2",
|
||||||
"unplugin-vue-components": "^28.4.1",
|
"unplugin-vue-components": "^28.4.0",
|
||||||
"vite": "^7.0.7",
|
"vite": "^7.0.0",
|
||||||
"vite-plugin-pwa": "^1.0.3",
|
"vite-plugin-pwa": "^1.0.0",
|
||||||
"vitepress": "1.6.4",
|
"vitepress": "1.6.3",
|
||||||
"workbox-window": "^7.3.0"
|
"workbox-window": "^7.3.0"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -156,7 +156,7 @@ architecture-beta
|
|||||||
## Icons
|
## Icons
|
||||||
|
|
||||||
By default, architecture diagram supports the following icons: `cloud`, `database`, `disk`, `internet`, `server`.
|
By default, architecture diagram supports the following icons: `cloud`, `database`, `disk`, `internet`, `server`.
|
||||||
Users can use any of the 200,000+ icons available in iconify.design, or add other custom icons, by [registering an icon pack](../config/icons.md).
|
Users can use any of the 200,000+ icons available in iconify.design, or [add custom icons](../config/icons.md).
|
||||||
|
|
||||||
After the icons are installed, they can be used in the architecture diagram by using the format "name:icon-name", where name is the value used when registering the icon pack.
|
After the icons are installed, they can be used in the architecture diagram by using the format "name:icon-name", where name is the value used when registering the icon pack.
|
||||||
|
|
||||||
|
|||||||
@@ -83,6 +83,7 @@ The following unfinished features are not supported in the short term.
|
|||||||
- [ ] Legend
|
- [ ] Legend
|
||||||
|
|
||||||
- [x] System Context
|
- [x] System Context
|
||||||
|
|
||||||
- [x] Person(alias, label, ?descr, ?sprite, ?tags, $link)
|
- [x] Person(alias, label, ?descr, ?sprite, ?tags, $link)
|
||||||
- [x] Person_Ext
|
- [x] Person_Ext
|
||||||
- [x] System(alias, label, ?descr, ?sprite, ?tags, $link)
|
- [x] System(alias, label, ?descr, ?sprite, ?tags, $link)
|
||||||
@@ -96,6 +97,7 @@ The following unfinished features are not supported in the short term.
|
|||||||
- [x] System_Boundary
|
- [x] System_Boundary
|
||||||
|
|
||||||
- [x] Container diagram
|
- [x] Container diagram
|
||||||
|
|
||||||
- [x] Container(alias, label, ?techn, ?descr, ?sprite, ?tags, $link)
|
- [x] Container(alias, label, ?techn, ?descr, ?sprite, ?tags, $link)
|
||||||
- [x] ContainerDb
|
- [x] ContainerDb
|
||||||
- [x] ContainerQueue
|
- [x] ContainerQueue
|
||||||
@@ -105,6 +107,7 @@ The following unfinished features are not supported in the short term.
|
|||||||
- [x] Container_Boundary(alias, label, ?tags, $link)
|
- [x] Container_Boundary(alias, label, ?tags, $link)
|
||||||
|
|
||||||
- [x] Component diagram
|
- [x] Component diagram
|
||||||
|
|
||||||
- [x] Component(alias, label, ?techn, ?descr, ?sprite, ?tags, $link)
|
- [x] Component(alias, label, ?techn, ?descr, ?sprite, ?tags, $link)
|
||||||
- [x] ComponentDb
|
- [x] ComponentDb
|
||||||
- [x] ComponentQueue
|
- [x] ComponentQueue
|
||||||
@@ -113,15 +116,18 @@ The following unfinished features are not supported in the short term.
|
|||||||
- [x] ComponentQueue_Ext
|
- [x] ComponentQueue_Ext
|
||||||
|
|
||||||
- [x] Dynamic diagram
|
- [x] Dynamic diagram
|
||||||
|
|
||||||
- [x] RelIndex(index, from, to, label, ?tags, $link)
|
- [x] RelIndex(index, from, to, label, ?tags, $link)
|
||||||
|
|
||||||
- [x] Deployment diagram
|
- [x] Deployment diagram
|
||||||
|
|
||||||
- [x] Deployment_Node(alias, label, ?type, ?descr, ?sprite, ?tags, $link)
|
- [x] Deployment_Node(alias, label, ?type, ?descr, ?sprite, ?tags, $link)
|
||||||
- [x] Node(alias, label, ?type, ?descr, ?sprite, ?tags, $link): short name of Deployment_Node()
|
- [x] Node(alias, label, ?type, ?descr, ?sprite, ?tags, $link): short name of Deployment_Node()
|
||||||
- [x] Node_L(alias, label, ?type, ?descr, ?sprite, ?tags, $link): left aligned Node()
|
- [x] Node_L(alias, label, ?type, ?descr, ?sprite, ?tags, $link): left aligned Node()
|
||||||
- [x] Node_R(alias, label, ?type, ?descr, ?sprite, ?tags, $link): right aligned Node()
|
- [x] Node_R(alias, label, ?type, ?descr, ?sprite, ?tags, $link): right aligned Node()
|
||||||
|
|
||||||
- [x] Relationship Types
|
- [x] Relationship Types
|
||||||
|
|
||||||
- [x] Rel(from, to, label, ?techn, ?descr, ?sprite, ?tags, $link)
|
- [x] Rel(from, to, label, ?techn, ?descr, ?sprite, ?tags, $link)
|
||||||
- [x] BiRel (bidirectional relationship)
|
- [x] BiRel (bidirectional relationship)
|
||||||
- [x] Rel_U, Rel_Up
|
- [x] Rel_U, Rel_Up
|
||||||
|
|||||||
@@ -44,15 +44,18 @@ ValueConverter -->> Package: Return AST
|
|||||||
```
|
```
|
||||||
|
|
||||||
- When to override `TokenBuilder`?
|
- When to override `TokenBuilder`?
|
||||||
|
|
||||||
- To override keyword rules.
|
- To override keyword rules.
|
||||||
- To override terminal rules that need a custom function.
|
- To override terminal rules that need a custom function.
|
||||||
- To manually reorder the list of rules.
|
- To manually reorder the list of rules.
|
||||||
|
|
||||||
- When to override `Lexer`?
|
- When to override `Lexer`?
|
||||||
|
|
||||||
- To modify input before tokenizing.
|
- To modify input before tokenizing.
|
||||||
- To insert/modify tokens that cannot or have not been parsed.
|
- To insert/modify tokens that cannot or have not been parsed.
|
||||||
|
|
||||||
- When to override `LangiumParser`?
|
- When to override `LangiumParser`?
|
||||||
|
|
||||||
- To insert or modify attributes that can't be parsed.
|
- To insert or modify attributes that can't be parsed.
|
||||||
|
|
||||||
- When to override `ValueConverter`?
|
- When to override `ValueConverter`?
|
||||||
|
|||||||
@@ -1,19 +1,5 @@
|
|||||||
# mermaid
|
# mermaid
|
||||||
|
|
||||||
## 11.11.0
|
|
||||||
|
|
||||||
### Minor Changes
|
|
||||||
|
|
||||||
- [#6704](https://github.com/mermaid-js/mermaid/pull/6704) [`012530e`](https://github.com/mermaid-js/mermaid/commit/012530e98e9b8b80962ab270b6bb3b6d9f6ada05) Thanks [@omkarht](https://github.com/omkarht)! - feat: Added support for new participant types (`actor`, `boundary`, `control`, `entity`, `database`, `collections`, `queue`) in `sequenceDiagram`.
|
|
||||||
|
|
||||||
- [#6802](https://github.com/mermaid-js/mermaid/pull/6802) [`c8e5027`](https://github.com/mermaid-js/mermaid/commit/c8e50276e877c4de7593a09ec458c99353e65af8) Thanks [@darshanr0107](https://github.com/darshanr0107)! - feat: Update mindmap rendering to support multiple layouts, improved edge intersections, and new shapes
|
|
||||||
|
|
||||||
### Patch Changes
|
|
||||||
|
|
||||||
- [#6905](https://github.com/mermaid-js/mermaid/pull/6905) [`33bc4a0`](https://github.com/mermaid-js/mermaid/commit/33bc4a0b4e2ca6d937bb0a8c4e2081b1362b2800) Thanks [@darshanr0107](https://github.com/darshanr0107)! - fix: Render newlines as spaces in class diagrams
|
|
||||||
|
|
||||||
- [#6886](https://github.com/mermaid-js/mermaid/pull/6886) [`e0b45c2`](https://github.com/mermaid-js/mermaid/commit/e0b45c2d2b41c2a9038bf87646fa3ccd7560eb20) Thanks [@darshanr0107](https://github.com/darshanr0107)! - fix: Handle arrows correctly when auto number is enabled
|
|
||||||
|
|
||||||
## 11.10.0
|
## 11.10.0
|
||||||
|
|
||||||
### Minor Changes
|
### Minor Changes
|
||||||
@@ -168,6 +154,7 @@
|
|||||||
### Minor Changes
|
### Minor Changes
|
||||||
|
|
||||||
- [#6408](https://github.com/mermaid-js/mermaid/pull/6408) [`ad65313`](https://github.com/mermaid-js/mermaid/commit/ad653138e16765d095613a6e5de86dc5e52ac8f0) Thanks [@ashishjain0512](https://github.com/ashishjain0512)! - fix: restore curve type configuration functionality for flowcharts. This fixes the issue where curve type settings were not being applied when configured through any of the following methods:
|
- [#6408](https://github.com/mermaid-js/mermaid/pull/6408) [`ad65313`](https://github.com/mermaid-js/mermaid/commit/ad653138e16765d095613a6e5de86dc5e52ac8f0) Thanks [@ashishjain0512](https://github.com/ashishjain0512)! - fix: restore curve type configuration functionality for flowcharts. This fixes the issue where curve type settings were not being applied when configured through any of the following methods:
|
||||||
|
|
||||||
- Config
|
- Config
|
||||||
- Init directive (%%{ init: { 'flowchart': { 'curve': '...' } } }%%)
|
- Init directive (%%{ init: { 'flowchart': { 'curve': '...' } } }%%)
|
||||||
- LinkStyle command (linkStyle default interpolate ...)
|
- LinkStyle command (linkStyle default interpolate ...)
|
||||||
@@ -186,12 +173,14 @@
|
|||||||
### Minor Changes
|
### Minor Changes
|
||||||
|
|
||||||
- [#6187](https://github.com/mermaid-js/mermaid/pull/6187) [`7809b5a`](https://github.com/mermaid-js/mermaid/commit/7809b5a93fae127f45727071f5ff14325222c518) Thanks [@ashishjain0512](https://github.com/ashishjain0512)! - Flowchart new syntax for node metadata bugs
|
- [#6187](https://github.com/mermaid-js/mermaid/pull/6187) [`7809b5a`](https://github.com/mermaid-js/mermaid/commit/7809b5a93fae127f45727071f5ff14325222c518) Thanks [@ashishjain0512](https://github.com/ashishjain0512)! - Flowchart new syntax for node metadata bugs
|
||||||
|
|
||||||
- Incorrect label mapping for nodes when using `&`
|
- Incorrect label mapping for nodes when using `&`
|
||||||
- Syntax error when `}` with trailing spaces before new line
|
- Syntax error when `}` with trailing spaces before new line
|
||||||
|
|
||||||
- [#6136](https://github.com/mermaid-js/mermaid/pull/6136) [`ec0d9c3`](https://github.com/mermaid-js/mermaid/commit/ec0d9c389aa6018043187654044c1e0b5aa4f600) Thanks [@knsv](https://github.com/knsv)! - Adding support for animation of flowchart edges
|
- [#6136](https://github.com/mermaid-js/mermaid/pull/6136) [`ec0d9c3`](https://github.com/mermaid-js/mermaid/commit/ec0d9c389aa6018043187654044c1e0b5aa4f600) Thanks [@knsv](https://github.com/knsv)! - Adding support for animation of flowchart edges
|
||||||
|
|
||||||
- [#6373](https://github.com/mermaid-js/mermaid/pull/6373) [`05bdf0e`](https://github.com/mermaid-js/mermaid/commit/05bdf0e20e2629fe77513218fbd4e28e65f75882) Thanks [@ashishjain0512](https://github.com/ashishjain0512)! - Upgrade Requirement and ER diagram to use the common renderer flow
|
- [#6373](https://github.com/mermaid-js/mermaid/pull/6373) [`05bdf0e`](https://github.com/mermaid-js/mermaid/commit/05bdf0e20e2629fe77513218fbd4e28e65f75882) Thanks [@ashishjain0512](https://github.com/ashishjain0512)! - Upgrade Requirement and ER diagram to use the common renderer flow
|
||||||
|
|
||||||
- Added support for directions
|
- Added support for directions
|
||||||
- Added support for hand drawn look
|
- Added support for hand drawn look
|
||||||
|
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "@mermaid-js/tiny",
|
"name": "@mermaid-js/tiny",
|
||||||
"version": "11.11.0",
|
"version": "11.10.0",
|
||||||
"description": "Tiny version of mermaid",
|
"description": "Tiny version of mermaid",
|
||||||
"type": "commonjs",
|
"type": "commonjs",
|
||||||
"main": "./dist/mermaid.tiny.js",
|
"main": "./dist/mermaid.tiny.js",
|
||||||
|
|||||||
9885
pnpm-lock.yaml
generated
9885
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user