diff --git a/.github/ISSUE_TEMPLATE/config.yml b/.github/ISSUE_TEMPLATE/config.yml index 7e0c78ff1..fa15f39e1 100644 --- a/.github/ISSUE_TEMPLATE/config.yml +++ b/.github/ISSUE_TEMPLATE/config.yml @@ -3,9 +3,9 @@ contact_links: - name: GitHub Discussions url: https://github.com/mermaid-js/mermaid/discussions about: Ask the Community questions or share your own graphs in our discussions. - - name: Slack - url: https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE - about: Join our Community on Slack for Help and a casual chat. + - name: Discord + url: https://discord.gg/wwtabKgp8y + about: Join our Community on Discord for Help and a casual chat. - name: Documentation url: https://mermaid.js.org about: Read our documentation for all that Mermaid.js can offer. diff --git a/.github/lychee.toml b/.github/lychee.toml index b13e53616..4af304a99 100644 --- a/.github/lychee.toml +++ b/.github/lychee.toml @@ -34,8 +34,8 @@ exclude = [ # Don't check files that are generated during the build via `pnpm docs:code` 'packages/mermaid/src/docs/config/setup/*', -# Ignore slack invite -"https://join.slack.com/" +# Ignore Discord invite +"https://discord.gg" ] # Exclude all private IPs from checking. diff --git a/.github/workflows/update-browserlist.yml b/.github/workflows/update-browserlist.yml index 0a83df795..f4fa2a982 100644 --- a/.github/workflows/update-browserlist.yml +++ b/.github/workflows/update-browserlist.yml @@ -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 diff --git a/README.md b/README.md index 5acafa95d..58287c634 100644 --- a/README.md +++ b/README.md @@ -15,7 +15,7 @@ Generate diagrams from markdown-like text. Live Editor!

- ๐Ÿ“– Documentation | ๐Ÿš€ Getting Started | ๐ŸŒ CDN | ๐Ÿ™Œ Join Us + ๐Ÿ“– Documentation | ๐Ÿš€ Getting Started | ๐ŸŒ CDN | ๐Ÿ™Œ Join Us

็ฎ€ไฝ“ไธญๆ–‡ @@ -33,7 +33,7 @@ Try Live Editor previews of future releases: diff --git a/README.zh-CN.md b/README.zh-CN.md index 23c9bc722..c468b2d9f 100644 --- a/README.zh-CN.md +++ b/README.zh-CN.md @@ -15,7 +15,7 @@ Mermaid ๅฎžๆ—ถ็ผ–่พ‘ๅ™จ!

- ๐Ÿ“– ๆ–‡ๆกฃ | ๐Ÿš€ ๅ…ฅ้—จ | ๐ŸŒ CDN | ๐Ÿ™Œ ๅŠ ๅ…ฅๆˆ‘ไปฌ + ๐Ÿ“– ๆ–‡ๆกฃ | ๐Ÿš€ ๅ…ฅ้—จ | ๐ŸŒ CDN | ๐Ÿ™Œ ๅŠ ๅ…ฅๆˆ‘ไปฌ

