diff --git a/.build/jsonSchema.ts b/.build/jsonSchema.ts
index d29ef7920..dd66d984c 100644
--- a/.build/jsonSchema.ts
+++ b/.build/jsonSchema.ts
@@ -24,6 +24,7 @@ const MERMAID_CONFIG_DIAGRAM_KEYS = [
'gitGraph',
'c4',
'sankey',
+ 'packet',
] as const;
/**
diff --git a/.esbuild/build.ts b/.esbuild/build.ts
index 3e829d719..3c87f9d62 100644
--- a/.esbuild/build.ts
+++ b/.esbuild/build.ts
@@ -1,8 +1,8 @@
import { build } from 'esbuild';
import { mkdir, writeFile } from 'node:fs/promises';
-import { MermaidBuildOptions, defaultOptions, getBuildConfig } from './util.js';
import { packageOptions } from '../.build/common.js';
import { generateLangium } from '../.build/generateLangium.js';
+import { MermaidBuildOptions, defaultOptions, getBuildConfig } from './util.js';
const shouldVisualize = process.argv.includes('--visualize');
@@ -56,7 +56,7 @@ const main = async () => {
await generateLangium();
await mkdir('stats').catch(() => {});
const packageNames = Object.keys(packageOptions) as (keyof typeof packageOptions)[];
- // it should build `parser` before `mermaid` because it's a dependecy
+ // it should build `parser` before `mermaid` because it's a dependency
for (const pkg of packageNames) {
await buildPackage(pkg).catch(handler);
}
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/e2e.yml b/.github/workflows/e2e.yml
index c23dc88ba..b8232b8c0 100644
--- a/.github/workflows/e2e.yml
+++ b/.github/workflows/e2e.yml
@@ -18,7 +18,7 @@ permissions:
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 }}
+ targetHash: ${{ github.event.pull_request.base.sha || github.event.merge_group.base_sha || (github.event.before == '0000000000000000000000000000000000000000' && 'develop' || github.event.before) }}
jobs:
cache:
@@ -30,7 +30,6 @@ jobs:
uses: actions/setup-node@v4
with:
node-version: 18.x
-
- name: Cache snapshots
id: cache-snapshot
uses: actions/cache@v4
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
[](https://app.codecov.io/github/mermaid-js/mermaid/tree/develop)
[](https://www.jsdelivr.com/package/npm/mermaid)
[](https://www.npmjs.com/package/mermaid)
-[](https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE)
+[](https://discord.gg/wwtabKgp8y)
[](https://twitter.com/mermaidjs_)
diff --git a/__mocks__/c4Renderer.js b/__mocks__/c4Renderer.js
deleted file mode 100644
index 576d5d863..000000000
--- a/__mocks__/c4Renderer.js
+++ /dev/null
@@ -1,21 +0,0 @@
-/**
- * Mocked C4Context diagram renderer
- */
-
-import { vi } from 'vitest';
-
-export const drawPersonOrSystemArray = vi.fn();
-export const drawBoundary = vi.fn();
-
-export const setConf = vi.fn();
-
-export const draw = vi.fn().mockImplementation(() => {
- return '';
-});
-
-export default {
- drawPersonOrSystemArray,
- drawBoundary,
- setConf,
- draw,
-};
diff --git a/__mocks__/classRenderer-v2.js b/__mocks__/classRenderer-v2.js
deleted file mode 100644
index 1ad95806f..000000000
--- a/__mocks__/classRenderer-v2.js
+++ /dev/null
@@ -1,16 +0,0 @@
-/**
- * Mocked class diagram v2 renderer
- */
-
-import { vi } from 'vitest';
-
-export const setConf = vi.fn();
-
-export const draw = vi.fn().mockImplementation(() => {
- return '';
-});
-
-export default {
- setConf,
- draw,
-};
diff --git a/__mocks__/classRenderer.js b/__mocks__/classRenderer.js
deleted file mode 100644
index 1c20de4b1..000000000
--- a/__mocks__/classRenderer.js
+++ /dev/null
@@ -1,13 +0,0 @@
-/**
- * Mocked class diagram renderer
- */
-
-import { vi } from 'vitest';
-
-export const draw = vi.fn().mockImplementation(() => {
- return '';
-});
-
-export default {
- draw,
-};
diff --git a/__mocks__/dagre-d3.ts b/__mocks__/dagre-d3.ts
deleted file mode 100644
index bf6d341dc..000000000
--- a/__mocks__/dagre-d3.ts
+++ /dev/null
@@ -1 +0,0 @@
-// DO NOT delete this file. It is used by vitest to mock the dagre-d3 module.
diff --git a/__mocks__/entity-decode/browser.ts b/__mocks__/entity-decode/browser.ts
deleted file mode 100644
index bd82d79fd..000000000
--- a/__mocks__/entity-decode/browser.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-module.exports = function (txt: string) {
- return txt;
-};
diff --git a/__mocks__/erRenderer.js b/__mocks__/erRenderer.js
deleted file mode 100644
index 845d641f7..000000000
--- a/__mocks__/erRenderer.js
+++ /dev/null
@@ -1,16 +0,0 @@
-/**
- * Mocked er diagram renderer
- */
-
-import { vi } from 'vitest';
-
-export const setConf = vi.fn();
-
-export const draw = vi.fn().mockImplementation(() => {
- return '';
-});
-
-export default {
- setConf,
- draw,
-};
diff --git a/__mocks__/flowRenderer-v2.js b/__mocks__/flowRenderer-v2.js
deleted file mode 100644
index 89cc86031..000000000
--- a/__mocks__/flowRenderer-v2.js
+++ /dev/null
@@ -1,24 +0,0 @@
-/**
- * Mocked flow (flowchart) diagram v2 renderer
- */
-
-import { vi } from 'vitest';
-
-export const setConf = vi.fn();
-export const addVertices = vi.fn();
-export const addEdges = vi.fn();
-export const getClasses = vi.fn().mockImplementation(() => {
- return {};
-});
-
-export const draw = vi.fn().mockImplementation(() => {
- return '';
-});
-
-export default {
- setConf,
- addVertices,
- addEdges,
- getClasses,
- draw,
-};
diff --git a/__mocks__/ganttRenderer.js b/__mocks__/ganttRenderer.js
deleted file mode 100644
index 957249832..000000000
--- a/__mocks__/ganttRenderer.js
+++ /dev/null
@@ -1,16 +0,0 @@
-/**
- * Mocked gantt diagram renderer
- */
-
-import { vi } from 'vitest';
-
-export const setConf = vi.fn();
-
-export const draw = vi.fn().mockImplementation(() => {
- return '';
-});
-
-export default {
- setConf,
- draw,
-};
diff --git a/__mocks__/gitGraphRenderer.js b/__mocks__/gitGraphRenderer.js
deleted file mode 100644
index 1daa82ca4..000000000
--- a/__mocks__/gitGraphRenderer.js
+++ /dev/null
@@ -1,13 +0,0 @@
-/**
- * Mocked git (graph) diagram renderer
- */
-
-import { vi } from 'vitest';
-
-export const draw = vi.fn().mockImplementation(() => {
- return '';
-});
-
-export default {
- draw,
-};
diff --git a/__mocks__/journeyRenderer.js b/__mocks__/journeyRenderer.js
deleted file mode 100644
index 2bc77c0b1..000000000
--- a/__mocks__/journeyRenderer.js
+++ /dev/null
@@ -1,15 +0,0 @@
-/**
- * Mocked pie (picChart) diagram renderer
- */
-
-import { vi } from 'vitest';
-export const setConf = vi.fn();
-
-export const draw = vi.fn().mockImplementation(() => {
- return '';
-});
-
-export default {
- setConf,
- draw,
-};
diff --git a/__mocks__/pieRenderer.ts b/__mocks__/pieRenderer.ts
deleted file mode 100644
index 439800f8c..000000000
--- a/__mocks__/pieRenderer.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-/**
- * Mocked pie (picChart) diagram renderer
- */
-import { vi } from 'vitest';
-
-const draw = vi.fn().mockImplementation(() => '');
-
-export const renderer = { draw };
diff --git a/__mocks__/requirementRenderer.js b/__mocks__/requirementRenderer.js
deleted file mode 100644
index 48d8997ac..000000000
--- a/__mocks__/requirementRenderer.js
+++ /dev/null
@@ -1,13 +0,0 @@
-/**
- * Mocked requirement diagram renderer
- */
-
-import { vi } from 'vitest';
-
-export const draw = vi.fn().mockImplementation(() => {
- return '';
-});
-
-export default {
- draw,
-};
diff --git a/__mocks__/sankeyRenderer.js b/__mocks__/sankeyRenderer.js
deleted file mode 100644
index 76324c93f..000000000
--- a/__mocks__/sankeyRenderer.js
+++ /dev/null
@@ -1,13 +0,0 @@
-/**
- * Mocked Sankey diagram renderer
- */
-
-import { vi } from 'vitest';
-
-export const draw = vi.fn().mockImplementation(() => {
- return '';
-});
-
-export default {
- draw,
-};
diff --git a/__mocks__/sequenceRenderer.js b/__mocks__/sequenceRenderer.js
deleted file mode 100644
index 11080c6bb..000000000
--- a/__mocks__/sequenceRenderer.js
+++ /dev/null
@@ -1,23 +0,0 @@
-/**
- * Mocked sequence diagram renderer
- */
-
-import { vi } from 'vitest';
-
-export const bounds = vi.fn();
-export const drawActors = vi.fn();
-export const drawActorsPopup = vi.fn();
-
-export const setConf = vi.fn();
-
-export const draw = vi.fn().mockImplementation(() => {
- return '';
-});
-
-export default {
- bounds,
- drawActors,
- drawActorsPopup,
- setConf,
- draw,
-};
diff --git a/__mocks__/stateRenderer-v2.js b/__mocks__/stateRenderer-v2.js
deleted file mode 100644
index a2d103b50..000000000
--- a/__mocks__/stateRenderer-v2.js
+++ /dev/null
@@ -1,22 +0,0 @@
-/**
- * Mocked state diagram v2 renderer
- */
-
-import { vi } from 'vitest';
-
-export const setConf = vi.fn();
-export const getClasses = vi.fn().mockImplementation(() => {
- return {};
-});
-export const stateDomId = vi.fn().mockImplementation(() => {
- return 'mocked-stateDiagram-stateDomId';
-});
-export const draw = vi.fn().mockImplementation(() => {
- return '';
-});
-
-export default {
- setConf,
- getClasses,
- draw,
-};
diff --git a/applitools.config.js b/applitools.config.js
deleted file mode 100644
index 4cf02220a..000000000
--- a/applitools.config.js
+++ /dev/null
@@ -1,19 +0,0 @@
-// eslint-disable-next-line @typescript-eslint/no-var-requires
-const { defineConfig } = require('cypress');
-
-module.exports = defineConfig({
- testConcurrency: 1,
- browser: [
- // Add browsers with different viewports
- // { width: 800, height: 600, name: 'chrome' },
- // { width: 700, height: 500, name: 'firefox' },
- // { width: 1600, height: 1200, name: 'ie11' },
- // { width: 1024, height: 768, name: 'edgechromium' },
- // { width: 800, height: 600, name: 'safari' },
- // // Add mobile emulation devices in Portrait mode
- // { deviceName: 'iPhone X', screenOrientation: 'portrait' },
- // { deviceName: 'Pixel 2', screenOrientation: 'portrait' },
- ],
- // set batch name to the configuration
- // batchName: `Mermaid ${process.env.APPLI_BRANCH ?? "'no APPLI_BRANCH set'"}`,
-});
diff --git a/cypress.config.cjs b/cypress.config.cjs
deleted file mode 100644
index 33633920a..000000000
--- a/cypress.config.cjs
+++ /dev/null
@@ -1,32 +0,0 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
-
-const { defineConfig } = require('cypress');
-const { addMatchImageSnapshotPlugin } = require('cypress-image-snapshot/plugin');
-const coverage = require('@cypress/code-coverage/task');
-
-module.exports = defineConfig({
- projectId: 'n2sma2',
- viewportWidth: 1440,
- viewportHeight: 1024,
- e2e: {
- specPattern: 'cypress/integration/**/*.{js,ts}',
- setupNodeEvents(on, config) {
- coverage(on, config);
- on('before:browser:launch', (browser = {}, launchOptions) => {
- if (browser.name === 'chrome' && browser.isHeadless) {
- launchOptions.args.push('--window-size=1440,1024', '--force-device-scale-factor=1');
- }
- return launchOptions;
- });
- addMatchImageSnapshotPlugin(on, config);
- // copy any needed variables from process.env to config.env
- config.env.useAppli = process.env.USE_APPLI ? true : false;
-
- // do not forget to return the changed config object!
- return config;
- },
- },
- video: false,
-});
-
-require('@applitools/eyes-cypress')(module);
diff --git a/cypress.config.ts b/cypress.config.ts
new file mode 100644
index 000000000..4182d92a8
--- /dev/null
+++ b/cypress.config.ts
@@ -0,0 +1,30 @@
+import { defineConfig } from 'cypress';
+import { addMatchImageSnapshotPlugin } from 'cypress-image-snapshot/plugin';
+import coverage from '@cypress/code-coverage/task';
+import eyesPlugin from '@applitools/eyes-cypress';
+export default eyesPlugin(
+ defineConfig({
+ projectId: 'n2sma2',
+ viewportWidth: 1440,
+ viewportHeight: 1024,
+ e2e: {
+ specPattern: 'cypress/integration/**/*.{js,ts}',
+ setupNodeEvents(on, config) {
+ coverage(on, config);
+ on('before:browser:launch', (browser, launchOptions) => {
+ if (browser.name === 'chrome' && browser.isHeadless) {
+ launchOptions.args.push('--window-size=1440,1024', '--force-device-scale-factor=1');
+ }
+ return launchOptions;
+ });
+ addMatchImageSnapshotPlugin(on, config);
+ // copy any needed variables from process.env to config.env
+ config.env.useAppli = process.env.USE_APPLI ? true : false;
+
+ // do not forget to return the changed config object!
+ return config;
+ },
+ },
+ video: false,
+ })
+);
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/cypress/integration/rendering/packet.spec.ts b/cypress/integration/rendering/packet.spec.ts
new file mode 100644
index 000000000..61555ea53
--- /dev/null
+++ b/cypress/integration/rendering/packet.spec.ts
@@ -0,0 +1,67 @@
+import { imgSnapshotTest } from '../../helpers/util';
+
+describe('packet structure', () => {
+ it('should render a simple packet diagram', () => {
+ imgSnapshotTest(
+ `packet-beta
+ title Hello world
+ 0-10: "hello"
+`
+ );
+ });
+
+ it('should render a complex packet diagram', () => {
+ imgSnapshotTest(
+ `packet-beta
+ 0-15: "Source Port"
+ 16-31: "Destination Port"
+ 32-63: "Sequence Number"
+ 64-95: "Acknowledgment Number"
+ 96-99: "Data Offset"
+ 100-105: "Reserved"
+ 106: "URG"
+ 107: "ACK"
+ 108: "PSH"
+ 109: "RST"
+ 110: "SYN"
+ 111: "FIN"
+ 112-127: "Window"
+ 128-143: "Checksum"
+ 144-159: "Urgent Pointer"
+ 160-191: "(Options and Padding)"
+ 192-223: "data"
+ `
+ );
+ });
+
+ it('should render a complex packet diagram with showBits false', () => {
+ imgSnapshotTest(
+ `
+ ---
+ title: "Packet Diagram"
+ config:
+ packet:
+ showBits: false
+ ---
+ packet-beta
+ 0-15: "Source Port"
+ 16-31: "Destination Port"
+ 32-63: "Sequence Number"
+ 64-95: "Acknowledgment Number"
+ 96-99: "Data Offset"
+ 100-105: "Reserved"
+ 106: "URG"
+ 107: "ACK"
+ 108: "PSH"
+ 109: "RST"
+ 110: "SYN"
+ 111: "FIN"
+ 112-127: "Window"
+ 128-143: "Checksum"
+ 144-159: "Urgent Pointer"
+ 160-191: "(Options and Padding)"
+ 192-223: "data"
+ `
+ );
+ });
+});
diff --git a/demos/dev/example.html b/demos/dev/example.html
index adb6da331..4ece7efa8 100644
--- a/demos/dev/example.html
+++ b/demos/dev/example.html
@@ -3,10 +3,24 @@
Mermaid development page
+
- info
-
graph TB
a --> b
@@ -15,22 +29,35 @@ graph TB
c --> d
-
+
+ Type code to view diagram:
+
+ info
diff --git a/demos/index.html b/demos/index.html
index c634aad2d..11fa14436 100644
--- a/demos/index.html
+++ b/demos/index.html
@@ -81,6 +81,9 @@
+
+
+
diff --git a/demos/packet.html b/demos/packet.html
new file mode 100644
index 000000000..f332dcf8c
--- /dev/null
+++ b/demos/packet.html
@@ -0,0 +1,141 @@
+
+
+
+
+
+ Mermaid Quick Test Page
+
+
+
+
+
+ Packet diagram demo
+
+
+
+ packet-beta
+ 0-15: "Source Port"
+ 16-31: "Destination Port"
+ 32-63: "Sequence Number"
+ 64-95: "Acknowledgment Number"
+ 96-99: "Data Offset"
+ 100-105: "Reserved"
+ 106: "URG"
+ 107: "ACK"
+ 108: "PSH"
+ 109: "RST"
+ 110: "SYN"
+ 111: "FIN"
+ 112-127: "Window"
+ 128-143: "Checksum"
+ 144-159: "Urgent Pointer"
+ 160-191: "(Options and Padding)"
+ 192-223: "data"
+
+
+
+ ---
+ config:
+ packet:
+ showBits: false
+ ---
+ packet-beta
+ 0-15: "Source Port"
+ 16-31: "Destination Port"
+ 32-63: "Sequence Number"
+ 64-95: "Acknowledgment Number"
+ 96-99: "Data Offset"
+ 100-105: "Reserved"
+ 106: "URG"
+ 107: "ACK"
+ 108: "PSH"
+ 109: "RST"
+ 110: "SYN"
+ 111: "FIN"
+ 112-127: "Window"
+ 128-143: "Checksum"
+ 144-159: "Urgent Pointer"
+ 160-191: "(Options and Padding)"
+ 192-223: "data"
+
+
+
+ ---
+ config:
+ theme: forest
+ ---
+ packet-beta
+ title Forest theme
+ 0-15: "Source Port"
+ 16-31: "Destination Port"
+ 32-63: "Sequence Number"
+ 64-95: "Acknowledgment Number"
+ 96-99: "Data Offset"
+ 100-105: "Reserved"
+ 106: "URG"
+ 107: "ACK"
+ 108: "PSH"
+ 109: "RST"
+ 110: "SYN"
+ 111: "FIN"
+ 112-127: "Window"
+ 128-143: "Checksum"
+ 144-159: "Urgent Pointer"
+ 160-191: "(Options and Padding)"
+ 192-223: "data"
+
+
+
+ ---
+ config:
+ theme: dark
+ ---
+ packet-beta
+ title Dark theme
+ 0-15: "Source Port"
+ 16-31: "Destination Port"
+ 32-63: "Sequence Number"
+ 64-95: "Acknowledgment Number"
+ 96-99: "Data Offset"
+ 100-105: "Reserved"
+ 106: "URG"
+ 107: "ACK"
+ 108: "PSH"
+ 109: "RST"
+ 110: "SYN"
+ 111: "FIN"
+ 112-127: "Window"
+ 128-143: "Checksum"
+ 144-159: "Urgent Pointer"
+ 160-191: "(Options and Padding)"
+ 192-223: "data"
+
+
- 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..c11af5904 100644
--- a/packages/mermaid/src/docs/.vitepress/config.ts
+++ b/packages/mermaid/src/docs/.vitepress/config.ts
@@ -1,6 +1,6 @@
+import { defineConfig, MarkdownOptions } from 'vitepress';
import { version } from '../../../package.json';
import MermaidExample from './mermaid-markdown-all.js';
-import { defineConfig, MarkdownOptions } from 'vitepress';
const allMarkdownTransformers: MarkdownOptions = {
// the shiki theme to highlight code blocks
@@ -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: {
@@ -146,13 +146,14 @@ function sidebarSyntax() {
{ text: 'Pie Chart', link: '/syntax/pie' },
{ text: 'Quadrant Chart', link: '/syntax/quadrantChart' },
{ text: 'Requirement Diagram', link: '/syntax/requirementDiagram' },
- { text: 'Gitgraph (Git) Diagram ๐ฅ', link: '/syntax/gitgraph' },
+ { text: 'Gitgraph (Git) Diagram', link: '/syntax/gitgraph' },
{ text: 'C4 Diagram ๐ฆบโ ๏ธ', link: '/syntax/c4' },
- { text: 'Mindmaps ๐ฅ', link: '/syntax/mindmap' },
- { text: 'Timeline ๐ฅ', link: '/syntax/timeline' },
- { text: 'Zenuml ๐ฅ', link: '/syntax/zenuml' },
+ { text: 'Mindmaps', link: '/syntax/mindmap' },
+ { text: 'Timeline', link: '/syntax/timeline' },
+ { text: 'Zenuml', link: '/syntax/zenuml' },
{ text: 'Sankey ๐ฅ', link: '/syntax/sankey' },
{ text: 'XYChart ๐ฅ', link: '/syntax/xyChart' },
+ { text: 'Packet ๐ฅ', link: '/syntax/packet' },
{ text: 'Other Examples', link: '/syntax/examples' },
],
},
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
[](https://coveralls.io/github/mermaid-js/mermaid?branch=master)
[](https://www.jsdelivr.com/package/npm/mermaid)
[](https://www.npmjs.com/package/mermaid)
-[](https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE)
+[](https://discord.gg/wwtabKgp8y)
[](https://twitter.com/mermaidjs_)
diff --git a/packages/mermaid/src/docs/syntax/flowchart.md b/packages/mermaid/src/docs/syntax/flowchart.md
index 65096309e..540f820f7 100644
--- a/packages/mermaid/src/docs/syntax/flowchart.md
+++ b/packages/mermaid/src/docs/syntax/flowchart.md
@@ -775,7 +775,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/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/docs/syntax/packet.md b/packages/mermaid/src/docs/syntax/packet.md
new file mode 100644
index 000000000..b509cf130
--- /dev/null
+++ b/packages/mermaid/src/docs/syntax/packet.md
@@ -0,0 +1,101 @@
+# Packet Diagram (v+)
+
+## Introduction
+
+A packet diagram is a visual representation used to illustrate the structure and contents of a network packet. Network packets are the fundamental units of data transferred over a network.
+
+## Usage
+
+This diagram type is particularly useful for network engineers, educators, and students who require a clear and concise way to represent the structure of network packets.
+
+## Syntax
+
+```md
+packet-beta
+start: "Block name" %% Single-bit block
+start-end: "Block name" %% Multi-bit blocks
+... More Fields ...
+```
+
+## Examples
+
+```mermaid-example
+---
+title: "TCP Packet"
+---
+packet-beta
+0-15: "Source Port"
+16-31: "Destination Port"
+32-63: "Sequence Number"
+64-95: "Acknowledgment Number"
+96-99: "Data Offset"
+100-105: "Reserved"
+106: "URG"
+107: "ACK"
+108: "PSH"
+109: "RST"
+110: "SYN"
+111: "FIN"
+112-127: "Window"
+128-143: "Checksum"
+144-159: "Urgent Pointer"
+160-191: "(Options and Padding)"
+192-255: "Data (variable length)"
+```
+
+```mermaid-example
+packet-beta
+title UDP Packet
+0-15: "Source Port"
+16-31: "Destination Port"
+32-47: "Length"
+48-63: "Checksum"
+64-95: "Data (variable length)"
+```
+
+## Details of Syntax
+
+- **Ranges**: Each line after the title represents a different field in the packet. The range (e.g., `0-15`) indicates the bit positions in the packet.
+- **Field Description**: A brief description of what the field represents, enclosed in quotes.
+
+## Configuration
+
+Please refer to the [configuration](/config/schema-docs/config-defs-packet-diagram-config.html) guide for details.
+
+
diff --git a/packages/mermaid/src/mermaidAPI.spec.ts b/packages/mermaid/src/mermaidAPI.spec.ts
index ff7cc4bfd..901e19ea1 100644
--- a/packages/mermaid/src/mermaidAPI.spec.ts
+++ b/packages/mermaid/src/mermaidAPI.spec.ts
@@ -1,4 +1,3 @@
-'use strict';
import { vi, it, expect, describe, beforeEach } from 'vitest';
// -------------------------------------
@@ -27,26 +26,26 @@ vi.mock('./diagrams/git/gitGraphRenderer.js');
vi.mock('./diagrams/gantt/ganttRenderer.js');
vi.mock('./diagrams/user-journey/journeyRenderer.js');
vi.mock('./diagrams/pie/pieRenderer.js');
+vi.mock('./diagrams/packet/renderer.js');
+vi.mock('./diagrams/xychart/xychartRenderer.js');
vi.mock('./diagrams/requirement/requirementRenderer.js');
vi.mock('./diagrams/sequence/sequenceRenderer.js');
vi.mock('./diagrams/state/stateRenderer-v2.js');
// -------------------------------------
-import mermaid from './mermaid.js';
+import assignWithDepth from './assignWithDepth.js';
import type { MermaidConfig } from './config.type.js';
-
-import mermaidAPI, { removeExistingElements } from './mermaidAPI.js';
-import {
- createCssStyles,
- createUserStyles,
+import mermaid from './mermaid.js';
+import mermaidAPI, {
appendDivSvgG,
cleanUpSvgCode,
+ createCssStyles,
+ createUserStyles,
putIntoIFrame,
+ removeExistingElements,
} from './mermaidAPI.js';
-import assignWithDepth from './assignWithDepth.js';
-
// --------------
// Mocks
// To mock a module, first define a mock for it, then (if used explicitly in the tests) import it. Be sure the path points to exactly the same file as is imported in mermaidAPI (the module being tested)
@@ -56,6 +55,7 @@ vi.mock('./styles.js', () => {
default: vi.fn().mockReturnValue(' .userStyle { font-weight:bold; }'),
};
});
+
import getStyles from './styles.js';
vi.mock('stylis', () => {
@@ -65,6 +65,7 @@ vi.mock('stylis', () => {
serialize: vi.fn().mockReturnValue('stylis serialized css'),
};
});
+
import { compile, serialize } from 'stylis';
import { decodeEntities, encodeEntities } from './utils.js';
import { Diagram } from './Diagram.js';
@@ -722,6 +723,8 @@ describe('mermaidAPI', () => {
{ textDiagramType: 'gantt', expectedType: 'gantt' },
{ textDiagramType: 'journey', expectedType: 'journey' },
{ textDiagramType: 'pie', expectedType: 'pie' },
+ { textDiagramType: 'packet-beta', expectedType: 'packet' },
+ { textDiagramType: 'xychart-beta', expectedType: 'xychart' },
{ textDiagramType: 'requirementDiagram', expectedType: 'requirement' },
{ textDiagramType: 'sequenceDiagram', expectedType: 'sequence' },
{ textDiagramType: 'stateDiagram-v2', expectedType: 'stateDiagram' },
diff --git a/packages/mermaid/src/schemas/config.schema.yaml b/packages/mermaid/src/schemas/config.schema.yaml
index 5a31c8401..bf8b90b83 100644
--- a/packages/mermaid/src/schemas/config.schema.yaml
+++ b/packages/mermaid/src/schemas/config.schema.yaml
@@ -50,6 +50,7 @@ required:
- gitGraph
- c4
- sankey
+ - packet
properties:
theme:
description: |
@@ -211,6 +212,8 @@ properties:
$ref: '#/$defs/C4DiagramConfig'
sankey:
$ref: '#/$defs/SankeyDiagramConfig'
+ packet:
+ $ref: '#/$defs/PacketDiagramConfig'
dompurifyConfig:
title: DOM Purify Configuration
description: Configuration options to pass to the `dompurify` library.
@@ -781,6 +784,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
@@ -2006,6 +2012,43 @@ $defs: # JSON Schema definition (maybe we should move these to a separate file)
type: string
default: ''
+ PacketDiagramConfig:
+ title: Packet Diagram Config
+ allOf: [{ $ref: '#/$defs/BaseDiagramConfig' }]
+ description: The object containing configurations specific for packet diagrams.
+ type: object
+ unevaluatedProperties: false
+ properties:
+ rowHeight:
+ description: The height of each row in the packet diagram.
+ type: number
+ minimum: 1
+ default: 32
+ bitWidth:
+ description: The width of each bit in the packet diagram.
+ type: number
+ minimum: 1
+ default: 32
+ bitsPerRow:
+ description: The number of bits to display per row.
+ type: number
+ minimum: 1
+ default: 32
+ showBits:
+ description: Toggle to display or hide bit numbers.
+ type: boolean
+ default: true
+ paddingX:
+ description: The horizontal padding between the blocks in a row.
+ type: number
+ minimum: 0
+ default: 5
+ paddingY:
+ description: The vertical padding between the rows.
+ type: number
+ minimum: 0
+ default: 5
+
FontCalculator:
title: Font Calculator
description: |
diff --git a/packages/mermaid/src/styles.spec.ts b/packages/mermaid/src/styles.spec.ts
index d22b0f2ee..a139ff526 100644
--- a/packages/mermaid/src/styles.spec.ts
+++ b/packages/mermaid/src/styles.spec.ts
@@ -27,6 +27,7 @@ import state from './diagrams/state/styles.js';
import journey from './diagrams/user-journey/styles.js';
import timeline from './diagrams/timeline/styles.js';
import mindmap from './diagrams/mindmap/styles.js';
+import packet from './diagrams/packet/styles.js';
import themes from './themes/index.js';
async function checkValidStylisCSSStyleSheet(stylisString: string) {
@@ -94,6 +95,7 @@ describe('styles', () => {
sequence,
state,
timeline,
+ packet,
})) {
test(`should return a valid style for diagram ${diagramId} and theme ${themeId}`, async () => {
const { default: getStyles, addStylesForDiagram } = await import('./styles.js');
diff --git a/packages/mermaid/src/themes/theme-dark.js b/packages/mermaid/src/themes/theme-dark.js
index c56625109..dc7a60009 100644
--- a/packages/mermaid/src/themes/theme-dark.js
+++ b/packages/mermaid/src/themes/theme-dark.js
@@ -1,4 +1,4 @@
-import { invert, lighten, darken, rgba, adjust, isDark } from 'khroma';
+import { adjust, darken, invert, isDark, lighten, rgba } from 'khroma';
import { mkBorder } from './theme-helpers.js';
class Theme {
@@ -268,6 +268,15 @@ class Theme {
'#3498db,#2ecc71,#e74c3c,#f1c40f,#bdc3c7,#ffffff,#34495e,#9b59b6,#1abc9c,#e67e22',
};
+ this.packet = {
+ startByteColor: this.primaryTextColor,
+ endByteColor: this.primaryTextColor,
+ labelColor: this.primaryTextColor,
+ titleColor: this.primaryTextColor,
+ blockStrokeColor: this.primaryTextColor,
+ blockFillColor: this.background,
+ };
+
/* class */
this.classText = this.primaryTextColor;
diff --git a/packages/mermaid/src/themes/theme-forest.js b/packages/mermaid/src/themes/theme-forest.js
index 0270f51ff..eda905c66 100644
--- a/packages/mermaid/src/themes/theme-forest.js
+++ b/packages/mermaid/src/themes/theme-forest.js
@@ -1,9 +1,9 @@
-import { darken, lighten, adjust, invert, isDark } from 'khroma';
-import { mkBorder } from './theme-helpers.js';
+import { adjust, darken, invert, isDark, lighten } from 'khroma';
import {
oldAttributeBackgroundColorEven,
oldAttributeBackgroundColorOdd,
} from './erDiagram-oldHardcodedValues.js';
+import { mkBorder } from './theme-helpers.js';
class Theme {
constructor() {
@@ -240,6 +240,15 @@ class Theme {
this.quadrantExternalBorderStrokeFill || this.primaryBorderColor;
this.quadrantTitleFill = this.quadrantTitleFill || this.primaryTextColor;
+ this.packet = {
+ startByteColor: this.primaryTextColor,
+ endByteColor: this.primaryTextColor,
+ labelColor: this.primaryTextColor,
+ titleColor: this.primaryTextColor,
+ blockStrokeColor: this.primaryTextColor,
+ blockFillColor: this.mainBkg,
+ };
+
/* xychart */
this.xyChart = {
backgroundColor: this.xyChart?.backgroundColor || this.background,
diff --git a/packages/mermaid/src/types.ts b/packages/mermaid/src/types.ts
index 13da88503..487e089dc 100644
--- a/packages/mermaid/src/types.ts
+++ b/packages/mermaid/src/types.ts
@@ -32,3 +32,5 @@ export interface EdgeData {
labelStyle: string;
curve: any;
}
+
+export type ArrayElement = A extends readonly (infer T)[] ? T : never;
diff --git a/packages/parser/langium-config.json b/packages/parser/langium-config.json
index 999df51b0..c750f049d 100644
--- a/packages/parser/langium-config.json
+++ b/packages/parser/langium-config.json
@@ -6,6 +6,11 @@
"grammar": "src/language/info/info.langium",
"fileExtensions": [".mmd", ".mermaid"]
},
+ {
+ "id": "packet",
+ "grammar": "src/language/packet/packet.langium",
+ "fileExtensions": [".mmd", ".mermaid"]
+ },
{
"id": "pie",
"grammar": "src/language/pie/pie.langium",
diff --git a/packages/parser/src/index.ts b/packages/parser/src/index.ts
index d966ef897..75f0cb3d8 100644
--- a/packages/parser/src/index.ts
+++ b/packages/parser/src/index.ts
@@ -1,2 +1,11 @@
+import type { AstNode } from 'langium';
+
export * from './language/index.js';
export * from './parse.js';
+
+/**
+ * Exclude/omit all `AstNode` attributes recursively.
+ */
+export type RecursiveAstOmit = T extends object
+ ? { [P in keyof T as Exclude]: RecursiveAstOmit }
+ : T;
diff --git a/packages/parser/src/language/index.ts b/packages/parser/src/language/index.ts
index 087bdb6b8..9f1d92ba8 100644
--- a/packages/parser/src/language/index.ts
+++ b/packages/parser/src/language/index.ts
@@ -1,19 +1,25 @@
export {
Info,
MermaidAstType,
+ Packet,
+ PacketBlock,
Pie,
PieSection,
isCommon,
isInfo,
+ isPacket,
+ isPacketBlock,
isPie,
isPieSection,
} from './generated/ast.js';
export {
InfoGeneratedModule,
MermaidGeneratedSharedModule,
+ PacketGeneratedModule,
PieGeneratedModule,
} from './generated/module.js';
export * from './common/index.js';
export * from './info/index.js';
+export * from './packet/index.js';
export * from './pie/index.js';
diff --git a/packages/parser/src/language/packet/index.ts b/packages/parser/src/language/packet/index.ts
new file mode 100644
index 000000000..fd3c604b0
--- /dev/null
+++ b/packages/parser/src/language/packet/index.ts
@@ -0,0 +1 @@
+export * from './module.js';
diff --git a/packages/parser/src/language/packet/module.ts b/packages/parser/src/language/packet/module.ts
new file mode 100644
index 000000000..460d5e535
--- /dev/null
+++ b/packages/parser/src/language/packet/module.ts
@@ -0,0 +1,68 @@
+import type {
+ DefaultSharedModuleContext,
+ LangiumServices,
+ LangiumSharedServices,
+ Module,
+ PartialLangiumServices,
+} from 'langium';
+import { EmptyFileSystem, createDefaultModule, createDefaultSharedModule, inject } from 'langium';
+import { CommonValueConverter } from '../common/valueConverter.js';
+import { MermaidGeneratedSharedModule, PacketGeneratedModule } from '../generated/module.js';
+import { PacketTokenBuilder } from './tokenBuilder.js';
+
+/**
+ * Declaration of `Packet` services.
+ */
+type PacketAddedServices = {
+ parser: {
+ TokenBuilder: PacketTokenBuilder;
+ ValueConverter: CommonValueConverter;
+ };
+};
+
+/**
+ * Union of Langium default services and `Packet` services.
+ */
+export type PacketServices = LangiumServices & PacketAddedServices;
+
+/**
+ * Dependency injection module that overrides Langium default services and
+ * contributes the declared `Packet` services.
+ */
+export const PacketModule: Module = {
+ parser: {
+ TokenBuilder: () => new PacketTokenBuilder(),
+ ValueConverter: () => new CommonValueConverter(),
+ },
+};
+
+/**
+ * Create the full set of services required by Langium.
+ *
+ * First inject the shared services by merging two modules:
+ * - Langium default shared services
+ * - Services generated by langium-cli
+ *
+ * Then inject the language-specific services by merging three modules:
+ * - Langium default language-specific services
+ * - Services generated by langium-cli
+ * - Services specified in this file
+ * @param context - Optional module context with the LSP connection
+ * @returns An object wrapping the shared services and the language-specific services
+ */
+export function createPacketServices(context: DefaultSharedModuleContext = EmptyFileSystem): {
+ shared: LangiumSharedServices;
+ Packet: PacketServices;
+} {
+ const shared: LangiumSharedServices = inject(
+ createDefaultSharedModule(context),
+ MermaidGeneratedSharedModule
+ );
+ const Packet: PacketServices = inject(
+ createDefaultModule({ shared }),
+ PacketGeneratedModule,
+ PacketModule
+ );
+ shared.ServiceRegistry.register(Packet);
+ return { shared, Packet };
+}
diff --git a/packages/parser/src/language/packet/packet.langium b/packages/parser/src/language/packet/packet.langium
new file mode 100644
index 000000000..ad30f8df2
--- /dev/null
+++ b/packages/parser/src/language/packet/packet.langium
@@ -0,0 +1,19 @@
+grammar Packet
+import "../common/common";
+
+entry Packet:
+ NEWLINE*
+ "packet-beta"
+ (
+ NEWLINE* TitleAndAccessibilities blocks+=PacketBlock*
+ | NEWLINE+ blocks+=PacketBlock+
+ | NEWLINE*
+ )
+;
+
+PacketBlock:
+ start=INT('-' end=INT)? ':' label=STRING EOL
+;
+
+terminal INT returns number: /0|[1-9][0-9]*/;
+terminal STRING: /"[^"]*"|'[^']*'/;
diff --git a/packages/parser/src/language/packet/tokenBuilder.ts b/packages/parser/src/language/packet/tokenBuilder.ts
new file mode 100644
index 000000000..accba5675
--- /dev/null
+++ b/packages/parser/src/language/packet/tokenBuilder.ts
@@ -0,0 +1,7 @@
+import { AbstractMermaidTokenBuilder } from '../common/index.js';
+
+export class PacketTokenBuilder extends AbstractMermaidTokenBuilder {
+ public constructor() {
+ super(['packet-beta']);
+ }
+}
diff --git a/packages/parser/src/parse.ts b/packages/parser/src/parse.ts
index aeec983da..8b644de27 100644
--- a/packages/parser/src/parse.ts
+++ b/packages/parser/src/parse.ts
@@ -1,9 +1,9 @@
import type { LangiumParser, ParseResult } from 'langium';
-import type { Info, Pie } from './index.js';
-import { createInfoServices, createPieServices } from './language/index.js';
+import type { Info, Packet, Pie } from './index.js';
+import { createInfoServices, createPacketServices, createPieServices } from './language/index.js';
-export type DiagramAST = Info | Pie;
+export type DiagramAST = Info | Packet | Pie;
const parsers: Record = {};
const initializers = {
@@ -12,12 +12,16 @@ const initializers = {
// const { createInfoServices } = await import('./language/info/index.js');
parsers['info'] = createInfoServices().Info.parser.LangiumParser;
},
+ packet: () => {
+ parsers['packet'] = createPacketServices().Packet.parser.LangiumParser;
+ },
pie: () => {
parsers['pie'] = createPieServices().Pie.parser.LangiumParser;
},
} as const;
export function parse(diagramType: 'info', text: string): Info;
+export function parse(diagramType: 'packet', text: string): Packet;
export function parse(diagramType: 'pie', text: string): Pie;
export function parse(
diagramType: keyof typeof initializers,
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 9538d0d30..b45cde2de 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -9,7 +9,7 @@ importers:
.:
devDependencies:
'@applitools/eyes-cypress':
- specifier: ^3.33.1
+ specifier: ^3.40.6
version: 3.40.6(typescript@5.3.3)
'@commitlint/cli':
specifier: ^17.6.1
@@ -21,7 +21,7 @@ importers:
specifier: ^6.31.1
version: 6.31.3
'@cypress/code-coverage':
- specifier: ^3.10.7
+ specifier: ^3.12.18
version: 3.12.19(@babel/core@7.23.7)(@babel/preset-env@7.23.8)(babel-loader@9.1.3)(cypress@12.17.4)(webpack@5.90.0)
'@rollup/plugin-typescript':
specifier: ^11.1.1
@@ -84,7 +84,7 @@ importers:
specifier: ^2.8.5
version: 2.8.5
cypress:
- specifier: ^12.10.0
+ specifier: ^12.17.4
version: 12.17.4
cypress-image-snapshot:
specifier: ^4.0.1
@@ -782,7 +782,7 @@ packages:
'@types/ws': 8.5.5
abort-controller: 3.0.0
chalk: 4.1.2
- node-fetch: 2.6.7(encoding@0.1.13)
+ node-fetch: 2.6.7
semver: 7.5.4
webdriver: 7.31.1(typescript@5.3.3)
ws: 8.13.0
@@ -879,7 +879,7 @@ packages:
find-process: 1.4.7
ini: 3.0.1
node-cleanup: 2.1.2
- node-fetch: 2.6.7(encoding@0.1.13)
+ node-fetch: 2.7.0(encoding@0.1.13)
p-retry: 4.6.2
teen_process: 1.16.0
transitivePeerDependencies:
@@ -7264,7 +7264,7 @@ packages:
engines: {node: '>=14'}
dependencies:
'@cspell/cspell-service-bus': 6.31.3
- node-fetch: 2.7.0
+ node-fetch: 2.7.0(encoding@0.1.13)
transitivePeerDependencies:
- encoding
dev: true
@@ -12203,7 +12203,7 @@ packages:
resolution: {integrity: sha512-bW9T/uJDPAJB2YNYEpWzE54U5O3MQidXsOyTfnbKYtTtFexRvGzb1waphBN4ZwP6EcIvYYEOwW0b72BpAqydTw==}
dev: true
- /node-fetch@2.6.7(encoding@0.1.13):
+ /node-fetch@2.6.7:
resolution: {integrity: sha512-ZjMPFEfVx5j+y2yF35Kzx5sF7kDzxuDj6ziH4FFbOp87zKDZNx8yExJIb05OGF4Nlt9IHFIMBkRl41VdvcNdbQ==}
engines: {node: 4.x || >=6.0.0}
peerDependencies:
@@ -12212,11 +12212,10 @@ packages:
encoding:
optional: true
dependencies:
- encoding: 0.1.13
whatwg-url: 5.0.0
dev: true
- /node-fetch@2.7.0:
+ /node-fetch@2.7.0(encoding@0.1.13):
resolution: {integrity: sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A==}
engines: {node: 4.x || >=6.0.0}
peerDependencies:
@@ -12225,6 +12224,7 @@ packages:
encoding:
optional: true
dependencies:
+ encoding: 0.1.13
whatwg-url: 5.0.0
dev: true
](https://app.codecov.io/github/mermaid-js/mermaid/tree/develop)
[](https://www.jsdelivr.com/package/npm/mermaid)
[](https://www.npmjs.com/package/mermaid)
-[](https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE)
+[](https://discord.gg/wwtabKgp8y)
[](https://twitter.com/mermaidjs_)
<img src=){kind=link}