Compare commits

..

75 Commits

Author SHA1 Message Date
Sidharth Vinod
5482d0a603 Merge branch 'develop' into bug/2234_class-diagram-call-addClass-if-needed 2024-01-23 10:52:42 +05:30
Sidharth Vinod
05e17c0bf0 Merge pull request #5161 from mathbraga/feature/5114_add_parallel_commit_config
Feature/5114 add parallel commit config
2024-01-23 04:40:24 +00:00
Sidharth Vinod
1612d3fabd Merge pull request #5127 from mathbraga/bug/5059_fix_external_connection_after_updating_edges
Bug/5059 fix external connection after updating edges
2024-01-23 02:35:01 +00:00
Matheus Braga
679f77dea5 Merge branch 'develop' into bug/5059_fix_external_connection_after_updating_edges 2024-01-22 20:22:50 -03:00
Matheus Braga
1bad612c51 Merge branch 'develop' into feature/5114_add_parallel_commit_config 2024-01-22 20:19:52 -03:00
Matheus B
81825f22f5 Swap condition blocks to avoid using negation 2024-01-22 20:09:20 -03:00
Matheus B
e668698b5c Reposition const declaration to ideal place 2024-01-22 19:56:25 -03:00
Justin Greywolf
a22e4193c5 Handle non declared classes 2024-01-22 10:11:10 -08:00
Sidharth Vinod
7b624667fa Merge pull request #5219 from Yokozuna59/yokozuna/fix-broken-link
docs: fix swimm link
2024-01-22 08:03:56 +00:00
Matheus Braga
e7c52bbf59 Merge branch 'develop' into bug/5059_fix_external_connection_after_updating_edges 2024-01-21 13:20:24 -03:00
Matheus B
3e87412e97 Merge branch 'feature/5114_add_parallel_commit_config' of https://github.com/mathbraga/mermaid into feature/5114_add_parallel_commit_config 2024-01-20 21:13:44 -03:00
Matheus B
2401f334ec Merge branch 'develop' of https://github.com/mathbraga/mermaid into feature/5114_add_parallel_commit_config 2024-01-20 21:07:53 -03:00
Matheus B
4f60a27472 Change repetitive values into consts 2024-01-20 20:57:58 -03:00
Reda Al Sulais
2bbdd15031 docs: fix swimm link 2024-01-20 13:30:49 +03:00
Sidharth Vinod
b91624cb63 Merge pull request #5066 from Ronid1/docs/4974_reorder_integration_links
Docs/4974 reorder integration links
2024-01-19 18:10:58 +00:00
Sidharth Vinod
54f2452406 Merge branch 'develop' of github.com:mermaid-js/mermaid into develop
* 'develop' of github.com:mermaid-js/mermaid:
  Use pnpm/action-setup@v2
  Fix pnpm-lock by resetting it, sorry!
  chore: update browsers list
  Update update-browserlist.yml
  Update update-browserlist.yml to install pnpm
  Update update-browserlist.yml to fix deprecation and action fails
2024-01-19 23:47:14 +05:30
Sidharth Vinod
84a18a1858 Fix Update Browserslist 2024-01-19 23:47:07 +05:30
Sidharth Vinod
5b2a10e592 Merge pull request #5151 from Abrifq/patch-4
Update update-browserlist.yml to fix deprecation and action fails
2024-01-19 23:42:20 +05:30
Sidharth Vinod
8820c7baf1 Merge branch 'develop' into patch-4 2024-01-19 23:39:27 +05:30
Sidharth Vinod
1e70b3817e Use pnpm/action-setup@v2 2024-01-19 23:38:27 +05:30
Sidharth Vinod
1f37b6c91b Fix lint 2024-01-19 23:28:43 +05:30
Sidharth Vinod
d95fdfee94 Merge branch 'develop' into pr/Ronid1/5066
* develop: (122 commits)
  Cleanup e2e.yml
  Ignore push events on merge queue
  Remove ::
  Remove ::
  Remove ::
  Debug
  Debug
  Remove spec selector
  Handle edge cases in E2E
  Always run combineArtifacts
  Fix error message
  Fix cache save
  Update cache key
  Notify users
  Flatten uploaded images
  Flatten uploaded images
  Use pixelmatch for image comparison
  Run all tests
  Fix lint
  Update lockfile
  ...
2024-01-19 23:15:52 +05:30
Sidharth Vinod
d0224b23b0 Cleanup e2e.yml 2024-01-19 19:47:42 +05:30
Sidharth Vinod
6334516639 Merge branch 'combineImages' into develop
* combineImages:
  Ignore push events on merge queue
2024-01-19 19:47:12 +05:30
Sidharth Vinod
aadf32ab3e Ignore push events on merge queue 2024-01-19 19:45:55 +05:30
Sidharth Vinod
6424f823b2 Merge pull request #5213 from mermaid-js/combineImages
Optimise caching of test results
2024-01-19 14:09:03 +00:00
Sidharth Vinod
8bfb269b37 Remove :: 2024-01-19 19:33:59 +05:30
Sidharth Vinod
3935f6b389 Remove :: 2024-01-19 19:31:25 +05:30
Sidharth Vinod
f5dd24bce4 Remove :: 2024-01-19 19:29:45 +05:30
Sidharth Vinod
279e31bc55 Debug 2024-01-19 19:23:13 +05:30
Sidharth Vinod
f1fc874da8 Debug 2024-01-19 19:20:39 +05:30
Sidharth Vinod
a871a68f3c Remove spec selector 2024-01-19 19:05:06 +05:30
Sidharth Vinod
a964af67ec Handle edge cases in E2E 2024-01-19 19:04:25 +05:30
Sidharth Vinod
6f205f89b2 Always run combineArtifacts 2024-01-19 16:58:19 +05:30
Sidharth Vinod
35b3192c2b Fix error message 2024-01-19 16:58:19 +05:30
Sidharth Vinod
be4721b24d Fix cache save 2024-01-19 16:58:19 +05:30
Sidharth Vinod
a9a8a208a6 Update cache key 2024-01-19 16:58:19 +05:30
Sidharth Vinod
f58a86d747 Notify users 2024-01-19 16:58:19 +05:30
Sidharth Vinod
4ce5d07125 Flatten uploaded images 2024-01-19 16:58:18 +05:30
Sidharth Vinod
658af081ee Flatten uploaded images 2024-01-19 14:42:51 +05:30
Sidharth Vinod
fdfa917cdb Merge branch 'develop' into feature/5114_add_parallel_commit_config 2024-01-19 14:12:08 +05:30
Sidharth Vinod
1285e59080 Merge branch 'develop' into bug/5059_fix_external_connection_after_updating_edges 2024-01-19 13:18:45 +05:30
Sidharth Vinod
cb0ee5aa41 Use pixelmatch for image comparison 2024-01-19 13:17:14 +05:30
Sidharth Vinod
95ebb4aaec Merge branch 'develop' into bug/5059_fix_external_connection_after_updating_edges 2024-01-19 12:46:17 +05:30
Matheus Braga
223c8c92cb Merge branch 'develop' into bug/5059_fix_external_connection_after_updating_edges 2024-01-18 20:59:24 -03:00
Matheus Braga
7a8a1315c0 Merge branch 'develop' into feature/5114_add_parallel_commit_config 2024-01-16 21:14:17 -03:00
Matheus B
9213afbacd Add tests for gitgraphs with unconnected branches 2024-01-16 20:55:42 -03:00
Matheus B
c77a6e156c Include logic for gitgraph with unconnected branches 2024-01-16 20:54:26 -03:00
Matheus B
02246f64d2 Include undefined on findClosestParent return types and update the function 2024-01-16 20:01:03 -03:00
Matheus B
bf1edd99f9 Remove unnecessary argument on findClosestParent call 2024-01-16 19:37:52 -03:00
Matheus B
6f09bc7dc7 Use already defined const instead of method call 2024-01-16 19:34:16 -03:00
Abrifq
3fb6acbf8f Fix pnpm-lock by resetting it, sorry! 2024-01-12 23:50:35 +03:00
Abrifq
cbeee51108 Merge branch 'develop' into patch-4 2024-01-12 23:42:18 +03:00
Matheus B
c50a82a60e Build config types 2023-12-22 21:52:19 -03:00
Matheus Braga
f5ef0b600e Merge branch 'develop' into bug/5059_fix_external_connection_after_updating_edges 2023-12-22 21:49:21 -03:00
Matheus B
41f3f9fb32 Fix linter issues 2023-12-22 21:48:19 -03:00
Matheus B
46583cf4eb Merge branch 'develop' into feature/5114_add_parallel_commit_config 2023-12-22 21:32:20 -03:00
Matheus B
eb3e924c44 Add tests for gitGraph with parallel commits 2023-12-22 21:11:50 -03:00
Matheus B
222c46e7f0 Implement support for parallel commits config 2023-12-22 21:08:15 -03:00
Matheus B
00ac6ccb37 Add parallelCommits config option for gitGraphs 2023-12-22 20:42:24 -03:00
Ronid1
8e6f5bbdb1 Merge branch 'docs/4974_reorder_integration_links' of https://github.com/Ronid1/mermaid into docs/4974_reorder_integration_links 2023-12-19 18:30:20 -08:00
Ronid1
8002d9e2eb Merge branch 'develop' of https://github.com/mermaid-js/mermaid into docs/4974_reorder_integration_links 2023-12-19 18:17:58 -08:00
Matheus Braga
ddd6e9ac73 Merge branch 'develop' into bug/5059_fix_external_connection_after_updating_edges 2023-12-18 17:12:44 -03:00
Abrifq
31578ae72d chore: update browsers list 2023-12-18 18:28:37 +00:00
Arda Aydın
5d70b8922d Update update-browserlist.yml 2023-12-18 21:27:19 +03:00
Arda Aydın
26956bf128 Update update-browserlist.yml to install pnpm
this feels like a disgusting fix, not gonna lie
2023-12-18 21:22:52 +03:00
Arda Aydın
11aa7a7052 Update update-browserlist.yml to fix deprecation and action fails 2023-12-18 20:59:02 +03:00
Matheus B
c8f0b39075 Add e2e test for edge case 2023-12-08 13:39:53 -03:00
Matheus Braga
7e1cc27c76 Merge branch 'mermaid-js:develop' into bug/5059_fix_external_connection_after_updating_edges 2023-12-08 13:15:09 -03:00
Matheus B
8bff32adab Modify algorithm to re-check for external connections after defining anchor nodes 2023-12-08 13:08:13 -03:00
Sidharth Vinod
53b4f584db Merge branch 'develop' into docs/4974_reorder_integration_links 2023-11-24 11:33:41 +05:30
Ronid1
201016ccc5 update build docs 2023-11-23 20:57:43 -08:00
Ronid1
aaf9fd5f03 update and verify links 2023-11-23 20:44:35 -08:00
Ronid1
783becebf6 alphabetically order sub categories 2023-11-23 20:38:44 -08:00
Ronid1
3e098ab73b sort links alphabetically 2023-11-23 20:38:44 -08:00
18 changed files with 640 additions and 309 deletions

View File

