mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-01-14 06:43:25 +08:00
Merge branch next into add-pie-langium-parser
This commit is contained in:
Reda Al Sulais
commit
55be75c974
@ -24,6 +24,7 @@ const MERMAID_CONFIG_DIAGRAM_KEYS = [
|
||||
'gitGraph',
|
||||
'c4',
|
||||
'sankey',
|
||||
'packet',
|
||||
] as const;
|
||||
|
||||
/**
|
||||
|
||||
@ -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);
|
||||
}
|
||||
|
||||
6
.github/ISSUE_TEMPLATE/config.yml
vendored
6
.github/ISSUE_TEMPLATE/config.yml
vendored
@ -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.
|
||||
|
||||
4
.github/lychee.toml
vendored
4
.github/lychee.toml
vendored
@ -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.
|
||||
|
||||
3
.github/workflows/e2e.yml
vendored
3
.github/workflows/e2e.yml
vendored
@ -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
|
||||
|
||||
9
.github/workflows/update-browserlist.yml
vendored
9
.github/workflows/update-browserlist.yml
vendored
@ -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
|
||||
|
||||
@ -15,7 +15,7 @@ Generate diagrams from markdown-like text.
|
||||
<a href="https://mermaid.live/"><b>Live Editor!</b></a>
|
||||
</p>
|
||||
<p align="center">
|
||||
<a href="https://mermaid.js.org">📖 Documentation</a> | <a href="https://mermaid.js.org/intro/">🚀 Getting Started</a> | <a href="https://www.jsdelivr.com/package/npm/mermaid">🌐 CDN</a> | <a href="https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE" title="Slack invite">🙌 Join Us</a>
|
||||
<a href="https://mermaid.js.org">📖 Documentation</a> | <a href="https://mermaid.js.org/intro/">🚀 Getting Started</a> | <a href="https://www.jsdelivr.com/package/npm/mermaid">🌐 CDN</a> | <a href="https://discord.gg/wwtabKgp8y" title="Discord invite">🙌 Join Us</a>
|
||||
</p>
|
||||
<p align="center">
|
||||
<a href="./README.zh-CN.md">简体中文</a>
|
||||
@ -33,7 +33,7 @@ Try Live Editor previews of future releases: <a href="https://develop.git.mermai
|
||||
[](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="./img/header.png" alt="" />
|
||||
|
||||
@ -15,7 +15,7 @@ Mermaid
|
||||
<a href="https://mermaid.live/"><b>实时编辑器!</b></a>
|
||||
</p>
|
||||
<p align="center">
|
||||
<a href="https://mermaid.js.org">📖 文档</a> | <a href="https://mermaid.js.org/intro/">🚀 入门</a> | <a href="https://www.jsdelivr.com/package/npm/mermaid">🌐 CDN</a> | <a href="https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE" title="Slack invite">🙌 加入我们</a>
|
||||
<a href="https://mermaid.js.org">📖 文档</a> | <a href="https://mermaid.js.org/intro/">🚀 入门</a> | <a href="https://www.jsdelivr.com/package/npm/mermaid">🌐 CDN</a> | <a href="https://discord.gg/wwtabKgp8y" title="Discord invite">🙌 加入我们</a>
|
||||
</p>
|
||||
<p align="center">
|
||||
<a href="./README.md">English</a>
|
||||
@ -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_)
|
||||
|
||||
<img src="./img/header.png" alt="" />
|
||||
|
||||
@ -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,
|
||||
};
|
||||
@ -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,
|
||||
};
|
||||
@ -1,13 +0,0 @@
|
||||
/**
|
||||
* Mocked class diagram renderer
|
||||
*/
|
||||
|
||||
import { vi } from 'vitest';
|
||||
|
||||
export const draw = vi.fn().mockImplementation(() => {
|
||||
return '';
|
||||
});
|
||||
|
||||
export default {
|
||||
draw,
|
||||
};
|
||||
@ -1 +0,0 @@
|
||||
// DO NOT delete this file. It is used by vitest to mock the dagre-d3 module.
|
||||
@ -1,3 +0,0 @@
|
||||
module.exports = function (txt: string) {
|
||||
return txt;
|
||||
};
|
||||
@ -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,
|
||||
};
|
||||
@ -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,
|
||||
};
|
||||
@ -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,
|
||||
};
|
||||
@ -1,13 +0,0 @@
|
||||
/**
|
||||
* Mocked git (graph) diagram renderer
|
||||
*/
|
||||
|
||||
import { vi } from 'vitest';
|
||||
|
||||
export const draw = vi.fn().mockImplementation(() => {
|
||||
return '';
|
||||
});
|
||||
|
||||
export default {
|
||||
draw,
|
||||
};
|
||||
@ -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,
|
||||
};
|
||||
@ -1,8 +0,0 @@
|
||||
/**
|
||||
* Mocked pie (picChart) diagram renderer
|
||||
*/
|
||||
import { vi } from 'vitest';
|
||||
|
||||
const draw = vi.fn().mockImplementation(() => '');
|
||||
|
||||
export const renderer = { draw };
|
||||
@ -1,13 +0,0 @@
|
||||
/**
|
||||
* Mocked requirement diagram renderer
|
||||
*/
|
||||
|
||||
import { vi } from 'vitest';
|
||||
|
||||
export const draw = vi.fn().mockImplementation(() => {
|
||||
return '';
|
||||
});
|
||||
|
||||
export default {
|
||||
draw,
|
||||
};
|
||||
@ -1,13 +0,0 @@
|
||||
/**
|
||||
* Mocked Sankey diagram renderer
|
||||
*/
|
||||
|
||||
import { vi } from 'vitest';
|
||||
|
||||
export const draw = vi.fn().mockImplementation(() => {
|
||||
return '';
|
||||
});
|
||||
|
||||
export default {
|
||||
draw,
|
||||
};
|
||||
@ -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,
|
||||
};
|
||||
@ -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,
|
||||
};
|
||||
@ -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'"}`,
|
||||
});
|
||||
@ -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);
|
||||
30
cypress.config.ts
Normal file
30
cypress.config.ts
Normal file
@ -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,
|
||||
})
|
||||
);
|
||||
@ -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', () => {
|
||||
|
||||
@ -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 } }
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
67
cypress/integration/rendering/packet.spec.ts
Normal file
67
cypress/integration/rendering/packet.spec.ts
Normal file
@ -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"
|
||||
`
|
||||
);
|
||||
});
|
||||
});
|
||||
@ -3,10 +3,24 @@
|
||||
<html>
|
||||
<head>
|
||||
<title>Mermaid development page</title>
|
||||
<style>
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
#code {
|
||||
max-width: 30vw;
|
||||
width: 30vw;
|
||||
}
|
||||
|
||||
#dynamicDiagram {
|
||||
padding-left: 2em;
|
||||
flex: 1;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<pre class="mermaid">info</pre>
|
||||
|
||||
<pre id="diagram" class="mermaid">
|
||||
graph TB
|
||||
a --> b
|
||||
@ -15,22 +29,35 @@ graph TB
|
||||
c --> d
|
||||
</pre>
|
||||
|
||||
<div id="dynamicDiagram"></div>
|
||||
<hr />
|
||||
Type code to view diagram:
|
||||
<div class="container">
|
||||
<textarea name="code" id="code" cols="30" rows="10"></textarea>
|
||||
<div id="dynamicDiagram"></div>
|
||||
</div>
|
||||
<pre class="mermaid">info</pre>
|
||||
|
||||
<script type="module">
|
||||
import mermaid from '/mermaid.esm.mjs';
|
||||
mermaid.parseError = function (err, hash) {
|
||||
console.error('Mermaid error: ', err);
|
||||
};
|
||||
async function render(str) {
|
||||
const { svg } = await mermaid.render('dynamic', str);
|
||||
document.getElementById('dynamicDiagram').innerHTML = svg;
|
||||
}
|
||||
const storeKey = window.location.pathname;
|
||||
const code = localStorage.getItem(storeKey);
|
||||
if (code) {
|
||||
document.getElementById('code').value = code;
|
||||
await render(code);
|
||||
}
|
||||
mermaid.initialize({
|
||||
startOnLoad: true,
|
||||
logLevel: 0,
|
||||
});
|
||||
const value = `graph TD\nHello --> World`;
|
||||
const el = document.getElementById('dynamicDiagram');
|
||||
const { svg } = await mermaid.render('dd', value);
|
||||
console.log(svg);
|
||||
el.innerHTML = svg;
|
||||
document.getElementById('code').addEventListener('input', async (e) => {
|
||||
const value = e.target.value;
|
||||
localStorage.setItem(storeKey, value);
|
||||
await render(value);
|
||||
});
|
||||
</script>
|
||||
|
||||
<script src="/dev/reload.js"></script>
|
||||
|
||||
@ -81,6 +81,9 @@
|
||||
<li>
|
||||
<h2><a href="./sankey.html">Sankey</a></h2>
|
||||
</li>
|
||||
<li>
|
||||
<h2><a href="./packet.html">Packet</a></h2>
|
||||
</li>
|
||||
</ul>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
141
demos/packet.html
Normal file
141
demos/packet.html
Normal file
@ -0,0 +1,141 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<title>Mermaid Quick Test Page</title>
|
||||
<link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" />
|
||||
<style>
|
||||
div.mermaid {
|
||||
font-family: 'Courier New', Courier, monospace !important;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>Packet diagram demo</h1>
|
||||
|
||||
<div class="diagrams">
|
||||
<pre class="mermaid">
|
||||
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"
|
||||
</pre
|
||||
>
|
||||
|
||||
<pre class="mermaid">
|
||||
---
|
||||
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"
|
||||
</pre
|
||||
>
|
||||
|
||||
<pre class="mermaid">
|
||||
---
|
||||
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"
|
||||
</pre
|
||||
>
|
||||
|
||||
<pre class="mermaid" style="background-color: black">
|
||||
---
|
||||
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"
|
||||
</pre
|
||||
>
|
||||
</div>
|
||||
<script type="module">
|
||||
import mermaid from '/mermaid.esm.mjs';
|
||||
mermaid.initialize({
|
||||
logLevel: 3,
|
||||
securityLevel: 'loose',
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.diagrams {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
pre {
|
||||
width: 45vw;
|
||||
padding: 2em;
|
||||
}
|
||||
</style>
|
||||
</body>
|
||||
</html>
|
||||
@ -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 <security@mermaid.live> 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 <security@mermaid.live> 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 <security@mermaid.live> when reporting an issue, and avoid revealing information about vulnerabilities in public as that could that could put users at risk.
|
||||
|
||||
## Best practices
|
||||
|
||||
|
||||
@ -14,7 +14,7 @@
|
||||
|
||||
#### Defined in
|
||||
|
||||
[defaultConfig.ts:272](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L272)
|
||||
[defaultConfig.ts:275](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L275)
|
||||
|
||||
---
|
||||
|
||||
|
||||
@ -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)
|
||||
|
||||
@ -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
|
||||
|
||||
|
||||
@ -22,7 +22,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_)
|
||||
|
||||
</div>
|
||||
|
||||
@ -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 `<head>` would add support for Font Awesome v6.5.1
|
||||
|
||||
```html
|
||||
<link
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
```
|
||||
|
||||
## Graph declarations with spaces between vertices and link and without semicolon
|
||||
|
||||
|
||||
@ -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 <otherTaskID> [[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 <taskID>` syntax.
|
||||
|
||||
| Metadata syntax | Start date | End date | ID |
|
||||
| ------------------------------------------ | --------------------------------------------------- | ------------------------------------------- | -------- |
|
||||
| `<taskID>, <startDate>, <endDate>` | `startdate` as interpreted using `dateformat` | `endDate` as interpreted using `dateformat` | `taskID` |
|
||||
| `<taskID>, <startDate>, <length>` | `startdate` as interpreted using `dateformat` | Start date + `length` | `taskID` |
|
||||
| `<taskID>, after <otherTaskId>, <endDate>` | End date of previously specified task `otherTaskID` | `endDate` as interpreted using `dateformat` | `taskID` |
|
||||
| `<taskID>, after <otherTaskId>, <length>` | End date of previously specified task `otherTaskID` | Start date + `length` | `taskID` |
|
||||
| `<startDate>, <endDate>` | `startdate` as interpreted using `dateformat` | `enddate` as interpreted using `dateformat` | n/a |
|
||||
| `<startDate>, <length>` | `startdate` as interpreted using `dateformat` | Start date + `length` | n/a |
|
||||
| `after <otherTaskID>, <endDate>` | End date of previously specified task `otherTaskID` | `enddate` as interpreted using `dateformat` | n/a |
|
||||
| `after <otherTaskID>, <length>` | End date of previously specified task `otherTaskID` | Start date + `length` | n/a |
|
||||
| `<endDate>` | End date of preceding task | `enddate` as interpreted using `dateformat` | n/a |
|
||||
| `<length>` | 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
|
||||
|
||||
141
docs/syntax/packet.md
Normal file
141
docs/syntax/packet.md
Normal file
@ -0,0 +1,141 @@
|
||||
> **Warning**
|
||||
>
|
||||
> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
|
||||
>
|
||||
> ## Please edit the corresponding file in [/packages/mermaid/src/docs/syntax/packet.md](../../packages/mermaid/src/docs/syntax/packet.md).
|
||||
|
||||
# Packet Diagram (v\<MERMAID_RELEASE_VERSION>+)
|
||||
|
||||
## 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
|
||||
---
|
||||
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)"
|
||||
```
|
||||
|
||||
```mermaid
|
||||
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.
|
||||
|
||||
<!--
|
||||
|
||||
Theme variables are not currently working due to a mermaid bug. The passed values are not being propogated into styles function.
|
||||
|
||||
## Theme Variables
|
||||
|
||||
| Property | Description | Default Value |
|
||||
| ---------------- | -------------------------- | ------------- |
|
||||
| byteFontSize | Font size of the bytes | '10px' |
|
||||
| startByteColor | Color of the starting byte | 'black' |
|
||||
| endByteColor | Color of the ending byte | 'black' |
|
||||
| labelColor | Color of the labels | 'black' |
|
||||
| labelFontSize | Font size of the labels | '12px' |
|
||||
| titleColor | Color of the title | 'black' |
|
||||
| titleFontSize | Font size of the title | '14px' |
|
||||
| blockStrokeColor | Color of the block stroke | 'black' |
|
||||
| blockStrokeWidth | Width of the block stroke | '1' |
|
||||
| blockFillColor | Fill color of the block | '#efefef' |
|
||||
|
||||
## Example on config and theme
|
||||
|
||||
```mermaid-example
|
||||
---
|
||||
config:
|
||||
packet:
|
||||
showBits: true
|
||||
themeVariables:
|
||||
packet:
|
||||
startByteColor: red
|
||||
---
|
||||
packet-beta
|
||||
0-15: "Source Port"
|
||||
16-31: "Destination Port"
|
||||
32-63: "Sequence Number"
|
||||
```
|
||||
|
||||
-->
|
||||
@ -61,11 +61,11 @@
|
||||
]
|
||||
},
|
||||
"devDependencies": {
|
||||
"@applitools/eyes-cypress": "^3.33.1",
|
||||
"@applitools/eyes-cypress": "^3.40.6",
|
||||
"@commitlint/cli": "^17.6.1",
|
||||
"@commitlint/config-conventional": "^17.6.1",
|
||||
"@cspell/eslint-plugin": "^6.31.1",
|
||||
"@cypress/code-coverage": "^3.10.7",
|
||||
"@cypress/code-coverage": "^3.12.18",
|
||||
"@rollup/plugin-typescript": "^11.1.1",
|
||||
"@types/cors": "^2.8.13",
|
||||
"@types/eslint": "^8.37.0",
|
||||
@ -86,7 +86,7 @@
|
||||
"chokidar": "^3.5.3",
|
||||
"concurrently": "^8.0.1",
|
||||
"cors": "^2.8.5",
|
||||
"cypress": "^12.10.0",
|
||||
"cypress": "^12.17.4",
|
||||
"cypress-image-snapshot": "^4.0.1",
|
||||
"esbuild": "^0.19.0",
|
||||
"eslint": "^8.47.0",
|
||||
|
||||
@ -146,10 +146,43 @@ export interface MermaidConfig {
|
||||
gitGraph?: GitGraphDiagramConfig;
|
||||
c4?: C4DiagramConfig;
|
||||
sankey?: SankeyDiagramConfig;
|
||||
packet?: PacketDiagramConfig;
|
||||
dompurifyConfig?: DOMPurifyConfiguration;
|
||||
wrap?: boolean;
|
||||
fontSize?: number;
|
||||
}
|
||||
/**
|
||||
* The object containing configurations specific for packet diagrams.
|
||||
*
|
||||
* This interface was referenced by `MermaidConfig`'s JSON-Schema
|
||||
* via the `definition` "PacketDiagramConfig".
|
||||
*/
|
||||
export interface PacketDiagramConfig extends BaseDiagramConfig {
|
||||
/**
|
||||
* The height of each row in the packet diagram.
|
||||
*/
|
||||
rowHeight?: number;
|
||||
/**
|
||||
* The width of each bit in the packet diagram.
|
||||
*/
|
||||
bitWidth?: number;
|
||||
/**
|
||||
* The number of bits to display per row.
|
||||
*/
|
||||
bitsPerRow?: number;
|
||||
/**
|
||||
* Toggle to display or hide bit numbers.
|
||||
*/
|
||||
showBits?: boolean;
|
||||
/**
|
||||
* The horizontal padding between the blocks in a row.
|
||||
*/
|
||||
paddingX?: number;
|
||||
/**
|
||||
* The vertical padding between the rows.
|
||||
*/
|
||||
paddingY?: number;
|
||||
}
|
||||
/**
|
||||
* This interface was referenced by `MermaidConfig`'s JSON-Schema
|
||||
* via the `definition` "BaseDiagramConfig".
|
||||
@ -561,6 +594,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.
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -257,6 +257,9 @@ const config: RequiredDeep<MermaidConfig> = {
|
||||
// TODO: can we make this default to `true` instead?
|
||||
useMaxWidth: false,
|
||||
},
|
||||
packet: {
|
||||
...defaultConfigJson.packet,
|
||||
},
|
||||
};
|
||||
|
||||
const keyify = (obj: any, prefix = ''): string[] =>
|
||||
|
||||
@ -20,6 +20,7 @@ import flowchartElk from '../diagrams/flowchart/elk/detector.js';
|
||||
import timeline from '../diagrams/timeline/detector.js';
|
||||
import mindmap from '../diagrams/mindmap/detector.js';
|
||||
import sankey from '../diagrams/sankey/sankeyDetector.js';
|
||||
import { packet } from '../diagrams/packet/detector.js';
|
||||
import { registerLazyLoadedDiagrams } from './detectType.js';
|
||||
import { registerDiagram } from './diagramAPI.js';
|
||||
|
||||
@ -86,6 +87,7 @@ export const addDiagrams = () => {
|
||||
journey,
|
||||
quadrantChart,
|
||||
sankey,
|
||||
packet,
|
||||
xychart
|
||||
);
|
||||
};
|
||||
|
||||
@ -1,7 +1,8 @@
|
||||
/* eslint-disable @typescript-eslint/no-explicit-any */
|
||||
import type * as d3 from 'd3';
|
||||
import type { SetRequired } from 'type-fest';
|
||||
import type { Diagram } from '../Diagram.js';
|
||||
import type { BaseDiagramConfig, MermaidConfig } from '../config.type.js';
|
||||
import type * as d3 from 'd3';
|
||||
|
||||
export interface DiagramMetadata {
|
||||
title?: string;
|
||||
@ -32,13 +33,29 @@ export interface DiagramDB {
|
||||
getDiagramTitle?: () => string;
|
||||
setAccTitle?: (title: string) => void;
|
||||
getAccTitle?: () => string;
|
||||
setAccDescription?: (describetion: string) => void;
|
||||
setAccDescription?: (description: string) => void;
|
||||
getAccDescription?: () => string;
|
||||
|
||||
setDisplayMode?: (title: string) => void;
|
||||
bindFunctions?: (element: Element) => void;
|
||||
}
|
||||
|
||||
/**
|
||||
* DiagramDB with fields that is required for all new diagrams.
|
||||
*/
|
||||
export type DiagramDBBase<T extends BaseDiagramConfig> = {
|
||||
getConfig: () => Required<T>;
|
||||
} & SetRequired<
|
||||
DiagramDB,
|
||||
| 'clear'
|
||||
| 'getAccTitle'
|
||||
| 'getDiagramTitle'
|
||||
| 'getAccDescription'
|
||||
| 'setAccDescription'
|
||||
| 'setAccTitle'
|
||||
| 'setDiagramTitle'
|
||||
>;
|
||||
|
||||
// This is what is returned from getClasses(...) methods.
|
||||
// It is slightly renamed to ..StyleClassDef instead of just ClassDef because "class" is a greatly ambiguous and overloaded word.
|
||||
// It makes it clear we're working with a style class definition, even though defining the type is currently difficult.
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
59
packages/mermaid/src/diagrams/packet/db.ts
Normal file
59
packages/mermaid/src/diagrams/packet/db.ts
Normal file
@ -0,0 +1,59 @@
|
||||
import { getConfig as commonGetConfig } from '../../config.js';
|
||||
import type { PacketDiagramConfig } from '../../config.type.js';
|
||||
import DEFAULT_CONFIG from '../../defaultConfig.js';
|
||||
import { cleanAndMerge } from '../../utils.js';
|
||||
import {
|
||||
clear as commonClear,
|
||||
getAccDescription,
|
||||
getAccTitle,
|
||||
getDiagramTitle,
|
||||
setAccDescription,
|
||||
setAccTitle,
|
||||
setDiagramTitle,
|
||||
} from '../common/commonDb.js';
|
||||
import type { PacketDB, PacketData, PacketWord } from './types.js';
|
||||
|
||||
const defaultPacketData: PacketData = {
|
||||
packet: [],
|
||||
};
|
||||
|
||||
let data: PacketData = structuredClone(defaultPacketData);
|
||||
|
||||
const DEFAULT_PACKET_CONFIG: Required<PacketDiagramConfig> = DEFAULT_CONFIG.packet;
|
||||
|
||||
const getConfig = (): Required<PacketDiagramConfig> => {
|
||||
const config = cleanAndMerge({
|
||||
...DEFAULT_PACKET_CONFIG,
|
||||
...commonGetConfig().packet,
|
||||
});
|
||||
if (config.showBits) {
|
||||
config.paddingY += 10;
|
||||
}
|
||||
return config;
|
||||
};
|
||||
|
||||
const getPacket = (): PacketWord[] => data.packet;
|
||||
|
||||
const pushWord = (word: PacketWord) => {
|
||||
if (word.length > 0) {
|
||||
data.packet.push(word);
|
||||
}
|
||||
};
|
||||
|
||||
const clear = () => {
|
||||
commonClear();
|
||||
data = structuredClone(defaultPacketData);
|
||||
};
|
||||
|
||||
export const db: PacketDB = {
|
||||
pushWord,
|
||||
getPacket,
|
||||
getConfig,
|
||||
clear,
|
||||
setAccTitle,
|
||||
getAccTitle,
|
||||
setDiagramTitle,
|
||||
getDiagramTitle,
|
||||
getAccDescription,
|
||||
setAccDescription,
|
||||
};
|
||||
22
packages/mermaid/src/diagrams/packet/detector.ts
Normal file
22
packages/mermaid/src/diagrams/packet/detector.ts
Normal file
@ -0,0 +1,22 @@
|
||||
import type {
|
||||
DiagramDetector,
|
||||
DiagramLoader,
|
||||
ExternalDiagramDefinition,
|
||||
} from '../../diagram-api/types.js';
|
||||
|
||||
const id = 'packet';
|
||||
|
||||
const detector: DiagramDetector = (txt) => {
|
||||
return /^\s*packet-beta/.test(txt);
|
||||
};
|
||||
|
||||
const loader: DiagramLoader = async () => {
|
||||
const { diagram } = await import('./diagram.js');
|
||||
return { id, diagram };
|
||||
};
|
||||
|
||||
export const packet: ExternalDiagramDefinition = {
|
||||
id,
|
||||
detector,
|
||||
loader,
|
||||
};
|
||||
12
packages/mermaid/src/diagrams/packet/diagram.ts
Normal file
12
packages/mermaid/src/diagrams/packet/diagram.ts
Normal file
@ -0,0 +1,12 @@
|
||||
import type { DiagramDefinition } from '../../diagram-api/types.js';
|
||||
import { db } from './db.js';
|
||||
import { parser } from './parser.js';
|
||||
import { renderer } from './renderer.js';
|
||||
import { styles } from './styles.js';
|
||||
|
||||
export const diagram: DiagramDefinition = {
|
||||
parser,
|
||||
db,
|
||||
renderer,
|
||||
styles,
|
||||
};
|
||||
192
packages/mermaid/src/diagrams/packet/packet.spec.ts
Normal file
192
packages/mermaid/src/diagrams/packet/packet.spec.ts
Normal file
@ -0,0 +1,192 @@
|
||||
import { db } from './db.js';
|
||||
import { parser } from './parser.js';
|
||||
|
||||
const { clear, getPacket, getDiagramTitle, getAccTitle, getAccDescription } = db;
|
||||
|
||||
describe('packet diagrams', () => {
|
||||
beforeEach(() => {
|
||||
clear();
|
||||
});
|
||||
|
||||
it('should handle a packet-beta definition', () => {
|
||||
const str = `packet-beta`;
|
||||
expect(() => {
|
||||
parser.parse(str);
|
||||
}).not.toThrow();
|
||||
expect(getPacket()).toMatchInlineSnapshot('[]');
|
||||
});
|
||||
|
||||
it('should handle diagram with data and title', () => {
|
||||
const str = `packet-beta
|
||||
title Packet diagram
|
||||
accTitle: Packet accTitle
|
||||
accDescr: Packet accDescription
|
||||
0-10: "test"
|
||||
`;
|
||||
expect(() => {
|
||||
parser.parse(str);
|
||||
}).not.toThrow();
|
||||
expect(getDiagramTitle()).toMatchInlineSnapshot('"Packet diagram"');
|
||||
expect(getAccTitle()).toMatchInlineSnapshot('"Packet accTitle"');
|
||||
expect(getAccDescription()).toMatchInlineSnapshot('"Packet accDescription"');
|
||||
expect(getPacket()).toMatchInlineSnapshot(`
|
||||
[
|
||||
[
|
||||
{
|
||||
"end": 10,
|
||||
"label": "test",
|
||||
"start": 0,
|
||||
},
|
||||
],
|
||||
]
|
||||
`);
|
||||
});
|
||||
|
||||
it('should handle single bits', () => {
|
||||
const str = `packet-beta
|
||||
0-10: "test"
|
||||
11: "single"
|
||||
`;
|
||||
expect(() => {
|
||||
parser.parse(str);
|
||||
}).not.toThrow();
|
||||
expect(getPacket()).toMatchInlineSnapshot(`
|
||||
[
|
||||
[
|
||||
{
|
||||
"end": 10,
|
||||
"label": "test",
|
||||
"start": 0,
|
||||
},
|
||||
{
|
||||
"end": 11,
|
||||
"label": "single",
|
||||
"start": 11,
|
||||
},
|
||||
],
|
||||
]
|
||||
`);
|
||||
});
|
||||
|
||||
it('should split into multiple rows', () => {
|
||||
const str = `packet-beta
|
||||
0-10: "test"
|
||||
11-90: "multiple"
|
||||
`;
|
||||
expect(() => {
|
||||
parser.parse(str);
|
||||
}).not.toThrow();
|
||||
expect(getPacket()).toMatchInlineSnapshot(`
|
||||
[
|
||||
[
|
||||
{
|
||||
"end": 10,
|
||||
"label": "test",
|
||||
"start": 0,
|
||||
},
|
||||
{
|
||||
"end": 31,
|
||||
"label": "multiple",
|
||||
"start": 11,
|
||||
},
|
||||
],
|
||||
[
|
||||
{
|
||||
"end": 63,
|
||||
"label": "multiple",
|
||||
"start": 32,
|
||||
},
|
||||
],
|
||||
[
|
||||
{
|
||||
"end": 90,
|
||||
"label": "multiple",
|
||||
"start": 64,
|
||||
},
|
||||
],
|
||||
]
|
||||
`);
|
||||
});
|
||||
|
||||
it('should split into multiple rows when cut at exact length', () => {
|
||||
const str = `packet-beta
|
||||
0-16: "test"
|
||||
17-63: "multiple"
|
||||
`;
|
||||
expect(() => {
|
||||
parser.parse(str);
|
||||
}).not.toThrow();
|
||||
expect(getPacket()).toMatchInlineSnapshot(`
|
||||
[
|
||||
[
|
||||
{
|
||||
"end": 16,
|
||||
"label": "test",
|
||||
"start": 0,
|
||||
},
|
||||
{
|
||||
"end": 31,
|
||||
"label": "multiple",
|
||||
"start": 17,
|
||||
},
|
||||
],
|
||||
[
|
||||
{
|
||||
"end": 63,
|
||||
"label": "multiple",
|
||||
"start": 32,
|
||||
},
|
||||
],
|
||||
]
|
||||
`);
|
||||
});
|
||||
|
||||
it('should throw error if numbers are not continuous', () => {
|
||||
const str = `packet-beta
|
||||
0-16: "test"
|
||||
18-20: "error"
|
||||
`;
|
||||
expect(() => {
|
||||
parser.parse(str);
|
||||
}).toThrowErrorMatchingInlineSnapshot(
|
||||
'"Packet block 18 - 20 is not contiguous. It should start from 17."'
|
||||
);
|
||||
});
|
||||
|
||||
it('should throw error if numbers are not continuous for single packets', () => {
|
||||
const str = `packet-beta
|
||||
0-16: "test"
|
||||
18: "error"
|
||||
`;
|
||||
expect(() => {
|
||||
parser.parse(str);
|
||||
}).toThrowErrorMatchingInlineSnapshot(
|
||||
'"Packet block 18 - 18 is not contiguous. It should start from 17."'
|
||||
);
|
||||
});
|
||||
|
||||
it('should throw error if numbers are not continuous for single packets - 2', () => {
|
||||
const str = `packet-beta
|
||||
0-16: "test"
|
||||
17: "good"
|
||||
19: "error"
|
||||
`;
|
||||
expect(() => {
|
||||
parser.parse(str);
|
||||
}).toThrowErrorMatchingInlineSnapshot(
|
||||
'"Packet block 19 - 19 is not contiguous. It should start from 18."'
|
||||
);
|
||||
});
|
||||
|
||||
it('should throw error if end is less than start', () => {
|
||||
const str = `packet-beta
|
||||
0-16: "test"
|
||||
25-20: "error"
|
||||
`;
|
||||
expect(() => {
|
||||
parser.parse(str);
|
||||
}).toThrowErrorMatchingInlineSnapshot(
|
||||
'"Packet block 25 - 20 is invalid. End must be greater than start."'
|
||||
);
|
||||
});
|
||||
});
|
||||
85
packages/mermaid/src/diagrams/packet/parser.ts
Normal file
85
packages/mermaid/src/diagrams/packet/parser.ts
Normal file
@ -0,0 +1,85 @@
|
||||
import type { Packet } from '@mermaid-js/parser';
|
||||
import { parse } from '@mermaid-js/parser';
|
||||
import type { ParserDefinition } from '../../diagram-api/types.js';
|
||||
import { log } from '../../logger.js';
|
||||
import { populateCommonDb } from '../common/populateCommonDb.js';
|
||||
import { db } from './db.js';
|
||||
import type { PacketBlock, PacketWord } from './types.js';
|
||||
|
||||
const maxPacketSize = 10_000;
|
||||
|
||||
const populate = (ast: Packet) => {
|
||||
populateCommonDb(ast, db);
|
||||
let lastByte = -1;
|
||||
let word: PacketWord = [];
|
||||
let row = 1;
|
||||
const { bitsPerRow } = db.getConfig();
|
||||
for (let { start, end, label } of ast.blocks) {
|
||||
if (end && end < start) {
|
||||
throw new Error(`Packet block ${start} - ${end} is invalid. End must be greater than start.`);
|
||||
}
|
||||
if (start !== lastByte + 1) {
|
||||
throw new Error(
|
||||
`Packet block ${start} - ${end ?? start} is not contiguous. It should start from ${
|
||||
lastByte + 1
|
||||
}.`
|
||||
);
|
||||
}
|
||||
lastByte = end ?? start;
|
||||
log.debug(`Packet block ${start} - ${lastByte} with label ${label}`);
|
||||
|
||||
while (word.length <= bitsPerRow + 1 && db.getPacket().length < maxPacketSize) {
|
||||
const [block, nextBlock] = getNextFittingBlock({ start, end, label }, row, bitsPerRow);
|
||||
word.push(block);
|
||||
if (block.end + 1 === row * bitsPerRow) {
|
||||
db.pushWord(word);
|
||||
word = [];
|
||||
row++;
|
||||
}
|
||||
if (!nextBlock) {
|
||||
break;
|
||||
}
|
||||
({ start, end, label } = nextBlock);
|
||||
}
|
||||
}
|
||||
db.pushWord(word);
|
||||
};
|
||||
|
||||
const getNextFittingBlock = (
|
||||
block: PacketBlock,
|
||||
row: number,
|
||||
bitsPerRow: number
|
||||
): [Required<PacketBlock>, PacketBlock | undefined] => {
|
||||
if (block.end === undefined) {
|
||||
block.end = block.start;
|
||||
}
|
||||
|
||||
if (block.start > block.end) {
|
||||
throw new Error(`Block start ${block.start} is greater than block end ${block.end}.`);
|
||||
}
|
||||
|
||||
if (block.end + 1 <= row * bitsPerRow) {
|
||||
return [block as Required<PacketBlock>, undefined];
|
||||
}
|
||||
|
||||
return [
|
||||
{
|
||||
start: block.start,
|
||||
end: row * bitsPerRow - 1,
|
||||
label: block.label,
|
||||
},
|
||||
{
|
||||
start: row * bitsPerRow,
|
||||
end: block.end,
|
||||
label: block.label,
|
||||
},
|
||||
];
|
||||
};
|
||||
|
||||
export const parser: ParserDefinition = {
|
||||
parse: (input: string): void => {
|
||||
const ast: Packet = parse('packet', input);
|
||||
log.debug(ast);
|
||||
populate(ast);
|
||||
},
|
||||
};
|
||||
95
packages/mermaid/src/diagrams/packet/renderer.ts
Normal file
95
packages/mermaid/src/diagrams/packet/renderer.ts
Normal file
@ -0,0 +1,95 @@
|
||||
import type { Diagram } from '../../Diagram.js';
|
||||
import type { PacketDiagramConfig } from '../../config.type.js';
|
||||
import type { DiagramRenderer, DrawDefinition, Group, SVG } from '../../diagram-api/types.js';
|
||||
import { selectSvgElement } from '../../rendering-util/selectSvgElement.js';
|
||||
import { configureSvgSize } from '../../setupGraphViewbox.js';
|
||||
import type { PacketDB, PacketWord } from './types.js';
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||
const draw: DrawDefinition = (_text, id, _version, diagram: Diagram) => {
|
||||
const db = diagram.db as PacketDB;
|
||||
const config = db.getConfig();
|
||||
const { rowHeight, paddingY, bitWidth, bitsPerRow } = config;
|
||||
const words = db.getPacket();
|
||||
const title = db.getDiagramTitle();
|
||||
const totalRowHeight = rowHeight + paddingY;
|
||||
const svgHeight = totalRowHeight * (words.length + 1) - (title ? 0 : rowHeight);
|
||||
const svgWidth = bitWidth * bitsPerRow + 2;
|
||||
const svg: SVG = selectSvgElement(id);
|
||||
|
||||
svg.attr('viewbox', `0 0 ${svgWidth} ${svgHeight}`);
|
||||
configureSvgSize(svg, svgHeight, svgWidth, config.useMaxWidth);
|
||||
|
||||
for (const [word, packet] of words.entries()) {
|
||||
drawWord(svg, packet, word, config);
|
||||
}
|
||||
|
||||
svg
|
||||
.append('text')
|
||||
.text(title)
|
||||
.attr('x', svgWidth / 2)
|
||||
.attr('y', svgHeight - totalRowHeight / 2)
|
||||
.attr('dominant-baseline', 'middle')
|
||||
.attr('text-anchor', 'middle')
|
||||
.attr('class', 'packetTitle');
|
||||
};
|
||||
|
||||
const drawWord = (
|
||||
svg: SVG,
|
||||
word: PacketWord,
|
||||
rowNumber: number,
|
||||
{ rowHeight, paddingX, paddingY, bitWidth, bitsPerRow, showBits }: Required<PacketDiagramConfig>
|
||||
) => {
|
||||
const group: Group = svg.append('g');
|
||||
const wordY = rowNumber * (rowHeight + paddingY) + paddingY;
|
||||
for (const block of word) {
|
||||
const blockX = (block.start % bitsPerRow) * bitWidth + 1;
|
||||
const width = (block.end - block.start + 1) * bitWidth - paddingX;
|
||||
// Block rectangle
|
||||
group
|
||||
.append('rect')
|
||||
.attr('x', blockX)
|
||||
.attr('y', wordY)
|
||||
.attr('width', width)
|
||||
.attr('height', rowHeight)
|
||||
.attr('class', 'packetBlock');
|
||||
|
||||
// Block label
|
||||
group
|
||||
.append('text')
|
||||
.attr('x', blockX + width / 2)
|
||||
.attr('y', wordY + rowHeight / 2)
|
||||
.attr('class', 'packetLabel')
|
||||
.attr('dominant-baseline', 'middle')
|
||||
.attr('text-anchor', 'middle')
|
||||
.text(block.label);
|
||||
|
||||
if (!showBits) {
|
||||
continue;
|
||||
}
|
||||
// Start byte count
|
||||
const isSingleBlock = block.end === block.start;
|
||||
const bitNumberY = wordY - 2;
|
||||
group
|
||||
.append('text')
|
||||
.attr('x', blockX + (isSingleBlock ? width / 2 : 0))
|
||||
.attr('y', bitNumberY)
|
||||
.attr('class', 'packetByte start')
|
||||
.attr('dominant-baseline', 'auto')
|
||||
.attr('text-anchor', isSingleBlock ? 'middle' : 'start')
|
||||
.text(block.start);
|
||||
|
||||
// Draw end byte count if it is not the same as start byte count
|
||||
if (!isSingleBlock) {
|
||||
group
|
||||
.append('text')
|
||||
.attr('x', blockX + width)
|
||||
.attr('y', bitNumberY)
|
||||
.attr('class', 'packetByte end')
|
||||
.attr('dominant-baseline', 'auto')
|
||||
.attr('text-anchor', 'end')
|
||||
.text(block.end);
|
||||
}
|
||||
}
|
||||
};
|
||||
export const renderer: DiagramRenderer = { draw };
|
||||
47
packages/mermaid/src/diagrams/packet/styles.ts
Normal file
47
packages/mermaid/src/diagrams/packet/styles.ts
Normal file
@ -0,0 +1,47 @@
|
||||
import type { DiagramStylesProvider } from '../../diagram-api/types.js';
|
||||
import { cleanAndMerge } from '../../utils.js';
|
||||
import type { PacketStyleOptions } from './types.js';
|
||||
|
||||
const defaultPacketStyleOptions: PacketStyleOptions = {
|
||||
byteFontSize: '10px',
|
||||
startByteColor: 'black',
|
||||
endByteColor: 'black',
|
||||
labelColor: 'black',
|
||||
labelFontSize: '12px',
|
||||
titleColor: 'black',
|
||||
titleFontSize: '14px',
|
||||
blockStrokeColor: 'black',
|
||||
blockStrokeWidth: '1',
|
||||
blockFillColor: '#efefef',
|
||||
};
|
||||
|
||||
export const styles: DiagramStylesProvider = ({ packet }: { packet?: PacketStyleOptions } = {}) => {
|
||||
const options = cleanAndMerge(defaultPacketStyleOptions, packet);
|
||||
|
||||
return `
|
||||
.packetByte {
|
||||
font-size: ${options.byteFontSize};
|
||||
}
|
||||
.packetByte.start {
|
||||
fill: ${options.startByteColor};
|
||||
}
|
||||
.packetByte.end {
|
||||
fill: ${options.endByteColor};
|
||||
}
|
||||
.packetLabel {
|
||||
fill: ${options.labelColor};
|
||||
font-size: ${options.labelFontSize};
|
||||
}
|
||||
.packetTitle {
|
||||
fill: ${options.titleColor};
|
||||
font-size: ${options.titleFontSize};
|
||||
}
|
||||
.packetBlock {
|
||||
stroke: ${options.blockStrokeColor};
|
||||
stroke-width: ${options.blockStrokeWidth};
|
||||
fill: ${options.blockFillColor};
|
||||
}
|
||||
`;
|
||||
};
|
||||
|
||||
export default styles;
|
||||
29
packages/mermaid/src/diagrams/packet/types.ts
Normal file
29
packages/mermaid/src/diagrams/packet/types.ts
Normal file
@ -0,0 +1,29 @@
|
||||
import type { Packet, RecursiveAstOmit } from '@mermaid-js/parser';
|
||||
import type { PacketDiagramConfig } from '../../config.type.js';
|
||||
import type { DiagramDBBase } from '../../diagram-api/types.js';
|
||||
import type { ArrayElement } from '../../types.js';
|
||||
|
||||
export type PacketBlock = RecursiveAstOmit<ArrayElement<Packet['blocks']>>;
|
||||
export type PacketWord = Required<PacketBlock>[];
|
||||
|
||||
export interface PacketDB extends DiagramDBBase<PacketDiagramConfig> {
|
||||
pushWord: (word: PacketWord) => void;
|
||||
getPacket: () => PacketWord[];
|
||||
}
|
||||
|
||||
export interface PacketStyleOptions {
|
||||
byteFontSize?: string;
|
||||
startByteColor?: string;
|
||||
endByteColor?: string;
|
||||
labelColor?: string;
|
||||
labelFontSize?: string;
|
||||
blockStrokeColor?: string;
|
||||
blockStrokeWidth?: string;
|
||||
blockFillColor?: string;
|
||||
titleColor?: string;
|
||||
titleFontSize?: string;
|
||||
}
|
||||
|
||||
export interface PacketData {
|
||||
packet: PacketWord[];
|
||||
}
|
||||
@ -16,11 +16,7 @@ import { teamMembers } from '../contributors';
|
||||
<p text-lg max-w-200 text-center leading-7>
|
||||
<Contributors />
|
||||
<br />
|
||||
<a
|
||||
href="https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE"
|
||||
rel="noopener noreferrer"
|
||||
>Join the community</a
|
||||
>
|
||||
<a href="https://discord.gg/wwtabKgp8y" rel="noopener noreferrer">Join the community</a>
|
||||
and get involved!
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@ -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' },
|
||||
],
|
||||
},
|
||||
|
||||
@ -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 <security@mermaid.live> 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 <security@mermaid.live> 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 <security@mermaid.live> when reporting an issue, and avoid revealing information about vulnerabilities in public as that could that could put users at risk.
|
||||
|
||||
## Best practices
|
||||
|
||||
|
||||
@ -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)
|
||||
|
||||
@ -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
|
||||
|
||||
|
||||
@ -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_)
|
||||
|
||||
</div>
|
||||
|
||||
@ -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 `<head>` would add support for Font Awesome v6.5.1
|
||||
|
||||
```html
|
||||
<link
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
```
|
||||
|
||||
## Graph declarations with spaces between vertices and link and without semicolon
|
||||
|
||||
|
||||
@ -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 <otherTaskID> [[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 <taskID>` syntax.
|
||||
|
||||
| Metadata syntax | Start date | End date | ID |
|
||||
| ------------------------------------------ | --------------------------------------------------- | ------------------------------------------- | -------- |
|
||||
| `<taskID>, <startDate>, <endDate>` | `startdate` as interpreted using `dateformat` | `endDate` as interpreted using `dateformat` | `taskID` |
|
||||
| `<taskID>, <startDate>, <length>` | `startdate` as interpreted using `dateformat` | Start date + `length` | `taskID` |
|
||||
| `<taskID>, after <otherTaskId>, <endDate>` | End date of previously specified task `otherTaskID` | `endDate` as interpreted using `dateformat` | `taskID` |
|
||||
| `<taskID>, after <otherTaskId>, <length>` | End date of previously specified task `otherTaskID` | Start date + `length` | `taskID` |
|
||||
| `<startDate>, <endDate>` | `startdate` as interpreted using `dateformat` | `enddate` as interpreted using `dateformat` | n/a |
|
||||
| `<startDate>, <length>` | `startdate` as interpreted using `dateformat` | Start date + `length` | n/a |
|
||||
| `after <otherTaskID>, <endDate>` | End date of previously specified task `otherTaskID` | `enddate` as interpreted using `dateformat` | n/a |
|
||||
| `after <otherTaskID>, <length>` | End date of previously specified task `otherTaskID` | Start date + `length` | n/a |
|
||||
| `<endDate>` | End date of preceding task | `enddate` as interpreted using `dateformat` | n/a |
|
||||
| `<length>` | 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
|
||||
|
||||
101
packages/mermaid/src/docs/syntax/packet.md
Normal file
101
packages/mermaid/src/docs/syntax/packet.md
Normal file
@ -0,0 +1,101 @@
|
||||
# Packet Diagram (v<MERMAID_RELEASE_VERSION>+)
|
||||
|
||||
## 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.
|
||||
|
||||
<!--
|
||||
|
||||
Theme variables are not currently working due to a mermaid bug. The passed values are not being propogated into styles function.
|
||||
|
||||
## Theme Variables
|
||||
|
||||
| Property | Description | Default Value |
|
||||
| ---------------- | -------------------------- | ------------- |
|
||||
| byteFontSize | Font size of the bytes | '10px' |
|
||||
| startByteColor | Color of the starting byte | 'black' |
|
||||
| endByteColor | Color of the ending byte | 'black' |
|
||||
| labelColor | Color of the labels | 'black' |
|
||||
| labelFontSize | Font size of the labels | '12px' |
|
||||
| titleColor | Color of the title | 'black' |
|
||||
| titleFontSize | Font size of the title | '14px' |
|
||||
| blockStrokeColor | Color of the block stroke | 'black' |
|
||||
| blockStrokeWidth | Width of the block stroke | '1' |
|
||||
| blockFillColor | Fill color of the block | '#efefef' |
|
||||
|
||||
## Example on config and theme
|
||||
|
||||
```mermaid-example
|
||||
---
|
||||
config:
|
||||
packet:
|
||||
showBits: true
|
||||
themeVariables:
|
||||
packet:
|
||||
startByteColor: red
|
||||
---
|
||||
packet-beta
|
||||
0-15: "Source Port"
|
||||
16-31: "Destination Port"
|
||||
32-63: "Sequence Number"
|
||||
```
|
||||
|
||||
-->
|
||||
@ -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' },
|
||||
|
||||
@ -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: |
|
||||
|
||||
@ -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');
|
||||
|
||||
@ -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;
|
||||
|
||||
|
||||
@ -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,
|
||||
|
||||
@ -32,3 +32,5 @@ export interface EdgeData {
|
||||
labelStyle: string;
|
||||
curve: any;
|
||||
}
|
||||
|
||||
export type ArrayElement<A> = A extends readonly (infer T)[] ? T : never;
|
||||
|
||||
@ -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",
|
||||
|
||||
@ -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> = T extends object
|
||||
? { [P in keyof T as Exclude<P, keyof AstNode>]: RecursiveAstOmit<T[P]> }
|
||||
: T;
|
||||
|
||||
@ -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';
|
||||
|
||||
1
packages/parser/src/language/packet/index.ts
Normal file
1
packages/parser/src/language/packet/index.ts
Normal file
@ -0,0 +1 @@
|
||||
export * from './module.js';
|
||||
68
packages/parser/src/language/packet/module.ts
Normal file
68
packages/parser/src/language/packet/module.ts
Normal file
@ -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<PacketServices, PartialLangiumServices & PacketAddedServices> = {
|
||||
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 };
|
||||
}
|
||||
19
packages/parser/src/language/packet/packet.langium
Normal file
19
packages/parser/src/language/packet/packet.langium
Normal file
@ -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: /"[^"]*"|'[^']*'/;
|
||||
7
packages/parser/src/language/packet/tokenBuilder.ts
Normal file
7
packages/parser/src/language/packet/tokenBuilder.ts
Normal file
@ -0,0 +1,7 @@
|
||||
import { AbstractMermaidTokenBuilder } from '../common/index.js';
|
||||
|
||||
export class PacketTokenBuilder extends AbstractMermaidTokenBuilder {
|
||||
public constructor() {
|
||||
super(['packet-beta']);
|
||||
}
|
||||
}
|
||||
@ -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<string, LangiumParser> = {};
|
||||
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<T extends DiagramAST>(
|
||||
diagramType: keyof typeof initializers,
|
||||
|
||||
18
pnpm-lock.yaml
generated
18
pnpm-lock.yaml
generated
@ -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
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user