mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-11-10 07:44:40 +01:00
Compare commits
29 Commits
sidv/rough
...
refactor/s
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
43b7db9d6a | ||
|
|
df46b617d4 | ||
|
|
f45ea0c60e | ||
|
|
d20955a56a | ||
|
|
fb66b3fbe3 | ||
|
|
82ea5d63bb | ||
|
|
881e74087a | ||
|
|
09920c0497 | ||
|
|
8065d65cd7 | ||
|
|
09b841f781 | ||
|
|
d0f9dc0c9b | ||
|
|
15e2824d53 | ||
|
|
7eb582e860 | ||
|
|
6ca928f31f | ||
|
|
dfd59470dc | ||
|
|
4aac6fa448 | ||
|
|
5f96f80efb | ||
|
|
545801e144 | ||
|
|
0bd74759cc | ||
|
|
e4cf266c1d | ||
|
|
c0e1662e50 | ||
|
|
b76ccae065 | ||
|
|
7b0763f262 | ||
|
|
38c289818c | ||
|
|
57530076aa | ||
|
|
f2d7877c7a | ||
|
|
34f40f0794 | ||
|
|
32ac2c689d | ||
|
|
dbcadc1d0b |
@@ -1,8 +0,0 @@
|
||||
---
|
||||
'mermaid': minor
|
||||
---
|
||||
|
||||
feat: Support `handDrawn` look for all diagrams
|
||||
|
||||
This uses svg2roughjs on diagrams that do not natively support roughjs.
|
||||
So your mileage may vary.
|
||||
@@ -71,6 +71,9 @@ export const getBuildConfig = (options: MermaidBuildOptions): BuildOptions => {
|
||||
|
||||
const external: string[] = ['require', 'fs', 'path'];
|
||||
const outFileName = getFileName(name, options);
|
||||
const { dependencies, version } = JSON.parse(
|
||||
readFileSync(resolve(__dirname, `../packages/${packageName}/package.json`), 'utf-8')
|
||||
);
|
||||
const output: BuildOptions = buildOptions({
|
||||
...rest,
|
||||
absWorkingDir: resolve(__dirname, `../packages/${packageName}`),
|
||||
@@ -82,15 +85,13 @@ export const getBuildConfig = (options: MermaidBuildOptions): BuildOptions => {
|
||||
chunkNames: `chunks/${outFileName}/[name]-[hash]`,
|
||||
define: {
|
||||
// This needs to be stringified for esbuild
|
||||
includeLargeFeatures: `${includeLargeFeatures}`,
|
||||
'injected.includeLargeFeatures': `${includeLargeFeatures}`,
|
||||
'injected.version': `'${version}'`,
|
||||
'import.meta.vitest': 'undefined',
|
||||
},
|
||||
});
|
||||
|
||||
if (core) {
|
||||
const { dependencies } = JSON.parse(
|
||||
readFileSync(resolve(__dirname, `../packages/${packageName}/package.json`), 'utf-8')
|
||||
);
|
||||
// Core build is used to generate file without bundled dependencies.
|
||||
// This is used by downstream projects to bundle dependencies themselves.
|
||||
// Ignore dependencies and any dependencies of dependencies
|
||||
|
||||
2
.github/workflows/e2e-timings.yml
vendored
2
.github/workflows/e2e-timings.yml
vendored
@@ -58,7 +58,7 @@ jobs:
|
||||
echo "EOF" >> $GITHUB_OUTPUT
|
||||
|
||||
- name: Commit and create pull request
|
||||
uses: peter-evans/create-pull-request@915d841dae6a4f191bb78faf61a257411d7be4d2
|
||||
uses: peter-evans/create-pull-request@0edc001d28a2959cd7a6b505629f1d82f0a6e67d
|
||||
with:
|
||||
add-paths: |
|
||||
cypress/timings.json
|
||||
|
||||
2
.github/workflows/scorecard.yml
vendored
2
.github/workflows/scorecard.yml
vendored
@@ -20,7 +20,7 @@ jobs:
|
||||
with:
|
||||
persist-credentials: false
|
||||
- name: Run analysis
|
||||
uses: ossf/scorecard-action@05b42c624433fc40578a4040d5cf5e36ddca8cde # v2.4.2
|
||||
uses: ossf/scorecard-action@4eaacf0543bb3f2c246792bd56e8cdeffafb205a # v2.4.3
|
||||
with:
|
||||
results_file: results.sarif
|
||||
results_format: sarif
|
||||
|
||||
@@ -78,6 +78,8 @@ export const getBuildConfig = ({ minify, core, watch, entryName }: BuildOptions)
|
||||
},
|
||||
define: {
|
||||
'import.meta.vitest': 'undefined',
|
||||
'injected.includeLargeFeatures': 'true',
|
||||
'injected.version': `'0.0.0'`,
|
||||
},
|
||||
resolve: {
|
||||
extensions: [],
|
||||
@@ -94,10 +96,6 @@ export const getBuildConfig = ({ minify, core, watch, entryName }: BuildOptions)
|
||||
}),
|
||||
...visualizerOptions(packageName, core),
|
||||
],
|
||||
define: {
|
||||
// Needs to be string
|
||||
includeLargeFeatures: 'true',
|
||||
},
|
||||
};
|
||||
|
||||
if (watch && config.build) {
|
||||
|
||||
@@ -445,7 +445,7 @@ ORDER ||--|{ LINE-ITEM : contains
|
||||
{ logLevel: 1 }
|
||||
);
|
||||
});
|
||||
it('should render ER diagram with numeric entity names and attributes', () => {
|
||||
it('should render ER diagram with standalone numeric entities', () => {
|
||||
imgSnapshotTest(
|
||||
`erDiagram
|
||||
PRODUCT ||--o{ ORDER-ITEM : has
|
||||
|
||||
@@ -1,9 +0,0 @@
|
||||
import { urlSnapshotTest } from '../../helpers/util.ts';
|
||||
|
||||
describe('Hand Draw', () => {
|
||||
it('should render the hand drawn look for all diagrams', () => {
|
||||
urlSnapshotTest('http://localhost:9000/handDrawn.html', {
|
||||
logLevel: 1,
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -1,211 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Hand Drawn Diagrams</title>
|
||||
<style>
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 32px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 48px;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4 {
|
||||
margin: 0;
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 24px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 64px;
|
||||
}
|
||||
|
||||
section.diagram-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 32px;
|
||||
}
|
||||
|
||||
.diagram-example {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.diagram-row {
|
||||
display: flex;
|
||||
gap: 24px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.diagram-panel {
|
||||
flex: 1 1 420px;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.diagram-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #9ca3af;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
}
|
||||
|
||||
@media (max-width: 960px) {
|
||||
body {
|
||||
padding: 20px;
|
||||
}
|
||||
.diagram-row {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Hand-drawn Look Comparison</h1>
|
||||
<main id="app"></main>
|
||||
<script type="module">
|
||||
import mermaid from './mermaid.esm.mjs';
|
||||
import { diagramData } from './mermaid-examples.esm.mjs';
|
||||
|
||||
mermaid.initialize({ startOnLoad: false });
|
||||
|
||||
const app = document.getElementById('app');
|
||||
const seen = new Set();
|
||||
|
||||
const ensureObject = (value) =>
|
||||
value && typeof value === 'object' && !Array.isArray(value) ? value : {};
|
||||
|
||||
let renderIndex = 0;
|
||||
|
||||
const renderDiagram = async (target, source, overrides = {}) => {
|
||||
const id = `diagram-${renderIndex++}`;
|
||||
const config = {
|
||||
startOnLoad: false,
|
||||
...overrides,
|
||||
};
|
||||
|
||||
mermaid.initialize(config);
|
||||
|
||||
try {
|
||||
const { svg, bindFunctions } = await mermaid.render(id, source);
|
||||
target.innerHTML = svg;
|
||||
if (typeof bindFunctions === 'function') {
|
||||
bindFunctions(target);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to render diagram', { id, error });
|
||||
target.innerHTML = '';
|
||||
const pre = document.createElement('pre');
|
||||
pre.className = 'diagram-error';
|
||||
pre.textContent = String(error);
|
||||
target.appendChild(pre);
|
||||
}
|
||||
};
|
||||
|
||||
const createPanel = (label) => {
|
||||
const panel = document.createElement('article');
|
||||
panel.className = 'diagram-panel';
|
||||
|
||||
const heading = document.createElement('div');
|
||||
heading.className = 'diagram-label';
|
||||
heading.textContent = label;
|
||||
panel.appendChild(heading);
|
||||
|
||||
const surface = document.createElement('div');
|
||||
surface.className = 'diagram-surface';
|
||||
panel.appendChild(surface);
|
||||
|
||||
return { panel, surface };
|
||||
};
|
||||
|
||||
const bootstrap = async () => {
|
||||
const fragment = document.createDocumentFragment();
|
||||
|
||||
const groups = diagramData.filter((group) => {
|
||||
if (!group || seen.has(group.id)) {
|
||||
return false;
|
||||
}
|
||||
seen.add(group.id);
|
||||
return Array.isArray(group.examples) && group.examples.length > 0;
|
||||
});
|
||||
|
||||
for (const group of groups) {
|
||||
const groupSection = document.createElement('section');
|
||||
groupSection.className = 'diagram-group';
|
||||
|
||||
const groupHeading = document.createElement('h2');
|
||||
groupHeading.textContent = group.name ?? group.id;
|
||||
groupSection.appendChild(groupHeading);
|
||||
|
||||
for (const example of group.examples) {
|
||||
const exampleWrapper = document.createElement('div');
|
||||
exampleWrapper.className = 'diagram-example';
|
||||
|
||||
const exampleHeading = document.createElement('h3');
|
||||
exampleHeading.textContent = example.title ?? 'Example';
|
||||
exampleWrapper.appendChild(exampleHeading);
|
||||
|
||||
const row = document.createElement('div');
|
||||
row.className = 'diagram-row';
|
||||
|
||||
const defaultPanel = createPanel('Default config');
|
||||
const handPanel = createPanel('config.look: handDrawn');
|
||||
|
||||
row.append(defaultPanel.panel, handPanel.panel);
|
||||
exampleWrapper.appendChild(row);
|
||||
groupSection.appendChild(exampleWrapper);
|
||||
|
||||
await renderDiagram(defaultPanel.surface, example.code);
|
||||
await renderDiagram(handPanel.surface, example.code, {
|
||||
look: 'handDrawn',
|
||||
handDrawnSeed: 42,
|
||||
});
|
||||
}
|
||||
|
||||
fragment.appendChild(groupSection);
|
||||
}
|
||||
|
||||
app.appendChild(fragment);
|
||||
if (window.Cypress) {
|
||||
window.rendered = true;
|
||||
}
|
||||
};
|
||||
|
||||
bootstrap().catch((error) => {
|
||||
console.error('Failed to bootstrap hand-drawn comparison page', error);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -10,7 +10,7 @@
|
||||
|
||||
# Interface: ExternalDiagramDefinition
|
||||
|
||||
Defined in: [packages/mermaid/src/diagram-api/types.ts:101](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L101)
|
||||
Defined in: [packages/mermaid/src/diagram-api/types.ts:96](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L96)
|
||||
|
||||
## Properties
|
||||
|
||||
@@ -18,7 +18,7 @@ Defined in: [packages/mermaid/src/diagram-api/types.ts:101](https://github.com/m
|
||||
|
||||
> **detector**: `DiagramDetector`
|
||||
|
||||
Defined in: [packages/mermaid/src/diagram-api/types.ts:103](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L103)
|
||||
Defined in: [packages/mermaid/src/diagram-api/types.ts:98](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L98)
|
||||
|
||||
---
|
||||
|
||||
@@ -26,7 +26,7 @@ Defined in: [packages/mermaid/src/diagram-api/types.ts:103](https://github.com/m
|
||||
|
||||
> **id**: `string`
|
||||
|
||||
Defined in: [packages/mermaid/src/diagram-api/types.ts:102](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L102)
|
||||
Defined in: [packages/mermaid/src/diagram-api/types.ts:97](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L97)
|
||||
|
||||
---
|
||||
|
||||
@@ -34,4 +34,4 @@ Defined in: [packages/mermaid/src/diagram-api/types.ts:102](https://github.com/m
|
||||
|
||||
> **loader**: `DiagramLoader`
|
||||
|
||||
Defined in: [packages/mermaid/src/diagram-api/types.ts:104](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L104)
|
||||
Defined in: [packages/mermaid/src/diagram-api/types.ts:99](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L99)
|
||||
|
||||
@@ -12,4 +12,4 @@
|
||||
|
||||
> **SVG** = `d3.Selection`<`SVGSVGElement`, `unknown`, `Element` | `null`, `unknown`>
|
||||
|
||||
Defined in: [packages/mermaid/src/diagram-api/types.ts:133](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L133)
|
||||
Defined in: [packages/mermaid/src/diagram-api/types.ts:128](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L128)
|
||||
|
||||
@@ -12,4 +12,4 @@
|
||||
|
||||
> **SVGGroup** = `d3.Selection`<`SVGGElement`, `unknown`, `Element` | `null`, `unknown`>
|
||||
|
||||
Defined in: [packages/mermaid/src/diagram-api/types.ts:135](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L135)
|
||||
Defined in: [packages/mermaid/src/diagram-api/types.ts:130](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/diagram-api/types.ts#L130)
|
||||
|
||||
@@ -57,6 +57,8 @@ To add an integration to this list, see the [Integrations - create page](./integ
|
||||
- [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) ✅
|
||||
- [GNU Octave](https://octave.org/) ✅
|
||||
- [octave_mermaid_js](https://github.com/CNOCTAVE/octave_mermaid_js) ✅
|
||||
- [Mermaid Plugin for JetBrains IDEs](https://plugins.jetbrains.com/plugin/20146-mermaid)
|
||||
- [MonsterWriter](https://www.monsterwriter.com/) ✅
|
||||
- [Joplin](https://joplinapp.org) ✅
|
||||
|
||||
30
package.json
30
package.json
@@ -63,21 +63,21 @@
|
||||
]
|
||||
},
|
||||
"devDependencies": {
|
||||
"@applitools/eyes-cypress": "^3.55.2",
|
||||
"@argos-ci/cypress": "^6.1.3",
|
||||
"@applitools/eyes-cypress": "^3.55.4",
|
||||
"@argos-ci/cypress": "^6.1.5",
|
||||
"@changesets/changelog-github": "^0.5.1",
|
||||
"@changesets/cli": "^2.29.7",
|
||||
"@cspell/eslint-plugin": "^8.19.4",
|
||||
"@cypress/code-coverage": "^3.14.6",
|
||||
"@cspell/eslint-plugin": "^9.3.0",
|
||||
"@cypress/code-coverage": "^3.14.7",
|
||||
"@eslint/js": "^9.26.0",
|
||||
"@rollup/plugin-typescript": "^12.1.4",
|
||||
"@types/cors": "^2.8.19",
|
||||
"@types/express": "^5.0.3",
|
||||
"@types/express": "^5.0.5",
|
||||
"@types/js-yaml": "^4.0.9",
|
||||
"@types/jsdom": "^21.1.7",
|
||||
"@types/lodash": "^4.17.20",
|
||||
"@types/mdast": "^4.0.4",
|
||||
"@types/node": "^22.18.6",
|
||||
"@types/node": "^22.18.13",
|
||||
"@types/rollup-plugin-visualizer": "^5.0.3",
|
||||
"@vitest/coverage-v8": "^3.2.4",
|
||||
"@vitest/spy": "^3.2.4",
|
||||
@@ -88,23 +88,23 @@
|
||||
"cors": "^2.8.5",
|
||||
"cpy-cli": "^5.0.0",
|
||||
"cross-env": "^7.0.3",
|
||||
"cspell": "^9.2.1",
|
||||
"cspell": "^9.2.2",
|
||||
"cypress": "^14.5.4",
|
||||
"cypress-image-snapshot": "^4.0.1",
|
||||
"cypress-split": "^1.24.23",
|
||||
"esbuild": "^0.25.10",
|
||||
"cypress-split": "^1.24.25",
|
||||
"esbuild": "^0.25.12",
|
||||
"eslint": "^9.26.0",
|
||||
"eslint-config-prettier": "^10.1.8",
|
||||
"eslint-plugin-cypress": "^4.3.0",
|
||||
"eslint-plugin-cypress": "^5.2.0",
|
||||
"eslint-plugin-html": "^8.1.3",
|
||||
"eslint-plugin-jest": "^28.14.0",
|
||||
"eslint-plugin-jsdoc": "^50.8.0",
|
||||
"eslint-plugin-jest": "^29.0.1",
|
||||
"eslint-plugin-jsdoc": "^61.1.12",
|
||||
"eslint-plugin-json": "^4.0.1",
|
||||
"eslint-plugin-lodash": "^8.0.0",
|
||||
"eslint-plugin-markdown": "^5.1.0",
|
||||
"eslint-plugin-no-only-tests": "^3.3.0",
|
||||
"eslint-plugin-tsdoc": "^0.4.0",
|
||||
"eslint-plugin-unicorn": "^59.0.1",
|
||||
"eslint-plugin-unicorn": "^62.0.0",
|
||||
"express": "^5.1.0",
|
||||
"globals": "^16.4.0",
|
||||
"globby": "^14.1.0",
|
||||
@@ -121,10 +121,10 @@
|
||||
"prettier": "^3.6.2",
|
||||
"prettier-plugin-jsdoc": "^1.3.3",
|
||||
"rimraf": "^6.0.1",
|
||||
"rollup-plugin-visualizer": "^6.0.3",
|
||||
"rollup-plugin-visualizer": "^6.0.5",
|
||||
"start-server-and-test": "^2.1.2",
|
||||
"tslib": "^2.8.1",
|
||||
"tsx": "^4.20.5",
|
||||
"tsx": "^4.20.6",
|
||||
"typescript": "~5.7.3",
|
||||
"typescript-eslint": "^8.38.0",
|
||||
"vite": "^7.0.7",
|
||||
|
||||
@@ -33,7 +33,7 @@
|
||||
],
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@zenuml/core": "^3.41.4"
|
||||
"@zenuml/core": "^3.41.6"
|
||||
},
|
||||
"devDependencies": {
|
||||
"mermaid": "workspace:^"
|
||||
|
||||
@@ -77,23 +77,22 @@
|
||||
"d3": "^7.9.0",
|
||||
"d3-sankey": "^0.12.3",
|
||||
"dagre-d3-es": "7.0.13",
|
||||
"dayjs": "^1.11.18",
|
||||
"dompurify": "^3.2.5",
|
||||
"katex": "^0.16.22",
|
||||
"dayjs": "^1.11.19",
|
||||
"dompurify": "^3.2.7",
|
||||
"katex": "^0.16.25",
|
||||
"khroma": "^2.1.0",
|
||||
"lodash-es": "^4.17.21",
|
||||
"marked": "^16.3.0",
|
||||
"roughjs": "^4.6.6",
|
||||
"stylis": "^4.3.6",
|
||||
"svg2roughjs": "^3.2.1",
|
||||
"ts-dedent": "^2.2.0",
|
||||
"uuid": "^11.1.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@adobe/jsonschema2md": "^8.0.5",
|
||||
"@adobe/jsonschema2md": "^8.0.7",
|
||||
"@iconify/types": "^2.0.0",
|
||||
"@types/cytoscape": "^3.21.9",
|
||||
"@types/cytoscape-fcose": "^2.2.4",
|
||||
"@types/cytoscape-fcose": "^2.2.5",
|
||||
"@types/d3-sankey": "^0.12.4",
|
||||
"@types/d3-scale": "^4.0.9",
|
||||
"@types/d3-scale-chromatic": "^3.1.0",
|
||||
@@ -102,7 +101,7 @@
|
||||
"@types/jsdom": "^21.1.7",
|
||||
"@types/katex": "^0.16.7",
|
||||
"@types/lodash-es": "^4.17.12",
|
||||
"@types/micromatch": "^4.0.9",
|
||||
"@types/micromatch": "^4.0.10",
|
||||
"@types/stylis": "^4.2.7",
|
||||
"@types/uuid": "^10.0.0",
|
||||
"ajv": "^8.17.1",
|
||||
@@ -124,7 +123,7 @@
|
||||
"rimraf": "^6.0.1",
|
||||
"start-server-and-test": "^2.1.2",
|
||||
"type-fest": "^4.41.0",
|
||||
"typedoc": "^0.28.13",
|
||||
"typedoc": "^0.28.14",
|
||||
"typedoc-plugin-markdown": "^4.8.1",
|
||||
"typescript": "~5.7.3",
|
||||
"unist-util-flatmap": "^1.0.0",
|
||||
|
||||
@@ -30,7 +30,7 @@ export class Diagram {
|
||||
const { id, diagram } = await loader();
|
||||
registerDiagram(id, diagram);
|
||||
}
|
||||
const { db, parser, renderer, init, capabilities } = getDiagram(type);
|
||||
const { db, parser, renderer, init } = getDiagram(type);
|
||||
if (parser.parser) {
|
||||
// The parser.parser.yy is only present in JISON parsers. So, we'll only set if required.
|
||||
parser.parser.yy = db;
|
||||
@@ -42,7 +42,7 @@ export class Diagram {
|
||||
db.setDiagramTitle?.(metadata.title);
|
||||
}
|
||||
await parser.parse(text);
|
||||
return new Diagram(type, text, db, parser, renderer, capabilities);
|
||||
return new Diagram(type, text, db, parser, renderer);
|
||||
}
|
||||
|
||||
private constructor(
|
||||
@@ -50,8 +50,7 @@ export class Diagram {
|
||||
public text: string,
|
||||
public db: DiagramDefinition['db'],
|
||||
public parser: DiagramDefinition['parser'],
|
||||
public renderer: DiagramDefinition['renderer'],
|
||||
public capabilities: DiagramDefinition['capabilities']
|
||||
public renderer: DiagramDefinition['renderer']
|
||||
) {}
|
||||
|
||||
async render(id: string, version: string) {
|
||||
|
||||
@@ -72,7 +72,7 @@ export const addDiagrams = () => {
|
||||
}
|
||||
);
|
||||
|
||||
if (includeLargeFeatures) {
|
||||
if (injected.includeLargeFeatures) {
|
||||
registerLazyLoadedDiagrams(flowchartElk, mindmap, architecture);
|
||||
}
|
||||
|
||||
|
||||
@@ -75,15 +75,10 @@ export interface DiagramRenderer {
|
||||
) => Map<string, DiagramStyleClassDef>;
|
||||
}
|
||||
|
||||
export interface DiagramCapabilities {
|
||||
handDrawn?: boolean;
|
||||
}
|
||||
|
||||
export interface DiagramDefinition {
|
||||
db: DiagramDB;
|
||||
renderer: DiagramRenderer;
|
||||
parser: ParserDefinition;
|
||||
capabilities?: DiagramCapabilities;
|
||||
styles?: any;
|
||||
init?: (config: MermaidConfig) => void;
|
||||
injectUtils?: (
|
||||
|
||||
@@ -10,9 +10,6 @@ export const diagram: DiagramDefinition = {
|
||||
get db() {
|
||||
return new ClassDB();
|
||||
},
|
||||
capabilities: {
|
||||
handDrawn: true,
|
||||
},
|
||||
renderer,
|
||||
styles,
|
||||
init: (cnf) => {
|
||||
|
||||
@@ -333,7 +333,7 @@ const renderKatexUnsanitized = async (text: string, config: MermaidConfig): Prom
|
||||
return text.replace(katexRegex, 'MathML is unsupported in this environment.');
|
||||
}
|
||||
|
||||
if (includeLargeFeatures) {
|
||||
if (injected.includeLargeFeatures) {
|
||||
const { default: katex } = await import('katex');
|
||||
const outputMode =
|
||||
config.forceLegacyMathML || (!isMathMLSupported() && config.legacyMathML)
|
||||
|
||||
@@ -2,16 +2,13 @@
|
||||
import erParser from './parser/erDiagram.jison';
|
||||
import { ErDB } from './erDb.js';
|
||||
import * as renderer from './erRenderer-unified.js';
|
||||
import styles from './styles.js';
|
||||
import erStyles from './styles.js';
|
||||
|
||||
export const diagram = {
|
||||
parser: erParser,
|
||||
get db() {
|
||||
return new ErDB();
|
||||
},
|
||||
capabilities: {
|
||||
handDrawn: true,
|
||||
},
|
||||
renderer,
|
||||
styles,
|
||||
styles: erStyles,
|
||||
};
|
||||
|
||||
@@ -13,9 +13,6 @@ export const diagram = {
|
||||
return new FlowDB();
|
||||
},
|
||||
renderer,
|
||||
capabilities: {
|
||||
handDrawn: true,
|
||||
},
|
||||
styles: flowStyles,
|
||||
init: (cnf: MermaidConfig) => {
|
||||
if (!cnf.flowchart) {
|
||||
|
||||
@@ -1,8 +1,7 @@
|
||||
import type { InfoFields, InfoDB } from './infoTypes.js';
|
||||
import packageJson from '../../../package.json' assert { type: 'json' };
|
||||
|
||||
export const DEFAULT_INFO_DB: InfoFields = {
|
||||
version: packageJson.version + (includeLargeFeatures ? '' : '-tiny'),
|
||||
version: injected.version + (injected.includeLargeFeatures ? '' : '-tiny'),
|
||||
} as const;
|
||||
|
||||
export const getVersion = (): string => DEFAULT_INFO_DB.version;
|
||||
|
||||
@@ -43,7 +43,7 @@ export const draw: DrawDefinition = (text, id, _version, diagObj) => {
|
||||
const group: SVGGroup = svg.append('g');
|
||||
group.attr('transform', 'translate(' + pieWidth / 2 + ',' + height / 2 + ')');
|
||||
|
||||
const { themeVariables, look } = globalConfig;
|
||||
const { themeVariables } = globalConfig;
|
||||
let [outerStrokeWidth] = parseFontSize(themeVariables.pieOuterStrokeWidth);
|
||||
outerStrokeWidth ??= 2;
|
||||
|
||||
@@ -59,14 +59,12 @@ export const draw: DrawDefinition = (text, id, _version, diagObj) => {
|
||||
.innerRadius(radius * textPosition)
|
||||
.outerRadius(radius * textPosition);
|
||||
|
||||
if (look !== 'handDrawn') {
|
||||
group
|
||||
.append('circle')
|
||||
.attr('cx', 0)
|
||||
.attr('cy', 0)
|
||||
.attr('r', radius + outerStrokeWidth / 2)
|
||||
.attr('class', 'pieOuterCircle');
|
||||
}
|
||||
group
|
||||
.append('circle')
|
||||
.attr('cx', 0)
|
||||
.attr('cy', 0)
|
||||
.attr('r', radius + outerStrokeWidth / 2)
|
||||
.attr('class', 'pieOuterCircle');
|
||||
|
||||
const sections: Sections = db.getSections();
|
||||
const arcs: d3.PieArcDatum<D3Section>[] = createPieArcs(sections);
|
||||
|
||||
@@ -10,9 +10,6 @@ export const diagram: DiagramDefinition = {
|
||||
get db() {
|
||||
return new RequirementDB();
|
||||
},
|
||||
capabilities: {
|
||||
handDrawn: true,
|
||||
},
|
||||
renderer,
|
||||
styles,
|
||||
};
|
||||
|
||||
@@ -10,9 +10,6 @@ export const diagram: DiagramDefinition = {
|
||||
get db() {
|
||||
return new StateDB(2);
|
||||
},
|
||||
capabilities: {
|
||||
handDrawn: true,
|
||||
},
|
||||
renderer,
|
||||
styles,
|
||||
init: (cnf) => {
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import type { MarkdownOptions } from 'vitepress';
|
||||
import { defineConfig } from 'vitepress';
|
||||
import packageJson from '../../../package.json' assert { type: 'json' };
|
||||
import packageJson from '../../../package.json' with { type: 'json' };
|
||||
import { addCanonicalUrls } from './canonical-urls.js';
|
||||
import MermaidExample from './mermaid-markdown-all.js';
|
||||
|
||||
|
||||
@@ -52,6 +52,8 @@ To add an integration to this list, see the [Integrations - create page](./integ
|
||||
- [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) ✅
|
||||
- [GNU Octave](https://octave.org/) ✅
|
||||
- [octave_mermaid_js](https://github.com/CNOCTAVE/octave_mermaid_js) ✅
|
||||
- [Mermaid Plugin for JetBrains IDEs](https://plugins.jetbrains.com/plugin/20146-mermaid)
|
||||
- [MonsterWriter](https://www.monsterwriter.com/) ✅
|
||||
- [Joplin](https://joplinapp.org) ✅
|
||||
|
||||
@@ -21,18 +21,18 @@
|
||||
"font-awesome": "^4.7.0",
|
||||
"jiti": "^2.4.2",
|
||||
"mermaid": "workspace:^",
|
||||
"vue": "^3.5.21"
|
||||
"vue": "^3.5.23"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@iconify-json/carbon": "^1.2.13",
|
||||
"@unocss/reset": "^66.5.1",
|
||||
"@vite-pwa/vitepress": "^1.0.0",
|
||||
"@iconify-json/carbon": "^1.2.14",
|
||||
"@unocss/reset": "^66.5.4",
|
||||
"@vite-pwa/vitepress": "^1.0.1",
|
||||
"@vitejs/plugin-vue": "^6.0.1",
|
||||
"fast-glob": "^3.3.3",
|
||||
"https-localhost": "^4.7.1",
|
||||
"pathe": "^2.0.3",
|
||||
"unocss": "^66.5.1",
|
||||
"unplugin-vue-components": "^28.4.1",
|
||||
"unocss": "^66.5.4",
|
||||
"unplugin-vue-components": "^28.8.0",
|
||||
"vite": "^7.0.7",
|
||||
"vite-plugin-pwa": "^1.0.3",
|
||||
"vitepress": "1.6.4",
|
||||
|
||||
@@ -7,7 +7,6 @@ import { select } from 'd3';
|
||||
import { compile, serialize, stringify } from 'stylis';
|
||||
import DOMPurify from 'dompurify';
|
||||
import isEmpty from 'lodash-es/isEmpty.js';
|
||||
import packageJson from '../package.json' with { type: 'json' };
|
||||
import { addSVGa11yTitleDescription, setA11yDiagramInfo } from './accessibility.js';
|
||||
import assignWithDepth from './assignWithDepth.js';
|
||||
import * as configApi from './config.js';
|
||||
@@ -421,12 +420,12 @@ const render = async function (
|
||||
// -------------------------------------------------------------------------------
|
||||
// Draw the diagram with the renderer
|
||||
try {
|
||||
await diag.renderer.draw(text, id, packageJson.version, diag);
|
||||
await diag.renderer.draw(text, id, injected.version, diag);
|
||||
} catch (e) {
|
||||
if (config.suppressErrorRendering) {
|
||||
removeTempElements();
|
||||
} else {
|
||||
errorRenderer.draw(text, id, packageJson.version);
|
||||
errorRenderer.draw(text, id, injected.version);
|
||||
}
|
||||
throw e;
|
||||
}
|
||||
@@ -445,29 +444,6 @@ const render = async function (
|
||||
|
||||
log.debug('config.arrowMarkerAbsolute', config.arrowMarkerAbsolute);
|
||||
svgCode = cleanUpSvgCode(svgCode, isSandboxed, evaluate(config.arrowMarkerAbsolute));
|
||||
if (config.look === 'handDrawn' && !diag.capabilities?.handDrawn && includeLargeFeatures) {
|
||||
const { OutputType, Svg2Roughjs } = await import('svg2roughjs');
|
||||
const svg2roughjs = new Svg2Roughjs(enclosingDivID_selector, OutputType.SVG, {
|
||||
seed: config.handDrawnSeed,
|
||||
});
|
||||
const graphDiv = document.querySelector<SVGSVGElement>(idSelector)!;
|
||||
svg2roughjs.svg = graphDiv;
|
||||
await svg2roughjs.sketch();
|
||||
graphDiv.remove();
|
||||
const sketch = document.querySelector<SVGSVGElement>(`${enclosingDivID_selector} > svg`);
|
||||
if (!sketch) {
|
||||
throw new Error('sketch not found');
|
||||
}
|
||||
const height = sketch.getAttribute('height');
|
||||
const width = sketch.getAttribute('width');
|
||||
|
||||
sketch.setAttribute('id', id);
|
||||
sketch.removeAttribute('height');
|
||||
sketch.setAttribute('width', '100%');
|
||||
sketch.setAttribute('viewBox', `0 0 ${width} ${height}`);
|
||||
|
||||
svgCode = sketch.outerHTML;
|
||||
}
|
||||
|
||||
if (isSandboxed) {
|
||||
const svgEl = root.select(enclosingDivID_selector + ' svg').node();
|
||||
|
||||
@@ -42,7 +42,7 @@ const registerDefaultLayoutLoaders = () => {
|
||||
name: 'dagre',
|
||||
loader: async () => await import('./layout-algorithms/dagre/index.js'),
|
||||
},
|
||||
...(includeLargeFeatures
|
||||
...(injected.includeLargeFeatures
|
||||
? [
|
||||
{
|
||||
name: 'cose-bilkent',
|
||||
|
||||
@@ -1,8 +1,9 @@
|
||||
import { labelHelper, updateNodeBounds, getNodeClasses, createPathFromPoints } from './util.js';
|
||||
import { labelHelper, updateNodeBounds, getNodeClasses } from './util.js';
|
||||
import intersect from '../intersect/index.js';
|
||||
import type { Node } from '../../types.js';
|
||||
import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
|
||||
import rough from 'roughjs';
|
||||
import { insertPolygonShape } from './insertPolygonShape.js';
|
||||
import type { D3Selection } from '../../../types.js';
|
||||
|
||||
export const createHexagonPathD = (
|
||||
@@ -28,50 +29,42 @@ export async function hexagon<T extends SVGGraphicsElement>(parent: D3Selection<
|
||||
node.labelStyle = labelStyles;
|
||||
const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node));
|
||||
|
||||
const h = bbox.height + (node.padding ?? 0);
|
||||
const w = bbox.width + (node.padding ?? 0) * 2.5;
|
||||
const { cssStyles } = node;
|
||||
// @ts-expect-error -- Passing a D3.Selection seems to work for some reason
|
||||
const rc = rough.svg(shapeSvg);
|
||||
const options = userNodeOverrides(node, {});
|
||||
|
||||
if (node.look !== 'handDrawn') {
|
||||
options.roughness = 0;
|
||||
options.fillStyle = 'solid';
|
||||
}
|
||||
|
||||
let halfWidth = w / 2;
|
||||
const m = halfWidth / 6; // Margin for label
|
||||
halfWidth = halfWidth + m; // Adjusted half width for hexagon
|
||||
|
||||
const halfHeight = h / 2;
|
||||
|
||||
const fixedLength = halfHeight / 2;
|
||||
const deducedWidth = halfWidth - fixedLength;
|
||||
|
||||
const f = 4;
|
||||
const h = bbox.height + node.padding;
|
||||
const m = h / f;
|
||||
const w = bbox.width + 2 * m + node.padding;
|
||||
const points = [
|
||||
{ x: -deducedWidth, y: -halfHeight },
|
||||
{ x: 0, y: -halfHeight },
|
||||
{ x: deducedWidth, y: -halfHeight },
|
||||
{ x: halfWidth, y: 0 },
|
||||
{ x: deducedWidth, y: halfHeight },
|
||||
{ x: 0, y: halfHeight },
|
||||
{ x: -deducedWidth, y: halfHeight },
|
||||
{ x: -halfWidth, y: 0 },
|
||||
{ x: m, y: 0 },
|
||||
{ x: w - m, y: 0 },
|
||||
{ x: w, y: -h / 2 },
|
||||
{ x: w - m, y: -h },
|
||||
{ x: m, y: -h },
|
||||
{ x: 0, y: -h / 2 },
|
||||
];
|
||||
|
||||
const pathData = createPathFromPoints(points);
|
||||
const shapeNode = rc.path(pathData, options);
|
||||
let polygon: D3Selection<SVGGElement> | Awaited<ReturnType<typeof insertPolygonShape>>;
|
||||
const { cssStyles } = node;
|
||||
|
||||
const polygon = shapeSvg.insert(() => shapeNode, ':first-child');
|
||||
polygon.attr('class', 'basic label-container');
|
||||
if (node.look === 'handDrawn') {
|
||||
// @ts-expect-error -- Passing a D3.Selection seems to work for some reason
|
||||
const rc = rough.svg(shapeSvg);
|
||||
const options = userNodeOverrides(node, {});
|
||||
const pathData = createHexagonPathD(0, 0, w, h, m);
|
||||
const roughNode = rc.path(pathData, options);
|
||||
|
||||
if (cssStyles && node.look !== 'handDrawn') {
|
||||
polygon.selectChildren('path').attr('style', cssStyles);
|
||||
polygon = shapeSvg
|
||||
.insert(() => roughNode, ':first-child')
|
||||
.attr('transform', `translate(${-w / 2}, ${h / 2})`);
|
||||
|
||||
if (cssStyles) {
|
||||
polygon.attr('style', cssStyles);
|
||||
}
|
||||
} else {
|
||||
polygon = insertPolygonShape(shapeSvg, w, h, points);
|
||||
}
|
||||
|
||||
if (nodeStyles && node.look !== 'handDrawn') {
|
||||
polygon.selectChildren('path').attr('style', nodeStyles);
|
||||
if (nodeStyles) {
|
||||
polygon.attr('style', nodeStyles);
|
||||
}
|
||||
|
||||
node.width = w;
|
||||
|
||||
@@ -1,161 +1,18 @@
|
||||
import { labelHelper, updateNodeBounds, getNodeClasses, createPathFromPoints } from './util.js';
|
||||
import intersect from '../intersect/index.js';
|
||||
import type { Node } from '../../types.js';
|
||||
import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
|
||||
import rough from 'roughjs';
|
||||
import type { Node, RectOptions } from '../../types.js';
|
||||
import type { D3Selection } from '../../../types.js';
|
||||
|
||||
/**
|
||||
* Generates evenly spaced points along an elliptical arc connecting two points.
|
||||
*
|
||||
* @param x1 - x-coordinate of the start point of the arc
|
||||
* @param y1 - y-coordinate of the start point of the arc
|
||||
* @param x2 - x-coordinate of the end point of the arc
|
||||
* @param y2 - y-coordinate of the end point of the arc
|
||||
* @param rx - horizontal radius of the ellipse
|
||||
* @param ry - vertical radius of the ellipse
|
||||
* @param clockwise - direction of the arc; true for clockwise, false for counterclockwise
|
||||
* @returns Array of points `{ x, y }` along the elliptical arc
|
||||
*
|
||||
* @throws Error if the given radii are too small to draw an arc between the points
|
||||
*/
|
||||
export function generateArcPoints(
|
||||
x1: number,
|
||||
y1: number,
|
||||
x2: number,
|
||||
y2: number,
|
||||
rx: number,
|
||||
ry: number,
|
||||
clockwise: boolean
|
||||
) {
|
||||
const numPoints = 20;
|
||||
// Calculate midpoint
|
||||
const midX = (x1 + x2) / 2;
|
||||
const midY = (y1 + y2) / 2;
|
||||
|
||||
// Calculate the angle of the line connecting the points
|
||||
const angle = Math.atan2(y2 - y1, x2 - x1);
|
||||
|
||||
// Calculate transformed coordinates for the ellipse
|
||||
const dx = (x2 - x1) / 2;
|
||||
const dy = (y2 - y1) / 2;
|
||||
|
||||
// Scale to unit circle
|
||||
const transformedX = dx / rx;
|
||||
const transformedY = dy / ry;
|
||||
|
||||
// Calculate the distance between points on the unit circle
|
||||
const distance = Math.sqrt(transformedX ** 2 + transformedY ** 2);
|
||||
|
||||
// Check if the ellipse can be drawn with the given radii
|
||||
if (distance > 1) {
|
||||
throw new Error('The given radii are too small to create an arc between the points.');
|
||||
}
|
||||
|
||||
// Calculate the distance from the midpoint to the center of the ellipse
|
||||
const scaledCenterDistance = Math.sqrt(1 - distance ** 2);
|
||||
|
||||
// Calculate the center of the ellipse
|
||||
const centerX = midX + scaledCenterDistance * ry * Math.sin(angle) * (clockwise ? -1 : 1);
|
||||
const centerY = midY - scaledCenterDistance * rx * Math.cos(angle) * (clockwise ? -1 : 1);
|
||||
|
||||
// Calculate the start and end angles on the ellipse
|
||||
const startAngle = Math.atan2((y1 - centerY) / ry, (x1 - centerX) / rx);
|
||||
const endAngle = Math.atan2((y2 - centerY) / ry, (x2 - centerX) / rx);
|
||||
|
||||
// Adjust angles for clockwise/counterclockwise
|
||||
let angleRange = endAngle - startAngle;
|
||||
if (clockwise && angleRange < 0) {
|
||||
angleRange += 2 * Math.PI;
|
||||
}
|
||||
if (!clockwise && angleRange > 0) {
|
||||
angleRange -= 2 * Math.PI;
|
||||
}
|
||||
|
||||
// Generate points
|
||||
const points = [];
|
||||
for (let i = 0; i < numPoints; i++) {
|
||||
const t = i / (numPoints - 1);
|
||||
const angle = startAngle + t * angleRange;
|
||||
const x = centerX + rx * Math.cos(angle);
|
||||
const y = centerY + ry * Math.sin(angle);
|
||||
points.push({ x, y });
|
||||
}
|
||||
|
||||
return points;
|
||||
}
|
||||
import { drawRect } from './drawRect.js';
|
||||
|
||||
export async function roundedRect<T extends SVGGraphicsElement>(
|
||||
parent: D3Selection<T>,
|
||||
node: Node
|
||||
) {
|
||||
const { labelStyles, nodeStyles } = styles2String(node);
|
||||
node.labelStyle = labelStyles;
|
||||
const { shapeSvg, bbox } = await labelHelper(parent, node, getNodeClasses(node));
|
||||
const options = {
|
||||
rx: 5,
|
||||
ry: 5,
|
||||
classes: '',
|
||||
labelPaddingX: (node?.padding || 0) * 1,
|
||||
labelPaddingY: (node?.padding || 0) * 1,
|
||||
} as RectOptions;
|
||||
|
||||
const labelPaddingX = node?.padding ?? 0;
|
||||
const labelPaddingY = node?.padding ?? 0;
|
||||
|
||||
const w = (node?.width ? node?.width : bbox.width) + labelPaddingX * 2;
|
||||
const h = (node?.height ? node?.height : bbox.height) + labelPaddingY * 2;
|
||||
const radius = node.radius || 5;
|
||||
const taper = node.taper || 5; // Taper width for the rounded corners
|
||||
const { cssStyles } = node;
|
||||
// @ts-expect-error -- Passing a D3.Selection seems to work for some reason
|
||||
const rc = rough.svg(shapeSvg);
|
||||
const options = userNodeOverrides(node, {});
|
||||
if (node.stroke) {
|
||||
options.stroke = node.stroke;
|
||||
}
|
||||
if (node.look !== 'handDrawn') {
|
||||
options.roughness = 0;
|
||||
options.fillStyle = 'solid';
|
||||
}
|
||||
const points = [
|
||||
// Top edge (left to right)
|
||||
{ x: -w / 2 + taper, y: -h / 2 }, // Top-left corner start (1)
|
||||
{ x: w / 2 - taper, y: -h / 2 }, // Top-right corner start (2)
|
||||
|
||||
...generateArcPoints(w / 2 - taper, -h / 2, w / 2, -h / 2 + taper, radius, radius, true), // Top-left arc (2 to 3)
|
||||
|
||||
// Right edge (top to bottom)
|
||||
{ x: w / 2, y: -h / 2 + taper }, // Top-right taper point (3)
|
||||
{ x: w / 2, y: h / 2 - taper }, // Bottom-right taper point (4)
|
||||
|
||||
...generateArcPoints(w / 2, h / 2 - taper, w / 2 - taper, h / 2, radius, radius, true), // Top-left arc (4 to 5)
|
||||
|
||||
// Bottom edge (right to left)
|
||||
{ x: w / 2 - taper, y: h / 2 }, // Bottom-right corner start (5)
|
||||
{ x: -w / 2 + taper, y: h / 2 }, // Bottom-left corner start (6)
|
||||
|
||||
...generateArcPoints(-w / 2 + taper, h / 2, -w / 2, h / 2 - taper, radius, radius, true), // Top-left arc (4 to 5)
|
||||
|
||||
// Left edge (bottom to top)
|
||||
{ x: -w / 2, y: h / 2 - taper }, // Bottom-left taper point (7)
|
||||
{ x: -w / 2, y: -h / 2 + taper }, // Top-left taper point (8)
|
||||
...generateArcPoints(-w / 2, -h / 2 + taper, -w / 2 + taper, -h / 2, radius, radius, true), // Top-left arc (4 to 5)
|
||||
];
|
||||
|
||||
const pathData = createPathFromPoints(points);
|
||||
const shapeNode = rc.path(pathData, options);
|
||||
|
||||
const polygon = shapeSvg.insert(() => shapeNode, ':first-child');
|
||||
polygon.attr('class', 'basic label-container outer-path');
|
||||
|
||||
if (cssStyles && node.look !== 'handDrawn') {
|
||||
polygon.selectChildren('path').attr('style', cssStyles);
|
||||
}
|
||||
|
||||
if (nodeStyles && node.look !== 'handDrawn') {
|
||||
polygon.selectChildren('path').attr('style', nodeStyles);
|
||||
}
|
||||
|
||||
updateNodeBounds(node, polygon);
|
||||
|
||||
node.intersect = function (point) {
|
||||
const pos = intersect.polygon(node, points, point);
|
||||
return pos;
|
||||
};
|
||||
|
||||
return shapeSvg;
|
||||
return drawRect(parent, node, options);
|
||||
}
|
||||
|
||||
5
packages/mermaid/src/type.d.ts
vendored
5
packages/mermaid/src/type.d.ts
vendored
@@ -1,2 +1,5 @@
|
||||
// eslint-disable-next-line no-var
|
||||
declare var includeLargeFeatures: boolean;
|
||||
declare var injected: {
|
||||
version: string;
|
||||
includeLargeFeatures: boolean;
|
||||
};
|
||||
|
||||
3305
pnpm-lock.yaml
generated
3305
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
@@ -35,7 +35,8 @@ export default defineConfig({
|
||||
},
|
||||
define: {
|
||||
// Needs to be string
|
||||
includeLargeFeatures: 'true',
|
||||
'injected.includeLargeFeatures': 'true',
|
||||
'import.meta.vitest': 'undefined',
|
||||
packageVersion: "'0.0.0'",
|
||||
},
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user