@@ -1,13 +1,25 @@
# We use github cache to save snapshots between runs.
# For PRs and MergeQueues, the target commit is used, and for push events, github.event.previous is used.
# If a snapshot for a given Hash is not found, we checkout that commit, run the tests and cache the snapshots.
# These are then downloaded before running the E2E, providing the reference snapshots.
# If there are any errors, the diff image is uploaded to artifacts, and the user is notified.
name: E2E
on:
push:
branches-ignore:
- 'gh-readonly-queue/**'
pull_request:
merge_group:
permissions:
contents: read
env:
# For PRs and MergeQueues, the target commit is used, and for push events, github.event.previous is used.
targetHash: ${{ github.event.pull_request.base.sha || github.event.merge_group.base_sha || github.event.before }}
jobs:
cache:
runs-on: ubuntu-latest
@@ -25,13 +37,14 @@ jobs:
with:
save-always: true
path: ./cypress/snapshots
key: ${{ runner.os }}-snapshots
key: ${{ runner.os }}-snapshots-${{ env.targetHash }}
# If a snapshot for a given Hash is not found, we checkout that commit, run the tests and cache the snapshots.
- name: Switch to base branch
if: ${{ steps.cache-snapshot.outputs.cache-hit != 'true' }}
uses: actions/checkout@v4
with:
ref: ${{ github.event_name == 'pull_request' && github.event.pull_request.base.sha || github.event_name == 'merge_group' && github.event.merge_group.base.sha || 'develop' }}
ref: ${{ env.targetHash }}
- name: Cypress run
uses: cypress-io/github-action@v4
@@ -61,12 +74,13 @@ jobs:
with:
node-version: ${{ matrix.node-version }}
# These cached snapshots are downloaded, providing the reference snapshots.
- name: Cache snapshots
id: cache-snapshot
uses: actions/cache/restore@v3
with:
path: ./cypress/snapshots
key: ${{ runner.os }}-snapshots
key: ${{ runner.os }}-snapshots-${{ env.targetHash }}
# Install NPM dependencies, cache them correctly
# and run all Cypress tests
@@ -101,9 +115,54 @@ jobs:
verbose: true
token: 6845cc80-77ee-4e17-85a1-026cd95e0766
# We upload the artifacts into numbered archives to prevent overwriting
- name: Upload Artifacts
uses: actions/upload-artifact@v3
if: ${{ failure() && steps.cypress.conclusion == 'failure' }}
uses: actions/upload-artifact@v4
if: ${{ always() }}
with:
name: snapshots-${{ matrix.containers }}
retention-days: 1
path: ./cypress/snapshots
combineArtifacts:
needs: e2e
runs-on: ubuntu-latest
if: ${{ always() }}
steps:
# Download all snapshot artifacts and merge them into a single folder
- name: Download All Artifacts
uses: actions/download-artifact@v4
with:
path: snapshots
pattern: snapshots-*
merge-multiple: true
# For successful push events, we save the snapshots cache
- name: Save snapshots cache
id: cache-upload
if: ${{ github.event_name == 'push' && needs.e2e.result != 'failure' }}
uses: actions/cache/save@v3
with:
path: ./snapshots
key: ${{ runner.os }}-snapshots-${{ github.event.after }}
- name: Flatten images to a folder
if: ${{ needs.e2e.result == 'failure' }}
run: |
mkdir errors
cd snapshots
find . -mindepth 2 -type d -name "*__diff_output__*" -exec sh -c 'mv "$0"/*.png ../errors/' {} \;
- name: Upload Error snapshots
if: ${{ needs.e2e.result == 'failure' }}
uses: actions/upload-artifact@v4
id: upload-artifacts
with:
name: error-snapshots
path: cypress/snapshots/**/__diff_output__/*
retention-days: 10
path: errors/
- name: Notify Users
if: ${{ needs.e2e.result == 'failure' }}
run: |
echo "::error title=Visual tests failed::You can view images that failed by downloading the error-snapshots artifact: ${{ steps.upload-artifacts.outputs.artifact-url }}"

View File

@@ -9,10 +9,17 @@ jobs:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- run: npx browserslist@latest --update-db
- uses: pnpm/action-setup@v2
- run: npx update-browserslist-db@latest
- name: Commit changes
uses: EndBug/add-and-commit@v9
with:
author_name: ${{ github.actor }}
author_email: ${{ github.actor }}@users.noreply.github.com
message: 'chore: update browsers list'
push: false
- name: Create Pull Request
uses: peter-evans/create-pull-request@v5
with:
branch: update-browserslist
title: Update Browserslist

View File

@@ -102,6 +102,7 @@
"pathe",
"pbrolin",
"phpbb",
"pixelmatch",
"plantuml",
"playfair",
"pnpm",

View File

@@ -19,7 +19,7 @@ describe('Class diagram', () => {
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorillaGorilla
Class01 : int gorilla
Class01 : -int privateChimp
Class01 : +int publicGorilla
Class01 : #int protectedMarmoset

View File

@@ -1,12 +0,0 @@
import { imgSnapshotTest } from '../../helpers/util.ts';
describe('Flowchart', () => {
it('34: testing the label width in percy', () => {
imgSnapshotTest(
`graph TD
A[Christmas]
`,
{ theme: 'forest', fontFamily: '"Noto Sans SC", sans-serif' }
);
});
});

View File

@@ -8,6 +8,7 @@ describe('Flowchart v2', () => {
B --> C{Let me think}
C -->|One| D[Laptop]
C -->|Two| E[iPhone]
C -->|Three| F[fa:fa-car Car]
`,
{}
);
@@ -740,6 +741,25 @@ A ~~~ B
);
});
it('5059: Should render when subgraph contains only subgraphs, has link to outside and itself is part of a link', () => {
imgSnapshotTest(
`flowchart
subgraph Main
subgraph Child1
Node1
Node2
end
subgraph Child2
Node3
Node4
end
end
Main --> Out1
Child2 --> Out2`
);
});
describe('Markdown strings flowchart (#4220)', () => {
describe('html labels', () => {
it('With styling and classes', () => {

View File

@@ -826,4 +826,121 @@ gitGraph TB:
cherry-pick id: "M" parent:"B"`
);
});
it('41: should render default GitGraph with parallelCommits set to false', () => {
imgSnapshotTest(
`gitGraph
commit id:"1-abcdefg"
commit id:"2-abcdefg"
branch develop
commit id:"3-abcdefg"
commit id:"4-abcdefg"
checkout main
branch feature
commit id:"5-abcdefg"
commit id:"6-abcdefg"
checkout main
commit id:"7-abcdefg"
commit id:"8-abcdefg"
`,
{ gitGraph: { parallelCommits: false } }
);
});
it('42: should render GitGraph with parallel commits', () => {
imgSnapshotTest(
`gitGraph
commit id:"1-abcdefg"
commit id:"2-abcdefg"
branch develop
commit id:"3-abcdefg"
commit id:"4-abcdefg"
checkout main
branch feature
commit id:"5-abcdefg"
commit id:"6-abcdefg"
checkout main
commit id:"7-abcdefg"
commit id:"8-abcdefg"
`,
{ gitGraph: { parallelCommits: true } }
);
});
it('43: should render GitGraph with parallel commits | Vertical Branch', () => {
imgSnapshotTest(
`gitGraph TB:
commit id:"1-abcdefg"
commit id:"2-abcdefg"
branch develop
commit id:"3-abcdefg"
commit id:"4-abcdefg"
checkout main
branch feature
commit id:"5-abcdefg"
commit id:"6-abcdefg"
checkout main
commit id:"7-abcdefg"
commit id:"8-abcdefg"
`,
{ gitGraph: { parallelCommits: true } }
);
});
it('44: should render GitGraph with unconnected branches and no parallel commits', () => {
imgSnapshotTest(
`gitGraph
branch dev
branch v2
branch feat
commit id:"1-abcdefg"
commit id:"2-abcdefg"
checkout main
commit id:"3-abcdefg"
checkout dev
commit id:"4-abcdefg"
checkout v2
commit id:"5-abcdefg"
checkout main
commit id:"6-abcdefg"
`,
{ gitGraph: { parallelCommits: false } }
);
});
it('45: should render GitGraph with unconnected branches and parallel commits', () => {
imgSnapshotTest(
`gitGraph
branch dev
branch v2
branch feat
commit id:"1-abcdefg"
commit id:"2-abcdefg"
checkout main
commit id:"3-abcdefg"
checkout dev
commit id:"4-abcdefg"
checkout v2
commit id:"5-abcdefg"
checkout main
commit id:"6-abcdefg"
`,
{ gitGraph: { parallelCommits: true } }
);
});
it('46: should render GitGraph with unconnected branches and parallel commits | Vertical Branch', () => {
imgSnapshotTest(
`gitGraph TB:
branch dev
branch v2
branch feat
commit id:"1-abcdefg"
commit id:"2-abcdefg"
checkout main
commit id:"3-abcdefg"
checkout dev
commit id:"4-abcdefg"
checkout v2
commit id:"5-abcdefg"
checkout main
commit id:"6-abcdefg"
`,
{ gitGraph: { parallelCommits: true } }
);
});
});

View File

@@ -51,7 +51,7 @@ describe('pie chart', () => {
it('should render a pie diagram when useMaxWidth is false', () => {
renderGraph(
`pie title Sports in Sweden
"Bandy": 140
"Bandy": 40
"Ice-Hockey": 80
"Football": 90
`,

View File

@@ -5,8 +5,8 @@ describe('State diagram', () => {
imgSnapshotTest(
`
stateDiagram
[*] --> State122
State122 --> [*]
[*] --> State1
State1 --> [*]
`,
{ logLevel: 0, fontFamily: 'courier' }
);
@@ -18,7 +18,7 @@ describe('State diagram', () => {
stateDiagram
[*] --> S1
state "Some long names" as S1
state "Some long name" as S1
`,
{ logLevel: 0, fontFamily: 'courier' }
);

View File

@@ -26,4 +26,16 @@
import { addMatchImageSnapshotCommand } from 'cypress-image-snapshot/command';
// The SSIM comparison method can be used if the pixelmatch is throwing lots of false positives.
// SSIM actually does not catch minute changes in the image, so it is not as accurate as pixelmatch.
// addMatchImageSnapshotCommand({
// comparisonMethod: 'ssim',
// failureThreshold: 0.01,
// failureThresholdType: 'percent',
// customDiffConfig: {
// ssim: 'fast',
// },
// blur: 1,
// });
addMatchImageSnapshotCommand();

View File

@@ -27,50 +27,49 @@ To add an integration to this list, see the [Integrations - create page](./integ
### Productivity tools
- [GitHub](https://github.com) ✅
- [Using code blocks](https://github.blog/2022-02-14-include-diagrams-markdown-files-mermaid/) ✅
- [GitHub action: Compile mermaid to image](https://github.com/neenjaw/compile-mermaid-markdown-action)
- [svg-generator](https://github.com/SimonKenyonShepard/mermaidjs-github-svg-generator)
- [GitHub Writer](https://github.com/ckeditor/github-writer)
- [GitLab](https://docs.gitlab.com/ee/user/markdown.html#diagrams-and-flowcharts) ✅
- [Gitea](https://gitea.io) ✅
- [Azure Devops](https://docs.microsoft.com/en-us/azure/devops/project/wiki/wiki-markdown-guidance?view=azure-devops#add-mermaid-diagrams-to-a-wiki-page) ✅
- [Tuleap](https://docs.tuleap.org/user-guide/writing-in-tuleap.html#graphs) ✅
- [Mermaid Flow Visual Editor](https://www.mermaidflow.app) ✅
- [Deepdwn](https://billiam.itch.io/deepdwn) ✅
- [Joplin](https://joplinapp.org) ✅
- [Slab](https://slab.com) ✅
- [Swimm](https://swimm.io) ✅
- [Notion](https://notion.so) ✅
- [Observable](https://observablehq.com/@observablehq/mermaid) ✅
- [Obsidian](https://help.obsidian.md/Editing+and+formatting/Advanced+formatting+syntax#Diagram) ✅
- [NotesHub](https://noteshub.app) ✅
- [GitBook](https://gitbook.com)
- [Mermaid Plugin](https://github.com/JozoVilcek/gitbook-plugin-mermaid)
- [Markdown with Mermaid CLI](https://github.com/miao1007/gitbook-plugin-mermaid-cli)
- [Mermaid plugin for GitBook](https://github.com/wwformat/gitbook-plugin-mermaid-pdf)
- [LiveBook](https://livebook.dev) ✅
- [Atlassian Products](https://www.atlassian.com)
- [Mermaid for Confluence](https://marketplace.atlassian.com/apps/1224722/mermaid-for-confluence?hosting=cloud&tab=overview)
- [Mermaid Integration for Confluence](https://marketplace.atlassian.com/apps/1222792/mermaid-integration-for-confluence?hosting=cloud&tab=overview)
- [Mermaid Diagrams for Confluence](https://marketplace.atlassian.com/apps/1226945/mermaid-diagrams-for-confluence?hosting=cloud&tab=overview)
- [Mermaid Macro for Confluence](https://marketplace.atlassian.com/apps/1231150/mermaid-macro-for-confluence?hosting=cloud&tab=overview)
- [EliteSoft Mermaid Charts and Diagrams](https://marketplace.atlassian.com/apps/1227286/elitesoft-mermaid-charts-and-diagrams?hosting=cloud&tab=overview)
- [Mermaid for Jira Cloud - Draw UML diagrams easily](https://marketplace.atlassian.com/apps/1223053/mermaid-for-jira-cloud-draw-uml-diagrams-easily?hosting=cloud&tab=overview)
- [Mermaid Charts & Diagrams for Confluence](https://marketplace.atlassian.com/apps/1222572/)
- [Mermaid Charts & Diagrams for Jira](https://marketplace.atlassian.com/apps/1224537/)
- [Mermaid Diagrams for Confluence](https://marketplace.atlassian.com/apps/1226945/mermaid-diagrams-for-confluence?hosting=cloud&tab=overview)
- [Mermaid Live Editor for Confluence Cloud](https://marketplace.atlassian.com/apps/1231571/mermaid-live-editor-for-confluence?hosting=cloud&tab=overview)
- [Mermaid Macro for Confluence](https://marketplace.atlassian.com/apps/1231150/mermaid-macro-for-confluence?hosting=cloud&tab=overview)
- [Mermaid Plugin for Confluence](https://marketplace.atlassian.com/apps/1214124/mermaid-plugin-for-confluence?hosting=server&tab=overview)
- [CloudScript.io Addon](https://marketplace.atlassian.com/apps/1219878/cloudscript-io-mermaid-addon?hosting=cloud&tab=overview)
- [EliteSoft Mermaid Charts and Diagrams](https://marketplace.atlassian.com/apps/1227286/elitesoft-mermaid-charts-and-diagrams?hosting=cloud&tab=overview)
- [Auto convert diagrams in Jira](https://github.com/coddingtonbear/jirafs-mermaid)
- [Mermaid Charts & Diagrams for Jira](https://marketplace.atlassian.com/apps/1224537/)
- [Mermaid for Jira Cloud - Draw UML diagrams easily](https://marketplace.atlassian.com/apps/1223053/mermaid-for-jira-cloud-draw-uml-diagrams-easily?hosting=cloud&tab=overview)
- [CloudScript.io Mermaid Addon](https://marketplace.atlassian.com/apps/1219878/cloudscript-io-mermaid-addon?hosting=cloud&tab=overview)
- [Azure Devops](https://learn.microsoft.com/en-us/azure/devops/project/wiki/markdown-guidance?view=azure-devops#add-mermaid-diagrams-to-a-wiki-page) ✅
- [Deepdwn](https://billiam.itch.io/deepdwn) ✅
- [GitBook](https://gitbook.com)
- [Mermaid Plugin](https://github.com/JozoVilcek/gitbook-plugin-mermaid)
- [Mermaid plugin for GitBook](https://github.com/wwformat/gitbook-plugin-mermaid-pdf)
- [Markdown with Mermaid CLI](https://github.com/miao1007/gitbook-plugin-mermaid-cli)
- [Gitea](https://gitea.io) ✅
- [GitHub](https://github.com) ✅
- [Using code blocks](https://github.blog/2022-02-14-include-diagrams-markdown-files-mermaid/) ✅
- [GitHub action: Compile mermaid to image](https://github.com/neenjaw/compile-mermaid-markdown-action)
- [GitHub Writer](https://github.com/ckeditor/github-writer)
- [SVG diagram generator](https://github.com/SimonKenyonShepard/mermaidjs-github-svg-generator)
- [GitLab](https://docs.gitlab.com/ee/user/markdown.html#diagrams-and-flowcharts) ✅
- [Mermaid Plugin for JetBrains IDEs](https://plugins.jetbrains.com/plugin/20146-mermaid)
- [Joplin](https://joplinapp.org) ✅
- [LiveBook](https://livebook.dev) ✅
- [Tuleap](https://docs.tuleap.org/user-guide/writing-in-tuleap.html#graphs) ✅
- [Mermaid Flow Visual Editor](https://www.mermaidflow.app) ✅
- [Mermerd](https://github.com/KarnerTh/mermerd)
- [Slab](https://slab.com) ✅
- [Swimm](https://docs.swimm.io/features/diagrams-and-charts/#mermaid--swimm--up-to-date-diagrams-) ✅
- [NotesHub](https://noteshub.app) ✅
- [Notion](https://notion.so) ✅
- [Observable](https://observablehq.com/@observablehq/mermaid) ✅
- [Obsidian](https://help.obsidian.md/Editing+and+formatting/Advanced+formatting+syntax#Diagram) ✅
- [Redmine](https://redmine.org)
- [Mermaid Macro](https://www.redmine.org/plugins/redmine_mermaid_macro)
- [Markdown for mermaid plugin](https://github.com/jamieh-mongolian/markdown-for-mermaid-plugin)
- [redmine-mermaid](https://github.com/styz/redmine_mermaid)
- [markdown-for-mermaid-plugin](https://github.com/jamieh-mongolian/markdown-for-mermaid-plugin)
- [Mermaid Plugin for JetBrains IDEs](https://plugins.jetbrains.com/plugin/20146-mermaid)
- [mermerd](https://github.com/KarnerTh/mermerd)
- Visual Studio Code [Polyglot Interactive Notebooks](https://github.com/dotnet/interactive#net-interactive)
- Codemia [a tool to practice system design problems](https://codemia.io)
### CRM/ERP
@@ -82,139 +81,137 @@ Customer Relationship Management/Enterprise Resource Planning
Blogging frameworks and platforms
- [WordPress](https://wordpress.org)
- [WordPress Markdown Editor](https://wordpress.org/plugins/wp-githuber-md)
- [WP-ReliableMD](https://wordpress.org/plugins/wp-reliablemd/)
- [Hexo](https://hexo.io)
- [hexo-filter-mermaid-diagrams](https://github.com/webappdevelp/hexo-filter-mermaid-diagrams)
- [hexo-tag-mermaid](https://github.com/JameChou/hexo-tag-mermaid)
- [hexo-mermaid-diagrams](https://github.com/mslxl/hexo-mermaid-diagrams)
- [Nextra](https://nextra.site/)
- [Mermaid](https://nextra.site/docs/guide/mermaid)
- [WordPress](https://wordpress.org)
- [WordPress Markdown Editor](https://wordpress.org/plugins/wp-githuber-md)
- [WP-ReliableMD](https://wordpress.org/plugins/wp-reliablemd/)
### CMS/ECM
Content Management Systems/Enterprise Content Management
- [Grav CMS](https://getgrav.org/)
- [Mermaid Diagrams Plugin](https://github.com/DanielFlaum/grav-plugin-mermaid-diagrams)
- [GitLab Markdown Adapter](https://github.com/Goutte/grav-plugin-gitlab-markdown-adapter)
- [VitePress](https://vitepress.vuejs.org/)
- [Plugin for Mermaid.js](https://emersonbottero.github.io/vitepress-plugin-mermaid/)
- [VuePress](https://vuepress.vuejs.org/)
- [Plugin for Mermaid.js](https://github.com/eFrane/vuepress-plugin-mermaidjs)
- [Grav CMS](https://getgrav.org/)
- [Mermaid Diagrams](https://github.com/DanielFlaum/grav-plugin-mermaid-diagrams)
- [GitLab Markdown Adapter](https://github.com/Goutte/grav-plugin-gitlab-markdown-adapter)
### Communication
Communication tools and platforms
- [Discourse](https://discourse.org)
- [Mermaid Plugin](https://github.com/pnewell/discourse-mermaid), [And](https://github.com/unfoldingWord-dev/discourse-mermaid)
- [Mermaid Plugin](https://github.com/pnewell/discourse-mermaid)
- [Mattermost](https://mattermost.com/)
- [Mermaid Plugin](https://github.com/SpikeTings/Mermaid)
- [NodeBB](https://nodebb.org)
- [Mermaid Parser Plugin](https://www.npmjs.com/package/nodebb-plugin-mermaid)
- [phpBB](https://phpbb.com)
- [phpbb-ext-mermaid](https://github.com/AlfredoRamos/phpbb-ext-mermaid)
- [NodeBB](https://nodebb.org)
- [Mermaid Plugin](https://www.npmjs.com/package/nodebb-plugin-mermaid)
- [Slack](https://slack.com)
- [Mermaid for Slack](https://github.com/JackuB/mermaid-for-slack)
- [Mermaid Preview](https://github.com/JackuB/mermaid-for-slack)
### Wikis
- [PmWiki](https://www.pmwiki.org)
- [MermaidJs Cookbook recipe](https://www.pmwiki.org/wiki/Cookbook/MermaidJs)
- [MediaWiki](https://www.mediawiki.org)
- [Mermaid Extension](https://www.mediawiki.org/wiki/Extension:Mermaid)
- [Flex Diagrams Extension](https://www.mediawiki.org/wiki/Extension:Flex_Diagrams)
- [Semantic Media Wiki](https://semantic-mediawiki.org)
- [Mermaid Plugin](https://github.com/SemanticMediaWiki/Mermaid)
- [DokuWiki](https://dokuwiki.org)
- [ComboStrap](https://combostrap.com/mermaid)
- [Mermaid Plugin](https://www.dokuwiki.org/plugin:mermaid)
- [Foswiki](https://foswiki.org)
- [Mermaid Plugin](https://foswiki.org/Extensions/MermaidPlugin)
- [DokuWiki](https://dokuwiki.org)
- [Mermaid Plugin](https://www.dokuwiki.org/plugin:mermaid)
- [ComboStrap](https://combostrap.com/mermaid)
- [MediaWiki](https://www.mediawiki.org)
- [Flex Diagrams Extension](https://www.mediawiki.org/wiki/Extension:Flex_Diagrams)
- [Mermaid Extension](https://www.mediawiki.org/wiki/Extension:Mermaid)
- [PmWiki](https://www.pmwiki.org)
- [MermaidJs Cookbook recipe](https://www.pmwiki.org/wiki/Cookbook/MermaidJs)
- [Semantic Media Wiki](https://semantic-mediawiki.org)
- [Mermaid Plugin](https://github.com/SemanticMediaWiki/Mermaid)
- [TiddlyWiki](https://tiddlywiki.com/)
- [mermaid-tw5: full js library](https://github.com/efurlanm/mermaid-tw5)
- [tw5-mermaid: wrapper for Mermaid Live](https://github.com/jasonmhoule/tw5-mermaid)
- [mermaid-tw5: wrapper for Mermaid Live](https://github.com/efurlanm/mermaid-tw5)
- [tw5-mermaid: plugin for managing Mermaid.js tiddlers](https://github.com/jasonmhoule/tw5-mermaid)
### Editor Plugins
- [VS Code](https://code.visualstudio.com/)
- [Markdown Preview Mermaid Support](https://marketplace.visualstudio.com/items?itemName=bierner.markdown-mermaid)
- [Mermaid Preview](https://marketplace.visualstudio.com/items?itemName=vstirbu.vscode-mermaid-preview)
- [Markdown Preview Enhanced](https://marketplace.visualstudio.com/items?itemName=shd101wyy.markdown-preview-enhanced)
- [Mermaid Markdown Syntax Highlighting](https://marketplace.visualstudio.com/items?itemName=bpruitt-goddard.mermaid-markdown-syntax-highlighting)
- [Mermaid Editor](https://marketplace.visualstudio.com/items?itemName=tomoyukim.vscode-mermaid-editor)
- [Mermaid Export](https://marketplace.visualstudio.com/items?itemName=Gruntfuggly.mermaid-export)
- [Markdown PDF](https://marketplace.visualstudio.com/items?itemName=yzane.markdown-pdf)
- [Preview](https://marketplace.visualstudio.com/items?itemName=searKing.preview-vscode)
- [Preview Sequence Diagrams](https://marketplace.visualstudio.com/items?itemName=arichika.previewseqdiag-vscode)
- Atom _(Atom has been [archived.](https://github.blog/2022-06-08-sunsetting-atom/))_
- [Markdown Preview Enhanced](https://github.com/shd101wyy/markdown-preview-enhanced)
- [Atom Mermaid](https://github.com/y-takey/atom-mermaid)
- [Language Mermaid Syntax Highlighter](https://github.com/ytisf/language-mermaid)
- [Astah](https://astah.net)
- [Export to Mermaid](https://github.com/Avens666/Astah_Jude_UML_export_to_Markdown-mermaid-Plantuml-)
- [Brackets](https://brackets.io/)
- [Mermaid Preview](https://github.com/AlanHohn/mermaid-preview)
- [CKEditor](https://github.com/ckeditor/ckeditor5)
- [CKEditor 5 Mermaid plugin](https://github.com/ckeditor/ckeditor5-mermaid)
- [Draw.io](https://draw.io)
- [Mermaid Plugin](https://github.com/nopeslide/drawio_mermaid_plugin)
- [GNU Emacs](https://www.gnu.org/software/emacs/)
- [Major mode for .mmd files](https://github.com/abrochard/mermaid-mode)
- [Org-Mode integration](https://github.com/arnm/ob-mermaid)
- [GNU Nano](https://www.nano-editor.org/)
- [Nano Mermaid](https://github.com/Yash-Singh1/nano-mermaid)
- [Google docs](https://docs.google.com/)
- [Mermaid plugin for google docs](https://workspace.google.com/marketplace/app/mermaid/636321283856)
- [Inkdrop](https://www.inkdrop.app)
- [Mermaid Plugin](https://github.com/inkdropapp/inkdrop-mermaid)
- [Light Table](http://lighttable.com/)
- [Mermaid Plugin](https://github.com/cldwalker/Mermaid)
- [Markdown-It](https://github.com/markdown-it/markdown-it)
- [Textual UML Parser](https://github.com/manastalukdar/markdown-it-textual-uml)
- [Mermaid Plugin](https://github.com/tylingsoft/markdown-it-mermaid)
- [md-it-mermaid](https://github.com/iamcco/md-it-mermaid)
- [markdown-it-mermaid-less](https://github.com/searKing/markdown-it-mermaid-less)
- Atom _(Atom has been [archived.](https://github.blog/2022-06-08-sunsetting-atom/))_
- [Markdown Preview Enhanced](https://github.com/shd101wyy/markdown-preview-enhanced)
- [Atom Mermaid](https://github.com/y-takey/atom-mermaid)
- [Language Mermaid Syntax Highlighter](https://github.com/ytisf/language-mermaid)
- [Podlite](https://github.com/zag/podlite-desktop)
- [=Diagram block](https://github.com/zag/podlite/tree/main/packages/podlite-diagrams)
- [Standard Notes](https://standardnotes.com/)
- [Mermaid Extension](https://github.com/nienow/sn-mermaid)
- [Sublime Text 3](https://sublimetext.com)
- [Mermaid Package](https://packagecontrol.io/packages/Mermaid)
- [Astah](https://astah.net)
- [Export to Mermaid](https://github.com/Avens666/Astah_Jude_UML_export_to_Markdown-mermaid-Plantuml-)
- [Light Table](http://lighttable.com/)
- [Mermaid Plugin](https://github.com/cldwalker/Mermaid)
- [Draw.io](https://draw.io) - [Plugin](https://github.com/nopeslide/drawio_mermaid_plugin)
- [Inkdrop](https://www.inkdrop.app) - [Plugin](https://github.com/inkdropapp/inkdrop-mermaid)
- [VS Code](https://code.visualstudio.com/)
- [Mermaid Editor](https://marketplace.visualstudio.com/items?itemName=tomoyukim.vscode-mermaid-editor)
- [Mermaid Export](https://marketplace.visualstudio.com/items?itemName=Gruntfuggly.mermaid-export)
- [Markdown PDF](https://marketplace.visualstudio.com/items?itemName=yzane.markdown-pdf)
- [Markdown Preview Mermaid Support](https://marketplace.visualstudio.com/items?itemName=bierner.markdown-mermaid)
- [Markdown Preview Enhanced](https://marketplace.visualstudio.com/items?itemName=shd101wyy.markdown-preview-enhanced)
- [Mermaid Preview](https://marketplace.visualstudio.com/items?itemName=vstirbu.vscode-mermaid-preview)
- [Preview](https://marketplace.visualstudio.com/items?itemName=searKing.preview-vscode)
- [Preview Sequence Diagrams](https://marketplace.visualstudio.com/items?itemName=arichika.previewseqdiag-vscode)
- [Mermaid Markdown Syntax Highlighting](https://marketplace.visualstudio.com/items?itemName=bpruitt-goddard.mermaid-markdown-syntax-highlighting)
- [Vim](https://www.vim.org)
- [Official Vim Syntax and ftplugin](https://github.com/craigmac/vim-mermaid)
- [Vim Diagram Syntax](https://github.com/zhaozg/vim-diagram)
- [GNU Emacs](https://www.gnu.org/software/emacs/)
- [Major mode for .mmd files](https://github.com/abrochard/mermaid-mode)
- [Org-Mode integration](https://github.com/arnm/ob-mermaid)
- [Brackets](https://brackets.io/)
- [Mermaid Preview](https://github.com/AlanHohn/mermaid-preview)
- [Iodide](https://github.com/iodide-project/iodide)
- [iodide-mermaid-plugin](https://github.com/iodide-project/iodide-mermaid-plugin)
- [Google docs](https://docs.google.com/)
- [Mermaid plugin for google docs](https://workspace.google.com/marketplace/app/mermaid/636321283856)
- [Podlite](https://github.com/zag/podlite-desktop)
- [Named block =Diagram](https://github.com/zag/podlite/tree/main/packages/podlite-diagrams)
- [GNU Nano](https://www.nano-editor.org/)
- [Nano Mermaid](https://github.com/Yash-Singh1/nano-mermaid)
- [CKEditor](https://github.com/ckeditor/ckeditor5)
- [CKEditor 5 Mermaid plugin](https://github.com/ckeditor/ckeditor5-mermaid)
- [Standard Notes](https://standardnotes.com/)
- [sn-mermaid](https://github.com/nienow/sn-mermaid)
- [Official Vim Syntax and ft plugin](https://github.com/craigmac/vim-mermaid)
### Document Generation
- [Codedoc](https://codedoc.cc/)
- [codedoc-mermaid-plugin](https://www.npmjs.com/package/codedoc-mermaid-plugin)
- [Docsy Hugo Theme](https://www.docsy.dev/docs/adding-content/lookandfeel/#diagrams-with-mermaid) ✅
- [Docusaurus](https://docusaurus.io/docs/markdown-features/diagrams) ✅
- [Unison programming language](https://www.unison-lang.org/docs/usage-topics/documentation/) ✅
- [Swimm - Up-to-date diagrams with Swimm, the knowledge management tool for code](https://docs.swimm.io/features/diagrams-and-charts/#mermaid--swimm--up-to-date-diagrams-)
- [Sphinx](https://www.sphinx-doc.org/en/master/)
- [sphinxcontrib-mermaid](https://github.com/mgaitan/sphinxcontrib-mermaid)
- [remark](https://remark.js.org/)
- [remark-mermaidjs](https://github.com/remcohaszing/remark-mermaidjs)
- [rehype](https://github.com/rehypejs/rehype)
- [rehype-mermaid](https://github.com/remcohaszing/rehype-mermaid)
- [Gatsby](https://www.gatsbyjs.com/)
- [gatsby-remark-mermaid](https://github.com/remcohaszing/gatsby-remark-mermaid)
- [JSDoc](https://jsdoc.app/)
- [jsdoc-mermaid](https://github.com/Jellyvision/jsdoc-mermaid)
- [mdBook](https://rust-lang.github.io/mdBook/index.html)
- [mdbook-mermaid](https://github.com/badboy/mdbook-mermaid)
- [MkDocs](https://www.mkdocs.org)
- [mkdocs-mermaid2-plugin](https://github.com/fralau/mkdocs-mermaid2-plugin)
- [mkdocs-material](https://github.com/squidfunk/mkdocs-material), check the [docs](https://squidfunk.github.io/mkdocs-material/reference/diagrams/)
- [Quarto](https://quarto.org/)
- [rehype](https://github.com/rehypejs/rehype)
- [rehype-mermaid](https://github.com/remcohaszing/rehype-mermaid)
- [remark](https://remark.js.org/)
- [remark-mermaidjs](https://github.com/remcohaszing/remark-mermaidjs)
- [Sphinx](https://www.sphinx-doc.org/en/master/)
- [sphinxcontrib-mermaid](https://github.com/mgaitan/sphinxcontrib-mermaid)
- [Type Doc](https://typedoc.org/)
- [typedoc-plugin-mermaid](https://www.npmjs.com/package/typedoc-plugin-mermaid)
- [Docsy Hugo Theme](https://www.docsy.dev/docs/adding-content/lookandfeel/#diagrams-with-mermaid) ✅
- [Codedoc](https://codedoc.cc/)
- [codedoc-mermaid-plugin](https://www.npmjs.com/package/codedoc-mermaid-plugin)
- [mdbook](https://rust-lang.github.io/mdBook/index.html)
- [mdbook-mermaid](https://github.com/badboy/mdbook-mermaid)
- [Quarto](https://quarto.org/)
- [Typora](https://typora.io/) ✅
- [See docs](https://support.typora.io/Draw-Diagrams-With-Markdown/#mermaid)
- [Typora](https://support.typora.io/Draw-Diagrams-With-Markdown/#mermaid) ✅
- [Unison programming language](https://www.unison-lang.org/docs/usage-topics/documentation/)
### Browser Extensions
@@ -225,7 +222,7 @@ Communication tools and platforms
| Diagram Tab | - | - | - | - | [🐙🔗](https://github.com/khafast/diagramtab) |
| Markdown Diagrams | [🎡🔗](https://chrome.google.com/webstore/detail/markdown-diagrams/pmoglnmodacnbbofbgcagndelmgaclel/) | [🦊🔗](https://addons.mozilla.org/en-US/firefox/addon/markdown-diagrams/) | [🔴🔗](https://addons.opera.com/en/extensions/details/markdown-diagrams/) | [🌀🔗](https://microsoftedge.microsoft.com/addons/detail/markdown-diagrams/hceenoomhhdkjjijnmlclkpenkapfihe) | [🐙🔗](https://github.com/marcozaccari/markdown-diagrams-browser-extension/tree/master/doc/examples) |
| Markdown Viewer | - | [🦊🔗](https://addons.mozilla.org/en-US/firefox/addon/markdown-viewer-chrome/) | - | - | [🐙🔗](https://github.com/simov/markdown-viewer) |
| Extensions for Mermaid | - | [🦊🔗](https://addons.mozilla.org/en-US/firefox/addon/markdown-viewer-chrome/) | [🔴🔗](https://addons.opera.com/en/extensions/details/extensions-for-mermaid/) | - | [🐙🔗](https://github.com/Stefan-S/mermaid-extension) |
| Extensions for Mermaid | - | - | [🔴🔗](https://addons.opera.com/en/extensions/details/extensions-for-mermaid/) | - | [🐙🔗](https://github.com/Stefan-S/mermaid-extension) |
| Chrome Diagrammer | [🎡🔗](https://chrome.google.com/webstore/detail/chrome-diagrammer/bkpbgjmkomfoakfklcjeoegkklgjnnpk) | - | - | - | - |
| Mermaid Diagrams | [🎡🔗](https://chrome.google.com/webstore/detail/mermaid-diagrams/phfcghedmopjadpojhmmaffjmfiakfil) | - | - | - | - |
| Monkeys | [🎡🔗](https://chrome.google.com/webstore/detail/monkeys-mermaid-for-githu/cplfdpoajbclbgphaphphcldamfkjlgi) | - | - | - | - |
@@ -233,19 +230,23 @@ Communication tools and platforms
### Other
- [Bisheng](https://www.npmjs.com/package/bisheng)
- [bisheng-plugin-mermaid](https://github.com/yct21/bisheng-plugin-mermaid)
- [Codemia: A tool to practice system design problems](https://codemia.io) ✅
- [ExDoc](https://github.com/elixir-lang/ex_doc)
- [Rendering Mermaid graphs](https://github.com/elixir-lang/ex_doc#rendering-mermaid-graphs)
- [Jekyll](https://jekyllrb.com/)
- [jekyll-mermaid](https://rubygems.org/gems/jekyll-mermaid)
- [jekyll-mermaid-diagrams](https://github.com/fuzhibo/jekyll-mermaid-diagrams)
- [mermaid-isomorphic](https://github.com/remcohaszing/mermaid-isomorphic)
- [mermaid-server: Generate diagrams using a HTTP request](https://github.com/TomWright/mermaid-server)
- [NiceGUI: Let any browser be the frontend of your Python code](https://nicegui.io) ✅
- [ui.mermaid(...)](https://nicegui.io/documentation/mermaid)
- [Reveal.js](https://github.com/hakimel/reveal.js)
- [reveal.js-mermaid-plugin](https://github.com/ludwick/reveal.js-mermaid-plugin)
- [Bisheng](https://www.npmjs.com/package/bisheng)
- [bisheng-plugin-mermaid](https://github.com/yct21/bisheng-plugin-mermaid)
- [Reveal CK](https://github.com/jedcn/reveal-ck)
- [reveal-ck-mermaid-plugin](https://github.com/tmtm/reveal-ck-mermaid-plugin)
- [mermaid-isomorphic](https://github.com/remcohaszing/mermaid-isomorphic)
- [mermaid-server: Generate diagrams using a HTTP request](https://github.com/TomWright/mermaid-server)
- [ExDoc](https://github.com/elixir-lang/ex_doc)
- [Rendering Mermaid graphs](https://github.com/elixir-lang/ex_doc#rendering-mermaid-graphs)
- [NiceGUI: Let any browser be the frontend of your Python code](https://nicegui.io) ✅
- [ui.mermaid(...)](https://nicegui.io/documentation/section_text_elements#markdown_element)
- [ui.markdown(..., extras=\['mermaid'\])](https://nicegui.io/documentation/section_text_elements#mermaid_diagrams)

View File

@@ -576,6 +576,7 @@ export interface GitGraphDiagramConfig extends BaseDiagramConfig {
showCommitLabel?: boolean;
showBranches?: boolean;
rotateCommitLabel?: boolean;
parallelCommits?: boolean;
/**
* Controls whether or arrow markers in html code are absolute paths or anchors.
* This matters if you are using base tag settings.

View File

@@ -254,6 +254,16 @@ export const adjustClustersAndEdges = (graph, depth) => {
}
});
for (let id of Object.keys(clusterDb)) {
const nonClusterChild = clusterDb[id].id;
const parent = graph.parent(nonClusterChild);
// Change replacement node of id to parent of current replacement node if valid
if (parent !== id && clusterDb[parent] && !clusterDb[parent].externalConnections) {
clusterDb[id].id = parent;
}
}
// For clusters with incoming and/or outgoing edges translate those edges to a real node
// in the cluster in order to fake the edge
graph.edges().forEach(function (e) {
@@ -307,9 +317,13 @@ export const adjustClustersAndEdges = (graph, depth) => {
w = getAnchorId(e.w);
graph.removeEdge(e.v, e.w, e.name);
if (v !== e.v) {
const parent = graph.parent(v);
clusterDb[parent].externalConnections = true;
edge.fromCluster = e.v;
}
if (w !== e.w) {
const parent = graph.parent(w);
clusterDb[parent].externalConnections = true;
edge.toCluster = e.w;
}
log.warn('Fix Replacing with XXX', v, w, e.name);

View File

@@ -116,8 +116,8 @@ export const clear = function () {
commonClear();
};
export const getClass = function (id: string): ClassNode {
return classes[id];
export const getClass = function (className: string): ClassNode {
return classes[className];
};
export const getClasses = function (): ClassMap {
@@ -156,6 +156,7 @@ export const addRelation = function (relation: ClassRelation) {
* @public
*/
export const addAnnotation = function (className: string, annotation: string) {
addClass(className);
const validatedClassName = splitClassNameAndType(className).className;
classes[validatedClassName].annotations.push(annotation);
};
@@ -199,6 +200,8 @@ export const addMembers = function (className: string, members: string[]) {
};
export const addNote = function (text: string, className: string) {
addClass(className);
const note = {
id: `note${notes.length}`,
class: className,
@@ -217,17 +220,19 @@ export const cleanupLabel = function (label: string) {
/**
* Called by parser when assigning cssClass to a class
*
* @param ids - Comma separated list of ids
* @param className - Class to add
* @param classNames - Comma separated list of ids
* @param cssClass - Class to add
*/
export const setCssClass = function (ids: string, className: string) {
ids.split(',').forEach(function (_id) {
let id = _id;
if (_id[0].match(/\d/)) {
id = MERMAID_DOM_ID_PREFIX + id;
export const setCssClass = function (classNames: string, cssClass: string) {
classNames.split(',').forEach(function (_className) {
let className = _className;
addClass(className);
if (_className[0].match(/\d/)) {
className = MERMAID_DOM_ID_PREFIX + className;
}
if (classes[id] !== undefined) {
classes[id].cssClasses.push(className);
if (classes[className] !== undefined) {
classes[className].cssClasses.push(cssClass);
}
});
};
@@ -235,66 +240,73 @@ export const setCssClass = function (ids: string, className: string) {
/**
* Called by parser when a tooltip is found, e.g. a clickable element.
*
* @param ids - Comma separated list of ids
* @param classNames - Comma separated list of ids
* @param tooltip - Tooltip to add
*/
const setTooltip = function (ids: string, tooltip?: string) {
ids.split(',').forEach(function (id) {
const setTooltip = function (classNames: string, tooltip?: string) {
classNames.split(',').forEach(function (className) {
if (tooltip !== undefined) {
classes[id].tooltip = sanitizeText(tooltip);
addClass(className);
classes[className].tooltip = sanitizeText(tooltip);
}
});
};
export const getTooltip = function (id: string, namespace?: string) {
export const getTooltip = function (className: string, namespace?: string) {
if (namespace) {
return namespaces[namespace].classes[id].tooltip;
return namespaces[namespace].classes[className].tooltip;
}
return classes[id].tooltip;
return classes[className].tooltip;
};
/**
* Called by parser when a link is found. Adds the URL to the vertex data.
*
* @param ids - Comma separated list of ids
* @param classNames - Comma separated list of class ids
* @param linkStr - URL to create a link for
* @param target - Target of the link, _blank by default as originally defined in the svgDraw.js file
*/
export const setLink = function (ids: string, linkStr: string, target: string) {
export const setLink = function (classNames: string, linkStr: string, target: string) {
const config = getConfig();
ids.split(',').forEach(function (_id) {
let id = _id;
if (_id[0].match(/\d/)) {
id = MERMAID_DOM_ID_PREFIX + id;
classNames.split(',').forEach(function (_className) {
let className = _className;
if (_className[0].match(/\d/)) {
className = MERMAID_DOM_ID_PREFIX + className;
}
if (classes[id] !== undefined) {
classes[id].link = utils.formatUrl(linkStr, config);
addClass(className);
if (classes[className] !== undefined) {
classes[className].link = utils.formatUrl(linkStr, config);
if (config.securityLevel === 'sandbox') {
classes[id].linkTarget = '_top';
classes[className].linkTarget = '_top';
} else if (typeof target === 'string') {
classes[id].linkTarget = sanitizeText(target);
classes[className].linkTarget = sanitizeText(target);
} else {
classes[id].linkTarget = '_blank';
classes[className].linkTarget = '_blank';
}
}
});
setCssClass(ids, 'clickable');
setCssClass(classNames, 'clickable');
};
/**
* Called by parser when a click definition is found. Registers an event handler.
*
* @param ids - Comma separated list of ids
* @param classNames - Comma separated list of class ids
* @param functionName - Function to be called on click
* @param functionArgs - Function args the function should be called with
*/
export const setClickEvent = function (ids: string, functionName: string, functionArgs: string) {
ids.split(',').forEach(function (id) {
setClickFunc(id, functionName, functionArgs);
classes[id].haveCallback = true;
export const setClickEvent = function (
classNames: string,
functionName: string,
functionArgs: string
) {
classNames.split(',').forEach(function (className) {
addClass(className);
setClickFunc(className, functionName, functionArgs);
classes[className].haveCallback = true;
});
setCssClass(ids, 'clickable');
setCssClass(classNames, 'clickable');
};
const setClickFunc = function (_domId: string, functionName: string, functionArgs: string) {
@@ -308,6 +320,7 @@ const setClickFunc = function (_domId: string, functionName: string, functionArg
}
const id = domId;
addClass(id);
if (classes[id] !== undefined) {
const elemId = lookUpDomId(id);
let argList: string[] = [];
@@ -447,9 +460,8 @@ const getNamespaces = function (): NamespaceMap {
* @public
*/
export const addClassesToNamespace = function (id: string, classNames: string[]) {
if (namespaces[id] === undefined) {
return;
}
addNamespace(id);
for (const name of classNames) {
const { className } = splitClassNameAndType(name);
classes[className].parent = id;
@@ -458,6 +470,7 @@ export const addClassesToNamespace = function (id: string, classNames: string[])
};
export const setCssStyle = function (id: string, styles: string[]) {
addClass(id);
const thisClass = classes[id];
if (!styles || !thisClass) {
return;

View File

@@ -258,9 +258,30 @@ class C13["With Città foreign language"]
expect(classDb.getClass('C13').label).toBe('With Città foreign language');
});
it('should handle link if class not created first', function () {
const str = `classDiagram
link Class1 "/#anchor"`;
parser.parse(str);
const actual = parser.yy.getClass('Class1');
expect(actual.link).toBe('/#anchor');
});
it('should handle "note for" without pre-defining class', function () {
const str = `classDiagram
note for Class1 "test"`;
parser.parse(str);
const actual = parser.yy.getClass('Class1');
expect(classDb.getNotes()[0].text).toEqual(`test`);
});
it('should handle "note for"', function () {
const str = 'classDiagram\n' + 'Class11 <|.. Class12\n' + 'note for Class11 "test"\n';
parser.parse(str);
expect(classDb.getNotes()[0].text).toEqual(`test`);
});
it('should handle "note"', function () {
@@ -632,6 +653,16 @@ foo()
classDb.clear();
parser.yy = classDb;
});
it('should handle link if class not created first', function () {
const str = `classDiagram
link Class1 "/#anchor"`;
parser.parse(str);
const actual = parser.yy.getClass('Class1');
expect(actual.link).toBe('/#anchor');
});
it('should handle href link', function () {
spyOn(classDb, 'setLink');
const str = 'classDiagram\n' + 'class Class1 \n' + 'click Class1 href "google.com" ';
@@ -690,6 +721,15 @@ foo()
expect(classDb.setClickEvent).toHaveBeenCalledWith('Class1', 'functionCall');
});
it('should handle function call when class not created first', function () {
spyOn(classDb, 'setClickEvent');
const str = `classDiagram
click Class1 call functionCall()`;
parser.parse(str);
expect(classDb.setClickEvent).toHaveBeenCalledWith('Class1', 'functionCall');
});
it('should handle function call with tooltip', function () {
spyOn(classDb, 'setClickEvent');
spyOn(classDb, 'setTooltip');
@@ -744,6 +784,17 @@ foo()
parser.yy = classDb;
});
it('should handle annotation if class not created first', function () {
const str = 'classDiagram\n' + '<<interface>> Class1';
parser.parse(str);
const actual = parser.yy.getClass('Class1');
expect(actual.annotations.length).toBe(1);
expect(actual.members.length).toBe(0);
expect(actual.methods.length).toBe(0);
expect(actual.annotations[0]).toBe('interface');
});
it('should handle class annotations', function () {
const str = 'classDiagram\n' + 'class Class1\n' + '<<interface>> Class1';
parser.parse(str);

View File

@@ -64,6 +64,29 @@ const drawText = (txt) => {
return svgLabel;
};
/**
* Searches for the closest parent from the parents list passed as argument.
* The parents list comes from an individual commit. The closest parent is actually
* the one farther down the graph, since that means it is closer to its child.
*
* @param {string[]} parents
* @returns {string | undefined}
*/
const findClosestParent = (parents) => {
let closestParent = '';
let maxPosition = 0;
parents.forEach((parent) => {
const parentPosition = dir === 'TB' ? commitPos[parent].y : commitPos[parent].x;
if (parentPosition >= maxPosition) {
closestParent = parent;
maxPosition = parentPosition;
}
});
return closestParent || undefined;
};
/**
* Draws the commits with its symbol and labels. The function has two modes, one which only
* calculates the positions and one that does the actual drawing. This for a simple way getting the
@@ -87,11 +110,31 @@ const drawCommits = (svg, commits, modifyGraph) => {
const sortedKeys = keys.sort((a, b) => {
return commits[a].seq - commits[b].seq;
});
const isParallelCommits = gitGraphConfig.parallelCommits;
const layoutOffset = 10;
const commitStep = 40;
sortedKeys.forEach((key) => {
const commit = commits[key];
const y = dir === 'TB' ? pos + 10 : branchPos[commit.branch].pos;
const x = dir === 'TB' ? branchPos[commit.branch].pos : pos + 10;
if (isParallelCommits) {
if (commit.parents.length) {
const closestParent = findClosestParent(commit.parents);
pos =
dir === 'TB'
? commitPos[closestParent].y + commitStep
: commitPos[closestParent].x + commitStep;
} else {
pos = 0;
if (dir === 'TB') {
pos = 30;
}
}
}
const posWithOffset = pos + layoutOffset;
const y = dir === 'TB' ? posWithOffset : branchPos[commit.branch].pos;
const x = dir === 'TB' ? branchPos[commit.branch].pos : posWithOffset;
// Don't draw the commits now but calculate the positioning which is used by the branch lines etc.
if (modifyGraph) {
@@ -216,9 +259,9 @@ const drawCommits = (svg, commits, modifyGraph) => {
}
}
if (dir === 'TB') {
commitPos[commit.id] = { x: x, y: pos + 10 };
commitPos[commit.id] = { x: x, y: posWithOffset };
} else {
commitPos[commit.id] = { x: pos + 10, y: y };
commitPos[commit.id] = { x: posWithOffset, y: y };
}
// The first iteration over the commits are for positioning purposes, this
@@ -247,7 +290,7 @@ const drawCommits = (svg, commits, modifyGraph) => {
// Now we have the label, lets position the background
labelBkg
.attr('x', pos + 10 - bbox.width / 2 - py)
.attr('x', posWithOffset - bbox.width / 2 - py)
.attr('y', y + 13.5)
.attr('width', bbox.width + 2 * py)
.attr('height', bbox.height + 2 * py);
@@ -258,7 +301,7 @@ const drawCommits = (svg, commits, modifyGraph) => {
}
if (dir !== 'TB') {
text.attr('x', pos + 10 - bbox.width / 2);
text.attr('x', posWithOffset - bbox.width / 2);
}
if (gitGraphConfig.rotateCommitLabel) {
if (dir === 'TB') {
@@ -284,7 +327,7 @@ const drawCommits = (svg, commits, modifyGraph) => {
.attr('class', 'tag-label')
.text(commit.tag);
let tagBbox = tag.node().getBBox();
tag.attr('x', pos + 10 - tagBbox.width / 2);
tag.attr('x', posWithOffset - tagBbox.width / 2);
const h2 = tagBbox.height / 2;
const ly = y - 19.2;
@@ -293,10 +336,10 @@ const drawCommits = (svg, commits, modifyGraph) => {
`
${pos - tagBbox.width / 2 - px / 2},${ly + py}
${pos - tagBbox.width / 2 - px / 2},${ly - py}
${pos + 10 - tagBbox.width / 2 - px},${ly - h2 - py}
${pos + 10 + tagBbox.width / 2 + px},${ly - h2 - py}
${pos + 10 + tagBbox.width / 2 + px},${ly + h2 + py}
${pos + 10 - tagBbox.width / 2 - px},${ly + h2 + py}`
${posWithOffset - tagBbox.width / 2 - px},${ly - h2 - py}
${posWithOffset + tagBbox.width / 2 + px},${ly - h2 - py}
${posWithOffset + tagBbox.width / 2 + px},${ly + h2 + py}
${posWithOffset - tagBbox.width / 2 - px},${ly + h2 + py}`
);
hole
@@ -313,10 +356,10 @@ const drawCommits = (svg, commits, modifyGraph) => {
`
${x},${pos + py}
${x},${pos - py}
${x + 10},${pos - h2 - py}
${x + 10 + tagBbox.width + px},${pos - h2 - py}
${x + 10 + tagBbox.width + px},${pos + h2 + py}
${x + 10},${pos + h2 + py}`
${x + layoutOffset},${pos - h2 - py}
${x + layoutOffset + tagBbox.width + px},${pos - h2 - py}
${x + layoutOffset + tagBbox.width + px},${pos + h2 + py}
${x + layoutOffset},${pos + h2 + py}`
)
.attr('transform', 'translate(12,12) rotate(45, ' + x + ',' + pos + ')');
hole
@@ -330,7 +373,7 @@ const drawCommits = (svg, commits, modifyGraph) => {
}
}
}
pos += 50;
pos += commitStep + layoutOffset;
if (pos > maxPos) {
maxPos = pos;
}

View File

@@ -22,50 +22,49 @@ To add an integration to this list, see the [Integrations - create page](./integ
### Productivity tools
- [GitHub](https://github.com) ✅
- [Using code blocks](https://github.blog/2022-02-14-include-diagrams-markdown-files-mermaid/) ✅
- [GitHub action: Compile mermaid to image](https://github.com/neenjaw/compile-mermaid-markdown-action)
- [svg-generator](https://github.com/SimonKenyonShepard/mermaidjs-github-svg-generator)
- [GitHub Writer](https://github.com/ckeditor/github-writer)
- [GitLab](https://docs.gitlab.com/ee/user/markdown.html#diagrams-and-flowcharts) ✅
- [Gitea](https://gitea.io) ✅
- [Azure Devops](https://docs.microsoft.com/en-us/azure/devops/project/wiki/wiki-markdown-guidance?view=azure-devops#add-mermaid-diagrams-to-a-wiki-page) ✅
- [Tuleap](https://docs.tuleap.org/user-guide/writing-in-tuleap.html#graphs) ✅
- [Mermaid Flow Visual Editor](https://www.mermaidflow.app) ✅
- [Deepdwn](https://billiam.itch.io/deepdwn) ✅
- [Joplin](https://joplinapp.org) ✅
- [Slab](https://slab.com) ✅
- [Swimm](https://swimm.io) ✅
- [Notion](https://notion.so) ✅
- [Observable](https://observablehq.com/@observablehq/mermaid) ✅
- [Obsidian](https://help.obsidian.md/Editing+and+formatting/Advanced+formatting+syntax#Diagram) ✅
- [NotesHub](https://noteshub.app) ✅
- [GitBook](https://gitbook.com)
- [Mermaid Plugin](https://github.com/JozoVilcek/gitbook-plugin-mermaid)
- [Markdown with Mermaid CLI](https://github.com/miao1007/gitbook-plugin-mermaid-cli)
- [Mermaid plugin for GitBook](https://github.com/wwformat/gitbook-plugin-mermaid-pdf)
- [LiveBook](https://livebook.dev) ✅
- [Atlassian Products](https://www.atlassian.com)
- [Mermaid for Confluence](https://marketplace.atlassian.com/apps/1224722/mermaid-for-confluence?hosting=cloud&tab=overview)
- [Mermaid Integration for Confluence](https://marketplace.atlassian.com/apps/1222792/mermaid-integration-for-confluence?hosting=cloud&tab=overview)
- [Mermaid Diagrams for Confluence](https://marketplace.atlassian.com/apps/1226945/mermaid-diagrams-for-confluence?hosting=cloud&tab=overview)
- [Mermaid Macro for Confluence](https://marketplace.atlassian.com/apps/1231150/mermaid-macro-for-confluence?hosting=cloud&tab=overview)
- [EliteSoft Mermaid Charts and Diagrams](https://marketplace.atlassian.com/apps/1227286/elitesoft-mermaid-charts-and-diagrams?hosting=cloud&tab=overview)
- [Mermaid for Jira Cloud - Draw UML diagrams easily](https://marketplace.atlassian.com/apps/1223053/mermaid-for-jira-cloud-draw-uml-diagrams-easily?hosting=cloud&tab=overview)
- [Mermaid Charts & Diagrams for Confluence](https://marketplace.atlassian.com/apps/1222572/)
- [Mermaid Charts & Diagrams for Jira](https://marketplace.atlassian.com/apps/1224537/)
- [Mermaid Diagrams for Confluence](https://marketplace.atlassian.com/apps/1226945/mermaid-diagrams-for-confluence?hosting=cloud&tab=overview)
- [Mermaid Live Editor for Confluence Cloud](https://marketplace.atlassian.com/apps/1231571/mermaid-live-editor-for-confluence?hosting=cloud&tab=overview)
- [Mermaid Macro for Confluence](https://marketplace.atlassian.com/apps/1231150/mermaid-macro-for-confluence?hosting=cloud&tab=overview)
- [Mermaid Plugin for Confluence](https://marketplace.atlassian.com/apps/1214124/mermaid-plugin-for-confluence?hosting=server&tab=overview)
- [CloudScript.io Addon](https://marketplace.atlassian.com/apps/1219878/cloudscript-io-mermaid-addon?hosting=cloud&tab=overview)
- [EliteSoft Mermaid Charts and Diagrams](https://marketplace.atlassian.com/apps/1227286/elitesoft-mermaid-charts-and-diagrams?hosting=cloud&tab=overview)
- [Auto convert diagrams in Jira](https://github.com/coddingtonbear/jirafs-mermaid)
- [Mermaid Charts & Diagrams for Jira](https://marketplace.atlassian.com/apps/1224537/)
- [Mermaid for Jira Cloud - Draw UML diagrams easily](https://marketplace.atlassian.com/apps/1223053/mermaid-for-jira-cloud-draw-uml-diagrams-easily?hosting=cloud&tab=overview)
- [CloudScript.io Mermaid Addon](https://marketplace.atlassian.com/apps/1219878/cloudscript-io-mermaid-addon?hosting=cloud&tab=overview)
- [Azure Devops](https://learn.microsoft.com/en-us/azure/devops/project/wiki/markdown-guidance?view=azure-devops#add-mermaid-diagrams-to-a-wiki-page) ✅
- [Deepdwn](https://billiam.itch.io/deepdwn) ✅
- [GitBook](https://gitbook.com)
- [Mermaid Plugin](https://github.com/JozoVilcek/gitbook-plugin-mermaid)
- [Mermaid plugin for GitBook](https://github.com/wwformat/gitbook-plugin-mermaid-pdf)
- [Markdown with Mermaid CLI](https://github.com/miao1007/gitbook-plugin-mermaid-cli)
- [Gitea](https://gitea.io) ✅
- [GitHub](https://github.com) ✅
- [Using code blocks](https://github.blog/2022-02-14-include-diagrams-markdown-files-mermaid/) ✅
- [GitHub action: Compile mermaid to image](https://github.com/neenjaw/compile-mermaid-markdown-action)
- [GitHub Writer](https://github.com/ckeditor/github-writer)
- [SVG diagram generator](https://github.com/SimonKenyonShepard/mermaidjs-github-svg-generator)
- [GitLab](https://docs.gitlab.com/ee/user/markdown.html#diagrams-and-flowcharts) ✅
- [Mermaid Plugin for JetBrains IDEs](https://plugins.jetbrains.com/plugin/20146-mermaid)
- [Joplin](https://joplinapp.org) ✅
- [LiveBook](https://livebook.dev) ✅
- [Tuleap](https://docs.tuleap.org/user-guide/writing-in-tuleap.html#graphs) ✅
- [Mermaid Flow Visual Editor](https://www.mermaidflow.app) ✅
- [Mermerd](https://github.com/KarnerTh/mermerd)
- [Slab](https://slab.com) ✅
- [Swimm](https://docs.swimm.io/features/diagrams-and-charts/#mermaid--swimm--up-to-date-diagrams-) ✅
- [NotesHub](https://noteshub.app) ✅
- [Notion](https://notion.so) ✅
- [Observable](https://observablehq.com/@observablehq/mermaid) ✅
- [Obsidian](https://help.obsidian.md/Editing+and+formatting/Advanced+formatting+syntax#Diagram) ✅
- [Redmine](https://redmine.org)
- [Mermaid Macro](https://www.redmine.org/plugins/redmine_mermaid_macro)
- [Markdown for mermaid plugin](https://github.com/jamieh-mongolian/markdown-for-mermaid-plugin)
- [redmine-mermaid](https://github.com/styz/redmine_mermaid)
- [markdown-for-mermaid-plugin](https://github.com/jamieh-mongolian/markdown-for-mermaid-plugin)
- [Mermaid Plugin for JetBrains IDEs](https://plugins.jetbrains.com/plugin/20146-mermaid)
- [mermerd](https://github.com/KarnerTh/mermerd)
- Visual Studio Code [Polyglot Interactive Notebooks](https://github.com/dotnet/interactive#net-interactive)
- Codemia [a tool to practice system design problems](https://codemia.io)
### CRM/ERP
@@ -77,139 +76,137 @@ Customer Relationship Management/Enterprise Resource Planning
Blogging frameworks and platforms
- [WordPress](https://wordpress.org)
- [WordPress Markdown Editor](https://wordpress.org/plugins/wp-githuber-md)
- [WP-ReliableMD](https://wordpress.org/plugins/wp-reliablemd/)
- [Hexo](https://hexo.io)
- [hexo-filter-mermaid-diagrams](https://github.com/webappdevelp/hexo-filter-mermaid-diagrams)
- [hexo-tag-mermaid](https://github.com/JameChou/hexo-tag-mermaid)
- [hexo-mermaid-diagrams](https://github.com/mslxl/hexo-mermaid-diagrams)
- [Nextra](https://nextra.site/)
- [Mermaid](https://nextra.site/docs/guide/mermaid)
- [WordPress](https://wordpress.org)
- [WordPress Markdown Editor](https://wordpress.org/plugins/wp-githuber-md)
- [WP-ReliableMD](https://wordpress.org/plugins/wp-reliablemd/)
### CMS/ECM
Content Management Systems/Enterprise Content Management
- [Grav CMS](https://getgrav.org/)
- [Mermaid Diagrams Plugin](https://github.com/DanielFlaum/grav-plugin-mermaid-diagrams)
- [GitLab Markdown Adapter](https://github.com/Goutte/grav-plugin-gitlab-markdown-adapter)
- [VitePress](https://vitepress.vuejs.org/)
- [Plugin for Mermaid.js](https://emersonbottero.github.io/vitepress-plugin-mermaid/)
- [VuePress](https://vuepress.vuejs.org/)
- [Plugin for Mermaid.js](https://github.com/eFrane/vuepress-plugin-mermaidjs)
- [Grav CMS](https://getgrav.org/)
- [Mermaid Diagrams](https://github.com/DanielFlaum/grav-plugin-mermaid-diagrams)
- [GitLab Markdown Adapter](https://github.com/Goutte/grav-plugin-gitlab-markdown-adapter)
### Communication
Communication tools and platforms
- [Discourse](https://discourse.org)
- [Mermaid Plugin](https://github.com/pnewell/discourse-mermaid), [And](https://github.com/unfoldingWord-dev/discourse-mermaid)
- [Mermaid Plugin](https://github.com/pnewell/discourse-mermaid)
- [Mattermost](https://mattermost.com/)
- [Mermaid Plugin](https://github.com/SpikeTings/Mermaid)
- [NodeBB](https://nodebb.org)
- [Mermaid Parser Plugin](https://www.npmjs.com/package/nodebb-plugin-mermaid)
- [phpBB](https://phpbb.com)
- [phpbb-ext-mermaid](https://github.com/AlfredoRamos/phpbb-ext-mermaid)
- [NodeBB](https://nodebb.org)
- [Mermaid Plugin](https://www.npmjs.com/package/nodebb-plugin-mermaid)
- [Slack](https://slack.com)
- [Mermaid for Slack](https://github.com/JackuB/mermaid-for-slack)
- [Mermaid Preview](https://github.com/JackuB/mermaid-for-slack)
### Wikis
- [PmWiki](https://www.pmwiki.org)
- [MermaidJs Cookbook recipe](https://www.pmwiki.org/wiki/Cookbook/MermaidJs)
- [MediaWiki](https://www.mediawiki.org)
- [Mermaid Extension](https://www.mediawiki.org/wiki/Extension:Mermaid)
- [Flex Diagrams Extension](https://www.mediawiki.org/wiki/Extension:Flex_Diagrams)
- [Semantic Media Wiki](https://semantic-mediawiki.org)
- [Mermaid Plugin](https://github.com/SemanticMediaWiki/Mermaid)
- [DokuWiki](https://dokuwiki.org)
- [ComboStrap](https://combostrap.com/mermaid)
- [Mermaid Plugin](https://www.dokuwiki.org/plugin:mermaid)
- [Foswiki](https://foswiki.org)
- [Mermaid Plugin](https://foswiki.org/Extensions/MermaidPlugin)
- [DokuWiki](https://dokuwiki.org)
- [Mermaid Plugin](https://www.dokuwiki.org/plugin:mermaid)
- [ComboStrap](https://combostrap.com/mermaid)
- [MediaWiki](https://www.mediawiki.org)
- [Flex Diagrams Extension](https://www.mediawiki.org/wiki/Extension:Flex_Diagrams)
- [Mermaid Extension](https://www.mediawiki.org/wiki/Extension:Mermaid)
- [PmWiki](https://www.pmwiki.org)
- [MermaidJs Cookbook recipe](https://www.pmwiki.org/wiki/Cookbook/MermaidJs)
- [Semantic Media Wiki](https://semantic-mediawiki.org)
- [Mermaid Plugin](https://github.com/SemanticMediaWiki/Mermaid)
- [TiddlyWiki](https://tiddlywiki.com/)
- [mermaid-tw5: full js library](https://github.com/efurlanm/mermaid-tw5)
- [tw5-mermaid: wrapper for Mermaid Live](https://github.com/jasonmhoule/tw5-mermaid)
- [mermaid-tw5: wrapper for Mermaid Live](https://github.com/efurlanm/mermaid-tw5)
- [tw5-mermaid: plugin for managing Mermaid.js tiddlers](https://github.com/jasonmhoule/tw5-mermaid)
### Editor Plugins
- [VS Code](https://code.visualstudio.com/)
- [Markdown Preview Mermaid Support](https://marketplace.visualstudio.com/items?itemName=bierner.markdown-mermaid)
- [Mermaid Preview](https://marketplace.visualstudio.com/items?itemName=vstirbu.vscode-mermaid-preview)
- [Markdown Preview Enhanced](https://marketplace.visualstudio.com/items?itemName=shd101wyy.markdown-preview-enhanced)
- [Mermaid Markdown Syntax Highlighting](https://marketplace.visualstudio.com/items?itemName=bpruitt-goddard.mermaid-markdown-syntax-highlighting)
- [Mermaid Editor](https://marketplace.visualstudio.com/items?itemName=tomoyukim.vscode-mermaid-editor)
- [Mermaid Export](https://marketplace.visualstudio.com/items?itemName=Gruntfuggly.mermaid-export)
- [Markdown PDF](https://marketplace.visualstudio.com/items?itemName=yzane.markdown-pdf)
- [Preview](https://marketplace.visualstudio.com/items?itemName=searKing.preview-vscode)
- [Preview Sequence Diagrams](https://marketplace.visualstudio.com/items?itemName=arichika.previewseqdiag-vscode)
- Atom _(Atom has been [archived.](https://github.blog/2022-06-08-sunsetting-atom/))_
- [Markdown Preview Enhanced](https://github.com/shd101wyy/markdown-preview-enhanced)
- [Atom Mermaid](https://github.com/y-takey/atom-mermaid)
- [Language Mermaid Syntax Highlighter](https://github.com/ytisf/language-mermaid)
- [Astah](https://astah.net)
- [Export to Mermaid](https://github.com/Avens666/Astah_Jude_UML_export_to_Markdown-mermaid-Plantuml-)
- [Brackets](https://brackets.io/)
- [Mermaid Preview](https://github.com/AlanHohn/mermaid-preview)
- [CKEditor](https://github.com/ckeditor/ckeditor5)
- [CKEditor 5 Mermaid plugin](https://github.com/ckeditor/ckeditor5-mermaid)
- [Draw.io](https://draw.io)
- [Mermaid Plugin](https://github.com/nopeslide/drawio_mermaid_plugin)
- [GNU Emacs](https://www.gnu.org/software/emacs/)
- [Major mode for .mmd files](https://github.com/abrochard/mermaid-mode)
- [Org-Mode integration](https://github.com/arnm/ob-mermaid)
- [GNU Nano](https://www.nano-editor.org/)
- [Nano Mermaid](https://github.com/Yash-Singh1/nano-mermaid)
- [Google docs](https://docs.google.com/)
- [Mermaid plugin for google docs](https://workspace.google.com/marketplace/app/mermaid/636321283856)
- [Inkdrop](https://www.inkdrop.app)
- [Mermaid Plugin](https://github.com/inkdropapp/inkdrop-mermaid)
- [Light Table](http://lighttable.com/)
- [Mermaid Plugin](https://github.com/cldwalker/Mermaid)
- [Markdown-It](https://github.com/markdown-it/markdown-it)
- [Textual UML Parser](https://github.com/manastalukdar/markdown-it-textual-uml)
- [Mermaid Plugin](https://github.com/tylingsoft/markdown-it-mermaid)
- [md-it-mermaid](https://github.com/iamcco/md-it-mermaid)
- [markdown-it-mermaid-less](https://github.com/searKing/markdown-it-mermaid-less)
- Atom _(Atom has been [archived.](https://github.blog/2022-06-08-sunsetting-atom/))_
- [Markdown Preview Enhanced](https://github.com/shd101wyy/markdown-preview-enhanced)
- [Atom Mermaid](https://github.com/y-takey/atom-mermaid)
- [Language Mermaid Syntax Highlighter](https://github.com/ytisf/language-mermaid)
- [Podlite](https://github.com/zag/podlite-desktop)
- [=Diagram block](https://github.com/zag/podlite/tree/main/packages/podlite-diagrams)
- [Standard Notes](https://standardnotes.com/)
- [Mermaid Extension](https://github.com/nienow/sn-mermaid)
- [Sublime Text 3](https://sublimetext.com)
- [Mermaid Package](https://packagecontrol.io/packages/Mermaid)
- [Astah](https://astah.net)
- [Export to Mermaid](https://github.com/Avens666/Astah_Jude_UML_export_to_Markdown-mermaid-Plantuml-)
- [Light Table](http://lighttable.com/)
- [Mermaid Plugin](https://github.com/cldwalker/Mermaid)
- [Draw.io](https://draw.io) - [Plugin](https://github.com/nopeslide/drawio_mermaid_plugin)
- [Inkdrop](https://www.inkdrop.app) - [Plugin](https://github.com/inkdropapp/inkdrop-mermaid)
- [VS Code](https://code.visualstudio.com/)
- [Mermaid Editor](https://marketplace.visualstudio.com/items?itemName=tomoyukim.vscode-mermaid-editor)
- [Mermaid Export](https://marketplace.visualstudio.com/items?itemName=Gruntfuggly.mermaid-export)
- [Markdown PDF](https://marketplace.visualstudio.com/items?itemName=yzane.markdown-pdf)
- [Markdown Preview Mermaid Support](https://marketplace.visualstudio.com/items?itemName=bierner.markdown-mermaid)
- [Markdown Preview Enhanced](https://marketplace.visualstudio.com/items?itemName=shd101wyy.markdown-preview-enhanced)
- [Mermaid Preview](https://marketplace.visualstudio.com/items?itemName=vstirbu.vscode-mermaid-preview)
- [Preview](https://marketplace.visualstudio.com/items?itemName=searKing.preview-vscode)
- [Preview Sequence Diagrams](https://marketplace.visualstudio.com/items?itemName=arichika.previewseqdiag-vscode)
- [Mermaid Markdown Syntax Highlighting](https://marketplace.visualstudio.com/items?itemName=bpruitt-goddard.mermaid-markdown-syntax-highlighting)
- [Vim](https://www.vim.org)
- [Official Vim Syntax and ftplugin](https://github.com/craigmac/vim-mermaid)
- [Vim Diagram Syntax](https://github.com/zhaozg/vim-diagram)
- [GNU Emacs](https://www.gnu.org/software/emacs/)
- [Major mode for .mmd files](https://github.com/abrochard/mermaid-mode)
- [Org-Mode integration](https://github.com/arnm/ob-mermaid)
- [Brackets](https://brackets.io/)
- [Mermaid Preview](https://github.com/AlanHohn/mermaid-preview)
- [Iodide](https://github.com/iodide-project/iodide)
- [iodide-mermaid-plugin](https://github.com/iodide-project/iodide-mermaid-plugin)
- [Google docs](https://docs.google.com/)
- [Mermaid plugin for google docs](https://workspace.google.com/marketplace/app/mermaid/636321283856)
- [Podlite](https://github.com/zag/podlite-desktop)
- [Named block =Diagram](https://github.com/zag/podlite/tree/main/packages/podlite-diagrams)
- [GNU Nano](https://www.nano-editor.org/)
- [Nano Mermaid](https://github.com/Yash-Singh1/nano-mermaid)
- [CKEditor](https://github.com/ckeditor/ckeditor5)
- [CKEditor 5 Mermaid plugin](https://github.com/ckeditor/ckeditor5-mermaid)
- [Standard Notes](https://standardnotes.com/)
- [sn-mermaid](https://github.com/nienow/sn-mermaid)
- [Official Vim Syntax and ft plugin](https://github.com/craigmac/vim-mermaid)
### Document Generation
- [Codedoc](https://codedoc.cc/)
- [codedoc-mermaid-plugin](https://www.npmjs.com/package/codedoc-mermaid-plugin)
- [Docsy Hugo Theme](https://www.docsy.dev/docs/adding-content/lookandfeel/#diagrams-with-mermaid) ✅
- [Docusaurus](https://docusaurus.io/docs/markdown-features/diagrams) ✅
- [Unison programming language](https://www.unison-lang.org/docs/usage-topics/documentation/) ✅
- [Swimm - Up-to-date diagrams with Swimm, the knowledge management tool for code](https://docs.swimm.io/features/diagrams-and-charts/#mermaid--swimm--up-to-date-diagrams-)
- [Sphinx](https://www.sphinx-doc.org/en/master/)
- [sphinxcontrib-mermaid](https://github.com/mgaitan/sphinxcontrib-mermaid)
- [remark](https://remark.js.org/)
- [remark-mermaidjs](https://github.com/remcohaszing/remark-mermaidjs)
- [rehype](https://github.com/rehypejs/rehype)
- [rehype-mermaid](https://github.com/remcohaszing/rehype-mermaid)
- [Gatsby](https://www.gatsbyjs.com/)
- [gatsby-remark-mermaid](https://github.com/remcohaszing/gatsby-remark-mermaid)
- [JSDoc](https://jsdoc.app/)
- [jsdoc-mermaid](https://github.com/Jellyvision/jsdoc-mermaid)
- [mdBook](https://rust-lang.github.io/mdBook/index.html)
- [mdbook-mermaid](https://github.com/badboy/mdbook-mermaid)
- [MkDocs](https://www.mkdocs.org)
- [mkdocs-mermaid2-plugin](https://github.com/fralau/mkdocs-mermaid2-plugin)
- [mkdocs-material](https://github.com/squidfunk/mkdocs-material), check the [docs](https://squidfunk.github.io/mkdocs-material/reference/diagrams/)
- [Quarto](https://quarto.org/)
- [rehype](https://github.com/rehypejs/rehype)
- [rehype-mermaid](https://github.com/remcohaszing/rehype-mermaid)
- [remark](https://remark.js.org/)
- [remark-mermaidjs](https://github.com/remcohaszing/remark-mermaidjs)
- [Sphinx](https://www.sphinx-doc.org/en/master/)
- [sphinxcontrib-mermaid](https://github.com/mgaitan/sphinxcontrib-mermaid)
- [Type Doc](https://typedoc.org/)
- [typedoc-plugin-mermaid](https://www.npmjs.com/package/typedoc-plugin-mermaid)
- [Docsy Hugo Theme](https://www.docsy.dev/docs/adding-content/lookandfeel/#diagrams-with-mermaid) ✅
- [Codedoc](https://codedoc.cc/)
- [codedoc-mermaid-plugin](https://www.npmjs.com/package/codedoc-mermaid-plugin)
- [mdbook](https://rust-lang.github.io/mdBook/index.html)
- [mdbook-mermaid](https://github.com/badboy/mdbook-mermaid)
- [Quarto](https://quarto.org/)
- [Typora](https://typora.io/) ✅
- [See docs](https://support.typora.io/Draw-Diagrams-With-Markdown/#mermaid)
- [Typora](https://support.typora.io/Draw-Diagrams-With-Markdown/#mermaid) ✅
- [Unison programming language](https://www.unison-lang.org/docs/usage-topics/documentation/)
### Browser Extensions
@@ -220,7 +217,7 @@ Communication tools and platforms
| Diagram Tab | - | - | - | - | [🐙🔗](https://github.com/khafast/diagramtab) |
| Markdown Diagrams | [🎡🔗](https://chrome.google.com/webstore/detail/markdown-diagrams/pmoglnmodacnbbofbgcagndelmgaclel/) | [🦊🔗](https://addons.mozilla.org/en-US/firefox/addon/markdown-diagrams/) | [🔴🔗](https://addons.opera.com/en/extensions/details/markdown-diagrams/) | [🌀🔗](https://microsoftedge.microsoft.com/addons/detail/markdown-diagrams/hceenoomhhdkjjijnmlclkpenkapfihe) | [🐙🔗](https://github.com/marcozaccari/markdown-diagrams-browser-extension/tree/master/doc/examples) |
| Markdown Viewer | - | [🦊🔗](https://addons.mozilla.org/en-US/firefox/addon/markdown-viewer-chrome/) | - | - | [🐙🔗](https://github.com/simov/markdown-viewer) |
| Extensions for Mermaid | - | [🦊🔗](https://addons.mozilla.org/en-US/firefox/addon/markdown-viewer-chrome/) | [🔴🔗](https://addons.opera.com/en/extensions/details/extensions-for-mermaid/) | - | [🐙🔗](https://github.com/Stefan-S/mermaid-extension) |
| Extensions for Mermaid | - | - | [🔴🔗](https://addons.opera.com/en/extensions/details/extensions-for-mermaid/) | - | [🐙🔗](https://github.com/Stefan-S/mermaid-extension) |
| Chrome Diagrammer | [🎡🔗](https://chrome.google.com/webstore/detail/chrome-diagrammer/bkpbgjmkomfoakfklcjeoegkklgjnnpk) | - | - | - | - |
| Mermaid Diagrams | [🎡🔗](https://chrome.google.com/webstore/detail/mermaid-diagrams/phfcghedmopjadpojhmmaffjmfiakfil) | - | - | - | - |
| Monkeys | [🎡🔗](https://chrome.google.com/webstore/detail/monkeys-mermaid-for-githu/cplfdpoajbclbgphaphphcldamfkjlgi) | - | - | - | - |
@@ -228,19 +225,23 @@ Communication tools and platforms
### Other
- [Bisheng](https://www.npmjs.com/package/bisheng)
- [bisheng-plugin-mermaid](https://github.com/yct21/bisheng-plugin-mermaid)
- [Codemia: A tool to practice system design problems](https://codemia.io) ✅
- [ExDoc](https://github.com/elixir-lang/ex_doc)
- [Rendering Mermaid graphs](https://github.com/elixir-lang/ex_doc#rendering-mermaid-graphs)
- [Jekyll](https://jekyllrb.com/)
- [jekyll-mermaid](https://rubygems.org/gems/jekyll-mermaid)
- [jekyll-mermaid-diagrams](https://github.com/fuzhibo/jekyll-mermaid-diagrams)
- [mermaid-isomorphic](https://github.com/remcohaszing/mermaid-isomorphic)
- [mermaid-server: Generate diagrams using a HTTP request](https://github.com/TomWright/mermaid-server)
- [NiceGUI: Let any browser be the frontend of your Python code](https://nicegui.io) ✅
- [ui.mermaid(...)](https://nicegui.io/documentation/mermaid)
- [Reveal.js](https://github.com/hakimel/reveal.js)
- [reveal.js-mermaid-plugin](https://github.com/ludwick/reveal.js-mermaid-plugin)
- [Bisheng](https://www.npmjs.com/package/bisheng)
- [bisheng-plugin-mermaid](https://github.com/yct21/bisheng-plugin-mermaid)
- [Reveal CK](https://github.com/jedcn/reveal-ck)
- [reveal-ck-mermaid-plugin](https://github.com/tmtm/reveal-ck-mermaid-plugin)
- [mermaid-isomorphic](https://github.com/remcohaszing/mermaid-isomorphic)
- [mermaid-server: Generate diagrams using a HTTP request](https://github.com/TomWright/mermaid-server)
- [ExDoc](https://github.com/elixir-lang/ex_doc)
- [Rendering Mermaid graphs](https://github.com/elixir-lang/ex_doc#rendering-mermaid-graphs)
- [NiceGUI: Let any browser be the frontend of your Python code](https://nicegui.io) ✅
- [ui.mermaid(...)](https://nicegui.io/documentation/section_text_elements#markdown_element)
- [ui.markdown(..., extras=['mermaid'])](https://nicegui.io/documentation/section_text_elements#mermaid_diagrams)

View File

@@ -786,6 +786,9 @@ $defs: # JSON Schema definition (maybe we should move these to a separate file)
rotateCommitLabel:
type: boolean
default: true
parallelCommits:
type: boolean
default: false
# YAML anchor reference, don't use $ref since ajv doesn't load defaults
arrowMarkerAbsolute: *arrowMarkerAbsolute