English @@ -34,7 +34,7 @@ Mermaid [![Coverage Status](https://codecov.io/github/mermaid-js/mermaid/branch/develop/graph/badge.svg)](https://app.codecov.io/github/mermaid-js/mermaid/tree/develop) [![CDN Status](https://img.shields.io/jsdelivr/npm/hm/mermaid)](https://www.jsdelivr.com/package/npm/mermaid) [![NPM Downloads](https://img.shields.io/npm/dm/mermaid)](https://www.npmjs.com/package/mermaid) -[![Join our Slack!](https://img.shields.io/static/v1?message=join%20chat&color=9cf&logo=slack&label=slack)](https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE) +[![Join our Discord!](https://img.shields.io/static/v1?message=join%20chat&color=9cf&logo=discord&label=discord)](https://discord.gg/wwtabKgp8y) [![Twitter Follow](https://img.shields.io/badge/Social-mermaidjs__-blue?style=social&logo=X)](https://twitter.com/mermaidjs_) diff --git a/cypress/integration/rendering/flowchart-v2.spec.js b/cypress/integration/rendering/flowchart-v2.spec.js index e23820ffa..857d395be 100644 --- a/cypress/integration/rendering/flowchart-v2.spec.js +++ b/cypress/integration/rendering/flowchart-v2.spec.js @@ -741,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', () => { diff --git a/cypress/integration/rendering/gitGraph.spec.js b/cypress/integration/rendering/gitGraph.spec.js index d3e4dd9dd..19ddde31d 100644 --- a/cypress/integration/rendering/gitGraph.spec.js +++ b/cypress/integration/rendering/gitGraph.spec.js @@ -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 } } + ); + }); }); diff --git a/docs/community/security.md b/docs/community/security.md index 07adbfbf8..e456adcd7 100644 --- a/docs/community/security.md +++ b/docs/community/security.md @@ -16,7 +16,7 @@ We aim to reply within three working days, probably much sooner. You should expect a close collaboration as we work to resolve the issue you have reported. Please reach out to again if you do not receive prompt attention and regular updates. -You may also reach out to the team via our public Slack chat channels; however, please make sure to e-mail when reporting an issue, and avoid revealing information about vulnerabilities in public as that could that could put users at risk. +You may also reach out to the team via our public Discord chat channels; however, please make sure to e-mail when reporting an issue, and avoid revealing information about vulnerabilities in public as that could that could put users at risk. ## Best practices diff --git a/docs/ecosystem/integrations-community.md b/docs/ecosystem/integrations-community.md index 956a1a966..6ad02f6b6 100644 --- a/docs/ecosystem/integrations-community.md +++ b/docs/ecosystem/integrations-community.md @@ -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) diff --git a/docs/ecosystem/integrations-create.md b/docs/ecosystem/integrations-create.md index 3dba1dafb..7643c8898 100644 --- a/docs/ecosystem/integrations-create.md +++ b/docs/ecosystem/integrations-create.md @@ -22,9 +22,9 @@ Currently pending [IANA](https://www.iana.org/) recognition. ## Showcase -### Mermaid Slack workspace +### Mermaid Discord workspace -We would love to see what you create with Mermaid. Please share your creations with us in our [Slack](https://join.slack.com/t/mermaid-talk/shared_invite/zt-22p2r8p9y-qiyP1H38GjFQ6S6jbBkOxQ) workspace [#community-showcase](https://mermaid-talk.slack.com/archives/C05NK37LT40) channel. +We would love to see what you create with Mermaid. Please share your creations with us in our [Discord](https://discord.gg/wwtabKgp8y) server [#showcase](https://discord.com/channels/1079455296289788015/1079502635054399649) channel. ### Add to Mermaid Ecosystem diff --git a/docs/intro/index.md b/docs/intro/index.md index ef51a0a3d..69b6897d7 100644 --- a/docs/intro/index.md +++ b/docs/intro/index.md @@ -22,7 +22,7 @@ It is a JavaScript based diagramming and charting tool that renders Markdown-ins [![Coverage Status](https://coveralls.io/repos/github/mermaid-js/mermaid/badge.svg?branch=master)](https://coveralls.io/github/mermaid-js/mermaid?branch=master) [![CDN Status](https://img.shields.io/jsdelivr/npm/hm/mermaid)](https://www.jsdelivr.com/package/npm/mermaid) [![NPM](https://img.shields.io/npm/dm/mermaid)](https://www.npmjs.com/package/mermaid) -[![Join our Slack!](https://img.shields.io/static/v1?message=join%20chat&color=9cf&logo=slack&label=slack)](https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE) +[![Join our Discord!](https://img.shields.io/static/v1?message=join%20chat&color=9cf&logo=discord&label=discord)](https://discord.gg/wwtabKgp8y) [![Twitter Follow](https://img.shields.io/twitter/follow/mermaidjs_?style=social)](https://twitter.com/mermaidjs_) diff --git a/docs/syntax/flowchart.md b/docs/syntax/flowchart.md index 23fa7c8e3..2f4a9aeb9 100644 --- a/docs/syntax/flowchart.md +++ b/docs/syntax/flowchart.md @@ -1134,7 +1134,19 @@ flowchart TD B-->E(A fa:fa-camera-retro perhaps?) ``` -Mermaid is compatible with Font Awesome up to version 5, Free icons only. Check that the icons you use are from the [supported set of icons](https://fontawesome.com/v5/search?o=r&m=free). +Mermaid supports Font Awesome if the CSS is included on the website. +Mermaid does not have any restriction on the version of Font Awesome that can be used. + +Please refer the [Official Font Awesome Documentation](https://fontawesome.com/start) on how to include it in your website. + +Adding this snippet in the `` would add support for Font Awesome v6.5.1 + +```html + +``` ## Graph declarations with spaces between vertices and link and without semicolon diff --git a/docs/syntax/gantt.md b/docs/syntax/gantt.md index 07fc897ec..22ff67dec 100644 --- a/docs/syntax/gantt.md +++ b/docs/syntax/gantt.md @@ -114,7 +114,30 @@ gantt Add another diagram to demo page :48h ``` -It is possible to set multiple dependencies separated by space: +Tasks are by default sequential. A task start date defaults to the end date of the preceding task. + +A colon, `:`, separates the task title from its metadata. +Metadata items are separated by a comma, `,`. Valid tags are `active`, `done`, `crit`, and `milestone`. Tags are optional, but if used, they must be specified first. +After processing the tags, the remaining metadata items are interpreted as follows: + +1. If a single item is specified, it determines when the task ends. It can either be a specific date/time or a duration. If a duration is specified, it is added to the start date of the task to determine the end date of the task, taking into account any exclusions. +2. If two items are specified, the last item is interpreted as in the previous case. The first item can either specify an explicit start date/time (in the format specified by `dateFormat`) or reference another task using `after [[otherTaskID2 [otherTaskID3]]...]`. In the latter case, the start date of the task will be set according to the latest end date of any referenced task. +3. If three items are specified, the last two will be interpreted as in the previous case. The first item will denote the ID of the task, which can be referenced using the `later ` syntax. + +| Metadata syntax | Start date | End date | ID | +| ------------------------------------------ | --------------------------------------------------- | ------------------------------------------- | -------- | +| `, , ` | `startdate` as interpreted using `dateformat` | `endDate` as interpreted using `dateformat` | `taskID` | +| `, , ` | `startdate` as interpreted using `dateformat` | Start date + `length` | `taskID` | +| `, after , ` | End date of previously specified task `otherTaskID` | `endDate` as interpreted using `dateformat` | `taskID` | +| `, after , ` | End date of previously specified task `otherTaskID` | Start date + `length` | `taskID` | +| `, ` | `startdate` as interpreted using `dateformat` | `enddate` as interpreted using `dateformat` | n/a | +| `, ` | `startdate` as interpreted using `dateformat` | Start date + `length` | n/a | +| `after , ` | End date of previously specified task `otherTaskID` | `enddate` as interpreted using `dateformat` | n/a | +| `after , ` | End date of previously specified task `otherTaskID` | Start date + `length` | n/a | +| `` | End date of preceding task | `enddate` as interpreted using `dateformat` | n/a | +| `` | End date of preceding task | Start date + `length` | n/a | + +For simplicity, the table does not show the use of multiple tasks listed with the `after` keyword. Here is an example of how to use it and how it's interpreted: ```mermaid-example gantt diff --git a/packages/mermaid/src/config.type.ts b/packages/mermaid/src/config.type.ts index 0d9381ec8..fc5f2ec5d 100644 --- a/packages/mermaid/src/config.type.ts +++ b/packages/mermaid/src/config.type.ts @@ -561,6 +561,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. diff --git a/packages/mermaid/src/dagre-wrapper/mermaid-graphlib.js b/packages/mermaid/src/dagre-wrapper/mermaid-graphlib.js index f42cc3463..81081e1b6 100644 --- a/packages/mermaid/src/dagre-wrapper/mermaid-graphlib.js +++ b/packages/mermaid/src/dagre-wrapper/mermaid-graphlib.js @@ -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); diff --git a/packages/mermaid/src/diagrams/git/gitGraphRenderer.js b/packages/mermaid/src/diagrams/git/gitGraphRenderer.js index 66e2277de..84b8f41a1 100644 --- a/packages/mermaid/src/diagrams/git/gitGraphRenderer.js +++ b/packages/mermaid/src/diagrams/git/gitGraphRenderer.js @@ -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; } diff --git a/packages/mermaid/src/docs/.vitepress/components/HomePage.vue b/packages/mermaid/src/docs/.vitepress/components/HomePage.vue index b6998f249..c493ee30a 100644 --- a/packages/mermaid/src/docs/.vitepress/components/HomePage.vue +++ b/packages/mermaid/src/docs/.vitepress/components/HomePage.vue @@ -16,11 +16,7 @@ import { teamMembers } from '../contributors';


- Join the community + Join the community and get involved!

diff --git a/packages/mermaid/src/docs/.vitepress/config.ts b/packages/mermaid/src/docs/.vitepress/config.ts index 612cec1a3..dfea8843f 100644 --- a/packages/mermaid/src/docs/.vitepress/config.ts +++ b/packages/mermaid/src/docs/.vitepress/config.ts @@ -55,8 +55,8 @@ export default defineConfig({ socialLinks: [ { icon: 'github', link: 'https://github.com/mermaid-js/mermaid' }, { - icon: 'slack', - link: 'https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE', + icon: 'discord', + link: 'https://discord.gg/wwtabKgp8y', }, { icon: { diff --git a/packages/mermaid/src/docs/community/security.md b/packages/mermaid/src/docs/community/security.md index e7a0db6ed..a84a106ab 100644 --- a/packages/mermaid/src/docs/community/security.md +++ b/packages/mermaid/src/docs/community/security.md @@ -10,7 +10,7 @@ We aim to reply within three working days, probably much sooner. You should expect a close collaboration as we work to resolve the issue you have reported. Please reach out to again if you do not receive prompt attention and regular updates. -You may also reach out to the team via our public Slack chat channels; however, please make sure to e-mail when reporting an issue, and avoid revealing information about vulnerabilities in public as that could that could put users at risk. +You may also reach out to the team via our public Discord chat channels; however, please make sure to e-mail when reporting an issue, and avoid revealing information about vulnerabilities in public as that could that could put users at risk. ## Best practices diff --git a/packages/mermaid/src/docs/ecosystem/integrations-community.md b/packages/mermaid/src/docs/ecosystem/integrations-community.md index 5ea6dce72..a567e6788 100644 --- a/packages/mermaid/src/docs/ecosystem/integrations-community.md +++ b/packages/mermaid/src/docs/ecosystem/integrations-community.md @@ -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) diff --git a/packages/mermaid/src/docs/ecosystem/integrations-create.md b/packages/mermaid/src/docs/ecosystem/integrations-create.md index b848a90aa..c36951128 100644 --- a/packages/mermaid/src/docs/ecosystem/integrations-create.md +++ b/packages/mermaid/src/docs/ecosystem/integrations-create.md @@ -16,9 +16,9 @@ Currently pending [IANA](https://www.iana.org/) recognition. ## Showcase -### Mermaid Slack workspace +### Mermaid Discord workspace -We would love to see what you create with Mermaid. Please share your creations with us in our [Slack](https://join.slack.com/t/mermaid-talk/shared_invite/zt-22p2r8p9y-qiyP1H38GjFQ6S6jbBkOxQ) workspace [#community-showcase](https://mermaid-talk.slack.com/archives/C05NK37LT40) channel. +We would love to see what you create with Mermaid. Please share your creations with us in our [Discord](https://discord.gg/wwtabKgp8y) server [#showcase](https://discord.com/channels/1079455296289788015/1079502635054399649) channel. ### Add to Mermaid Ecosystem diff --git a/packages/mermaid/src/docs/intro/index.md b/packages/mermaid/src/docs/intro/index.md index 2a7ef13ba..99568b066 100644 --- a/packages/mermaid/src/docs/intro/index.md +++ b/packages/mermaid/src/docs/intro/index.md @@ -16,7 +16,7 @@ It is a JavaScript based diagramming and charting tool that renders Markdown-ins [![Coverage Status](https://coveralls.io/repos/github/mermaid-js/mermaid/badge.svg?branch=master)](https://coveralls.io/github/mermaid-js/mermaid?branch=master) [![CDN Status](https://img.shields.io/jsdelivr/npm/hm/mermaid)](https://www.jsdelivr.com/package/npm/mermaid) [![NPM](https://img.shields.io/npm/dm/mermaid)](https://www.npmjs.com/package/mermaid) -[![Join our Slack!](https://img.shields.io/static/v1?message=join%20chat&color=9cf&logo=slack&label=slack)](https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE) +[![Join our Discord!](https://img.shields.io/static/v1?message=join%20chat&color=9cf&logo=discord&label=discord)](https://discord.gg/wwtabKgp8y) [![Twitter Follow](https://img.shields.io/twitter/follow/mermaidjs_?style=social)](https://twitter.com/mermaidjs_) diff --git a/packages/mermaid/src/docs/syntax/flowchart.md b/packages/mermaid/src/docs/syntax/flowchart.md index 65096309e..95cc962c7 100644 --- a/packages/mermaid/src/docs/syntax/flowchart.md +++ b/packages/mermaid/src/docs/syntax/flowchart.md @@ -775,7 +775,18 @@ flowchart TD B-->E(A fa:fa-camera-retro perhaps?) ``` -Mermaid is compatible with Font Awesome up to version 5, Free icons only. Check that the icons you use are from the [supported set of icons](https://fontawesome.com/v5/search?o=r&m=free). +Mermaid supports Font Awesome if the CSS is included on the website. +Mermaid does not have any restriction on the version of Font Awesome that can be used. + +Please refer the [Official Font Awesome Documentation](https://fontawesome.com/start) on how to include it in your website. + +Adding this snippet in the `` would add support for Font Awesome v6.5.1 +```html + +``` ## Graph declarations with spaces between vertices and link and without semicolon diff --git a/packages/mermaid/src/docs/syntax/gantt.md b/packages/mermaid/src/docs/syntax/gantt.md index 6940f882f..fb0546240 100644 --- a/packages/mermaid/src/docs/syntax/gantt.md +++ b/packages/mermaid/src/docs/syntax/gantt.md @@ -63,7 +63,30 @@ gantt Add another diagram to demo page :48h ``` -It is possible to set multiple dependencies separated by space: +Tasks are by default sequential. A task start date defaults to the end date of the preceding task. + +A colon, `:`, separates the task title from its metadata. +Metadata items are separated by a comma, `,`. Valid tags are `active`, `done`, `crit`, and `milestone`. Tags are optional, but if used, they must be specified first. +After processing the tags, the remaining metadata items are interpreted as follows: + +1. If a single item is specified, it determines when the task ends. It can either be a specific date/time or a duration. If a duration is specified, it is added to the start date of the task to determine the end date of the task, taking into account any exclusions. +2. If two items are specified, the last item is interpreted as in the previous case. The first item can either specify an explicit start date/time (in the format specified by `dateFormat`) or reference another task using `after [[otherTaskID2 [otherTaskID3]]...]`. In the latter case, the start date of the task will be set according to the latest end date of any referenced task. +3. If three items are specified, the last two will be interpreted as in the previous case. The first item will denote the ID of the task, which can be referenced using the `later ` syntax. + +| Metadata syntax | Start date | End date | ID | +| ------------------------------------------ | --------------------------------------------------- | ------------------------------------------- | -------- | +| `, , ` | `startdate` as interpreted using `dateformat` | `endDate` as interpreted using `dateformat` | `taskID` | +| `, , ` | `startdate` as interpreted using `dateformat` | Start date + `length` | `taskID` | +| `, after , ` | End date of previously specified task `otherTaskID` | `endDate` as interpreted using `dateformat` | `taskID` | +| `, after , ` | End date of previously specified task `otherTaskID` | Start date + `length` | `taskID` | +| `, ` | `startdate` as interpreted using `dateformat` | `enddate` as interpreted using `dateformat` | n/a | +| `, ` | `startdate` as interpreted using `dateformat` | Start date + `length` | n/a | +| `after , ` | End date of previously specified task `otherTaskID` | `enddate` as interpreted using `dateformat` | n/a | +| `after , ` | End date of previously specified task `otherTaskID` | Start date + `length` | n/a | +| `` | End date of preceding task | `enddate` as interpreted using `dateformat` | n/a | +| `` | End date of preceding task | Start date + `length` | n/a | + +For simplicity, the table does not show the use of multiple tasks listed with the `after` keyword. Here is an example of how to use it and how it's interpreted: ```mermaid-example gantt diff --git a/packages/mermaid/src/schemas/config.schema.yaml b/packages/mermaid/src/schemas/config.schema.yaml index 5a31c8401..fd88b3b5e 100644 --- a/packages/mermaid/src/schemas/config.schema.yaml +++ b/packages/mermaid/src/schemas/config.schema.yaml @@ -781,6 +781,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