Merge remote-tracking branch 'origin/release/10.3.1'

* origin/release/10.3.1: (85 commits)
  Version update and adjusted error diagram
  Fix for broker error diagram related #4178
  Adding new flowchart tests related to issue #2139
  Fix for interim issue with classes in state diagrams
  use default export in `error` diagram
  create `ParserDefinition` type
  standardized `error` diagram'
  #2139 Applying user defined classes properly when calculating shape width
  style: format packages/mermaid/src/config.type.ts
  build(types): use prettier conf on config.types.ts
  Syntax Update CONTRIBUTING.md
  docs: Correct detectType filename
  chore: Minor cleanups
  chore: remove comment
  chore: Remove comments, cleanup
  fix!(deps): fix zenuml style leakage. update @zenuml/core to ^3.0.6 to fix the style leakage.
  Update selectSvgElement.ts
  create `Group` type
  Add specialChars in textNoTagsToken, alphaNumToken
  Return Unicode Text to idStringToken definition
  ...
This commit is contained in:
Sidharth Vinod 2023-08-12 17:04:06 +05:30
commit aa34b99203
No known key found for this signature in database
GPG Key ID: FB5CCD378D3907CD
66 changed files with 1214 additions and 1123 deletions

44
.github/lychee.toml vendored Normal file
View File

@ -0,0 +1,44 @@
############################# Display #############################
# Verbose program output
# Accepts log level: "error", "warn", "info", "debug", "trace"
verbose = "debug"
# Don't show interactive progress bar while checking links.
no_progress = true
############################# Cache ###############################
# Enable link caching. This can be helpful to avoid checking the same links on
# multiple runs.
cache = true
# Discard all cached requests older than this duration.
max_cache_age = "1d"
############################# Requests ############################
# Comma-separated list of accepted status codes for valid links.
accept = [200, 429]
############################# Exclusions ##########################
# Exclude URLs and mail addresses from checking (supports regex).
exclude = [
# Network error: Forbidden
"https://codepen.io",
# Timeout error, maybe Twitter has anti-bot defenses against GitHub's CI servers?
"https://twitter.com/mermaidjs_",
# 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/"
]
# Exclude all private IPs from checking.
# Equivalent to setting `exclude_private`, `exclude_link_local`, and
# `exclude_loopback` to true.
exclude_all_private = true

View File

@ -20,7 +20,7 @@ on:
- cron: '30 8 * * *'
jobs:
linkChecker:
link-checker:
runs-on: ubuntu-latest
permissions:
# lychee only uses the GITHUB_TOKEN to avoid rate-limiting
@ -39,10 +39,7 @@ jobs:
uses: lycheeverse/lychee-action@v1.8.0
with:
args: >-
--verbose
--no-progress
--cache
--max-cache-age 1d
--config .github/lychee.toml
packages/mermaid/src/docs/**/*.md
README.md
README.zh-CN.md

View File

@ -1,18 +0,0 @@
# These links are ignored by our link checker https://github.com/lycheeverse/lychee
# The file allows you to list multiple regular expressions for exclusion (one pattern per line).
# Network error: Forbidden
https://codepen.io
# Timeout error, maybe Twitter has anti-bot defenses against GitHub's CI servers?
https://twitter.com/mermaidjs_
# Don't check files that are generated during the build via `pnpm docs:code`
packages/mermaid/src/docs/config/setup/*
# Ignore localhost
http://localhost:3333/
http://localhost:9000/
# Ignore slack invite
https://join.slack.com/

View File

@ -69,7 +69,7 @@ eg: `feature/2945_state-diagram-new-arrow-florbs`, `bug/1123_fix_random_ugly_red
Documentation is necessary for all non bugfix/refactoring changes.
Only make changes to files are in [`/packages/mermaid/src/docs`](packages/mermaid/src/docs)
Only make changes to files that are in [`/packages/mermaid/src/docs`](packages/mermaid/src/docs)
**_DO NOT CHANGE FILES IN `/docs`_**

View File

@ -449,7 +449,7 @@ flowchart TD
{ htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
);
});
it('65: text-color from classes', () => {
it('65-1: text-color from classes', () => {
imgSnapshotTest(
`
flowchart LR
@ -460,6 +460,31 @@ flowchart TD
{ htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
);
});
it('65-2: bold text from classes', () => {
imgSnapshotTest(
`
flowchart
classDef cat fill:#f9d5e5, stroke:#233d4d,stroke-width:2px, font-weight:bold;
CS(A long bold text to be viewed):::cat
`,
{ htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
);
});
it('65-3: bigger font from classes', () => {
imgSnapshotTest(
`
flowchart
Node1:::class1 --> Node2:::class2
Node1:::class1 --> Node3:::class2
Node3 --> Node4((I am a circle)):::larger
classDef class1 fill:lightblue
classDef class2 fill:pink
classDef larger font-size:30px,fill:yellow
`,
{ htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
);
});
it('66: More nested subgraph cases (TB)', () => {
imgSnapshotTest(
`

View File

@ -891,4 +891,27 @@ graph TD
{ htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
);
});
it('66: apply class called default on node called default', () => {
imgSnapshotTest(
`
graph TD
classDef default fill:#a34,stroke:#000,stroke-width:4px,color:#fff
hello --> default
`,
{ htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
);
});
it('67: should be able to style default node independently', () => {
imgSnapshotTest(
`
flowchart TD
classDef default fill:#a34
hello --> default
style default stroke:#000,stroke-width:4px
`,
{ htmlLabels: true, flowchart: { htmlLabels: true }, securityLevel: 'loose' }
);
});
});

View File

@ -58,12 +58,21 @@
</head>
<body>
<pre id="diagram" class="mermaid">
---
title: Simple flowchart with invisible edges
---
flowchart TD
A ~~~ B
</pre
flowchart
classDef mainCategories fill:#f9d5e5, stroke:#233d4d,stroke-width:2px, font-weight:bold;
CS(Customer Awareness Journey):::mainCategories
</pre
>
<pre id="diagram" class="mermaid">
flowchart
Node1:::class1 --> Node2:::class2
Node1:::class1 --> Node3:::class2
Node3 --> Node4((I am a circle)):::larger
classDef class1 fill:lightblue
classDef class2 fill:pink
classDef larger font-size:30px,fill:yellow
</pre
>
<pre id="diagram" class="mermaid2">
stateDiagram-v2

View File

@ -10,7 +10,7 @@
#### Grammar
This would be to define a jison grammar for the new diagram type. That should start with a way to identify that the text in the mermaid tag is a diagram of that type. Create a new folder under diagrams for your new diagram type and a parser folder in it. This leads us to step 2.
This would be to define a JISON grammar for the new diagram type. That should start with a way to identify that the text in the mermaid tag is a diagram of that type. Create a new folder under diagrams for your new diagram type and a parser folder in it. This leads us to step 2.
For instance:
@ -60,7 +60,7 @@ Place the renderer in the diagram folder.
### Step 3: Detection of the new diagram type
The second thing to do is to add the capability to detect the new diagram to type to the detectType in utils.js. The detection should return a key for the new diagram type.
The second thing to do is to add the capability to detect the new diagram to type to the detectType in `diagram-api/detectType.ts`. The detection should return a key for the new diagram type.
[This key will be used to as the aria roledescription](#aria-roledescription), so it should be a word that clearly describes the diagram type.
For example, if your new diagram use a UML deployment diagram, a good key would be "UMLDeploymentDiagram" because assistive technologies such as a screen reader
would voice that as "U-M-L Deployment diagram." Another good key would be "deploymentDiagram" because that would be voiced as "Deployment Diagram." A bad key would be "deployment" because that would not sufficiently describe the diagram.
@ -124,53 +124,6 @@ There are a few features that are common between the different types of diagrams
Here some pointers on how to handle these different areas.
#### [Directives](../config/directives.md)
Here is example handling from flowcharts:
Jison:
```jison
/* lexical grammar */
%lex
%x open_directive
%x type_directive
%x arg_directive
%x close_directive
\%\%\{ { this.begin('open_directive'); return 'open_directive'; }
<open_directive>((?:(?!\}\%\%)[^:.])*) { this.begin('type_directive'); return 'type_directive'; }
<type_directive>":" { this.popState(); this.begin('arg_directive'); return ':'; }
<type_directive,arg_directive>\}\%\% { this.popState(); this.popState(); return 'close_directive'; }
<arg_directive>((?:(?!\}\%\%).|\n)*) return 'arg_directive';
/* language grammar */
/* ... */
directive
: openDirective typeDirective closeDirective separator
| openDirective typeDirective ':' argDirective closeDirective separator
;
openDirective
: open_directive { yy.parseDirective('%%{', 'open_directive'); }
;
typeDirective
: type_directive { yy.parseDirective($1, 'type_directive'); }
;
argDirective
: arg_directive { $1 = $1.trim().replace(/'/g, '"'); yy.parseDirective($1, 'arg_directive'); }
;
closeDirective
: close_directive { yy.parseDirective('}%%', 'close_directive', 'flowchart'); }
;
```
It is probably a good idea to keep the handling similar to this in your new diagram. The parseDirective function is provided by the mermaidAPI.
## Accessibility
Mermaid automatically adds the following accessibility information for the diagram SVG HTML element:
@ -189,7 +142,7 @@ See [the definition of aria-roledescription](https://www.w3.org/TR/wai-aria-1.1/
The syntax for accessible titles and descriptions is described in [the Accessibility documenation section.](../config/accessibility.md)
In a similar way to the directives, the jison syntax are quite similar between the diagrams.
As a design goal, the jison syntax should be similar between the diagrams.
```jison

View File

@ -96,7 +96,7 @@ mermaid.initialize(config);
#### Defined in
[mermaidAPI.ts:667](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L667)
[mermaidAPI.ts:668](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L668)
## Functions
@ -127,7 +127,7 @@ Return the last node appended
#### Defined in
[mermaidAPI.ts:308](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L308)
[mermaidAPI.ts:309](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L309)
---
@ -153,7 +153,7 @@ the cleaned up svgCode
#### Defined in
[mermaidAPI.ts:256](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L256)
[mermaidAPI.ts:255](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L255)
---
@ -179,7 +179,7 @@ the string with all the user styles
#### Defined in
[mermaidAPI.ts:185](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L185)
[mermaidAPI.ts:184](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L184)
---
@ -202,7 +202,7 @@ the string with all the user styles
#### Defined in
[mermaidAPI.ts:233](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L233)
[mermaidAPI.ts:232](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L232)
---
@ -229,7 +229,7 @@ with an enclosing block that has each of the cssClasses followed by !important;
#### Defined in
[mermaidAPI.ts:169](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L169)
[mermaidAPI.ts:168](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L168)
---
@ -249,7 +249,7 @@ with an enclosing block that has each of the cssClasses followed by !important;
#### Defined in
[mermaidAPI.ts:155](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L155)
[mermaidAPI.ts:154](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L154)
---
@ -269,7 +269,7 @@ with an enclosing block that has each of the cssClasses followed by !important;
#### Defined in
[mermaidAPI.ts:126](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L126)
[mermaidAPI.ts:125](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L125)
---
@ -295,7 +295,7 @@ Put the svgCode into an iFrame. Return the iFrame code
#### Defined in
[mermaidAPI.ts:287](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L287)
[mermaidAPI.ts:286](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L286)
---
@ -320,4 +320,4 @@ Remove any existing elements from the given document
#### Defined in
[mermaidAPI.ts:358](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L358)
[mermaidAPI.ts:359](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaidAPI.ts#L359)

View File

@ -608,12 +608,12 @@ It is possible to escape characters using the syntax exemplified here.
```mermaid-example
flowchart LR
A["A double quote:#quot;"] -->B["A dec char:#9829;"]
A["A double quote:#quot;"] --> B["A dec char:#9829;"]
```
```mermaid
flowchart LR
A["A double quote:#quot;"] -->B["A dec char:#9829;"]
A["A double quote:#quot;"] --> B["A dec char:#9829;"]
```
Numbers given are base 10, so `#` can be encoded as `#35;`. It is also supported to use HTML character names.

View File

@ -4,7 +4,7 @@
"version": "10.2.4",
"description": "Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
"type": "module",
"packageManager": "pnpm@8.6.10",
"packageManager": "pnpm@8.6.11",
"keywords": [
"diagram",
"markdown",
@ -109,7 +109,7 @@
"lint-staged": "^13.2.1",
"nyc": "^15.1.0",
"path-browserify": "^1.0.1",
"pnpm": "^8.3.1",
"pnpm": "^8.6.8",
"prettier": "^2.8.8",
"prettier-plugin-jsdoc": "^0.4.2",
"rimraf": "^5.0.0",

View File

@ -38,7 +38,7 @@
]
},
"dependencies": {
"@braintree/sanitize-url": "^6.0.0",
"@braintree/sanitize-url": "^6.0.1",
"cytoscape": "^3.23.0",
"cytoscape-cose-bilkent": "^4.1.0",
"cytoscape-fcose": "^2.1.0",

View File

@ -33,7 +33,7 @@
],
"license": "MIT",
"dependencies": {
"@zenuml/core": "^3.0.3"
"@zenuml/core": "^3.0.6"
},
"devDependencies": {
"mermaid": "workspace:^"

View File

@ -1,6 +1,6 @@
{
"name": "mermaid",
"version": "10.3.0",
"version": "10.3.1",
"description": "Markdown-ish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
"type": "module",
"module": "./dist/mermaid.core.mjs",
@ -58,7 +58,7 @@
]
},
"dependencies": {
"@braintree/sanitize-url": "^6.0.2",
"@braintree/sanitize-url": "^6.0.1",
"@types/d3-scale": "^4.0.3",
"@types/d3-scale-chromatic": "^3.0.0",
"cytoscape": "^3.23.0",
@ -68,7 +68,7 @@
"d3-sankey": "^0.12.3",
"dagre-d3-es": "7.0.10",
"dayjs": "^1.11.7",
"dompurify": "3.0.5",
"dompurify": "^3.0.5",
"elkjs": "^0.8.2",
"khroma": "^2.0.0",
"lodash-es": "^4.17.21",

View File

@ -18,6 +18,7 @@ import { promisify } from 'node:util';
import { load, JSON_SCHEMA } from 'js-yaml';
import { compile, type JSONSchema } from 'json-schema-to-typescript';
import prettier from 'prettier';
import _Ajv2019, { type JSONSchemaType } from 'ajv/dist/2019.js';
@ -207,6 +208,7 @@ async function generateTypescript(mermaidConfigSchema: JSONSchemaType<MermaidCon
{
additionalProperties: false, // in JSON Schema 2019-09, these are called `unevaluatedProperties`
unreachableDefinitions: true, // definition for FontConfig is unreachable
style: (await prettier.resolveConfig('.')) ?? {},
}
);

View File

@ -4,8 +4,9 @@ import { getDiagram, registerDiagram } from './diagram-api/diagramAPI.js';
import { detectType, getDiagramLoader } from './diagram-api/detectType.js';
import { extractFrontMatter } from './diagram-api/frontmatter.js';
import { UnknownDiagramError } from './errors.js';
import { DetailedError } from './utils.js';
import { cleanupComments } from './diagram-api/comments.js';
import type { DetailedError } from './utils.js';
import type { DiagramDefinition } from './diagram-api/types.js';
export type ParseErrorFunction = (err: string | DetailedError | unknown, hash?: any) => void;
@ -15,9 +16,11 @@ export type ParseErrorFunction = (err: string | DetailedError | unknown, hash?:
*/
export class Diagram {
type = 'graph';
parser;
renderer;
db;
parser: DiagramDefinition['parser'];
renderer: DiagramDefinition['renderer'];
db: DiagramDefinition['db'];
private init?: DiagramDefinition['init'];
private detectError?: UnknownDiagramError;
constructor(public text: string) {
this.text += '\n';
@ -32,7 +35,6 @@ export class Diagram {
log.debug('Type ' + this.type);
// Setup diagram
this.db = diagram.db;
this.db.clear?.();
this.renderer = diagram.renderer;
this.parser = diagram.parser;
const originalParse = this.parser.parse.bind(this.parser);
@ -49,10 +51,7 @@ export class Diagram {
originalParse(cleanupComments(extractFrontMatter(text, this.db)));
this.parser.parser.yy = this.db;
if (diagram.init) {
diagram.init(cnf);
log.info('Initialized diagram ' + this.type, cnf);
}
this.init = diagram.init;
this.parse();
}
@ -61,6 +60,7 @@ export class Diagram {
throw this.detectError;
}
this.db.clear?.();
this.init?.(configApi.getConfig());
this.parser.parse(this.text);
}

View File

@ -8,7 +8,7 @@
/**
* Configuration options to pass to the `dompurify` library.
*/
export type DOMPurifyConfiguration = import("dompurify").Config;
export type DOMPurifyConfiguration = import('dompurify').Config;
/**
* JavaScript function that returns a `FontConfig`.
*
@ -39,7 +39,7 @@ export type FontCalculator = () => Partial<FontConfig>;
* This interface was referenced by `MermaidConfig`'s JSON-Schema
* via the `definition` "SankeyLinkColor".
*/
export type SankeyLinkColor = "source" | "target" | "gradient";
export type SankeyLinkColor = 'source' | 'target' | 'gradient';
/**
* Controls the alignment of the Sankey diagrams.
*
@ -49,7 +49,7 @@ export type SankeyLinkColor = "source" | "target" | "gradient";
* This interface was referenced by `MermaidConfig`'s JSON-Schema
* via the `definition` "SankeyNodeAlignment".
*/
export type SankeyNodeAlignment = "left" | "right" | "center" | "justify";
export type SankeyNodeAlignment = 'left' | 'right' | 'center' | 'justify';
/**
* The font size to use
*/
@ -61,7 +61,7 @@ export interface MermaidConfig {
* You may also use `themeCSS` to override this value.
*
*/
theme?: string | "default" | "forest" | "dark" | "neutral" | "null";
theme?: string | 'default' | 'forest' | 'dark' | 'neutral' | 'null';
themeVariables?: any;
themeCSS?: string;
/**
@ -88,12 +88,12 @@ export interface MermaidConfig {
| 0
| 2
| 1
| "trace"
| "debug"
| "info"
| "warn"
| "error"
| "fatal"
| 'trace'
| 'debug'
| 'info'
| 'warn'
| 'error'
| 'fatal'
| 3
| 4
| 5
@ -101,7 +101,7 @@ export interface MermaidConfig {
/**
* Level of trust for parsed diagram
*/
securityLevel?: string | "strict" | "loose" | "antiscript" | "sandbox" | undefined;
securityLevel?: string | 'strict' | 'loose' | 'antiscript' | 'sandbox' | undefined;
/**
* Dictates whether mermaid starts on Page load
*/
@ -689,11 +689,11 @@ export interface QuadrantChartConfig extends BaseDiagramConfig {
/**
* position of x-axis labels
*/
xAxisPosition?: "top" | "bottom";
xAxisPosition?: 'top' | 'bottom';
/**
* position of y-axis labels
*/
yAxisPosition?: "left" | "right";
yAxisPosition?: 'left' | 'right';
/**
* stroke width of edges of the box that are inside the quadrant
*/
@ -723,7 +723,7 @@ export interface ErDiagramConfig extends BaseDiagramConfig {
/**
* Directional bias for layout of entities
*/
layoutDirection?: string | "TB" | "BT" | "LR" | "RL";
layoutDirection?: string | 'TB' | 'BT' | 'LR' | 'RL';
/**
* The minimum width of an entity box. Expressed in pixels.
*/
@ -788,7 +788,7 @@ export interface StateDiagramConfig extends BaseDiagramConfig {
* Decides which rendering engine that is to be used for the rendering.
*
*/
defaultRenderer?: string | "dagre-d3" | "dagre-wrapper" | "elk";
defaultRenderer?: string | 'dagre-d3' | 'dagre-wrapper' | 'elk';
}
/**
* This interface was referenced by `MermaidConfig`'s JSON-Schema
@ -812,7 +812,7 @@ export interface ClassDiagramConfig extends BaseDiagramConfig {
* Decides which rendering engine that is to be used for the rendering.
*
*/
defaultRenderer?: string | "dagre-d3" | "dagre-wrapper" | "elk";
defaultRenderer?: string | 'dagre-d3' | 'dagre-wrapper' | 'elk';
nodeSpacing?: number;
rankSpacing?: number;
/**
@ -872,7 +872,7 @@ export interface JourneyDiagramConfig extends BaseDiagramConfig {
/**
* Multiline message alignment
*/
messageAlign?: string | "left" | "center" | "right";
messageAlign?: string | 'left' | 'center' | 'right';
/**
* Prolongs the edge of the diagram downwards.
*
@ -951,7 +951,7 @@ export interface TimelineDiagramConfig extends BaseDiagramConfig {
/**
* Multiline message alignment
*/
messageAlign?: string | "left" | "center" | "right";
messageAlign?: string | 'left' | 'center' | 'right';
/**
* Prolongs the edge of the diagram downwards.
*
@ -1062,12 +1062,12 @@ export interface GanttDiagramConfig extends BaseDiagramConfig {
* Controls the display mode.
*
*/
displayMode?: string | "compact";
displayMode?: string | 'compact';
/**
* On which day a week-based interval should start
*
*/
weekday?: "monday" | "tuesday" | "wednesday" | "thursday" | "friday" | "saturday" | "sunday";
weekday?: 'monday' | 'tuesday' | 'wednesday' | 'thursday' | 'friday' | 'saturday' | 'sunday';
}
/**
* The object containing configurations specific for sequence diagrams
@ -1121,7 +1121,7 @@ export interface SequenceDiagramConfig extends BaseDiagramConfig {
/**
* Multiline message alignment
*/
messageAlign?: string | "left" | "center" | "right";
messageAlign?: string | 'left' | 'center' | 'right';
/**
* Mirror actors under diagram
*
@ -1178,7 +1178,7 @@ export interface SequenceDiagramConfig extends BaseDiagramConfig {
/**
* This sets the text alignment of actor-attached notes
*/
noteAlign?: string | "left" | "center" | "right";
noteAlign?: string | 'left' | 'center' | 'right';
/**
* This sets the font size of actor messages
*/
@ -1254,7 +1254,7 @@ export interface FlowchartDiagramConfig extends BaseDiagramConfig {
* Defines how mermaid renders curves for flowcharts.
*
*/
curve?: string | "basis" | "linear" | "cardinal";
curve?: string | 'basis' | 'linear' | 'cardinal';
/**
* Represents the padding between the labels and the shape
*
@ -1266,7 +1266,7 @@ export interface FlowchartDiagramConfig extends BaseDiagramConfig {
* Decides which rendering engine that is to be used for the rendering.
*
*/
defaultRenderer?: string | "dagre-d3" | "dagre-wrapper" | "elk";
defaultRenderer?: string | 'dagre-d3' | 'dagre-wrapper' | 'elk';
/**
* Width of nodes where text is wrapped.
*
@ -1296,7 +1296,7 @@ export interface SankeyDiagramConfig extends BaseDiagramConfig {
* See <https://github.com/d3/d3-sankey#alignments>.
*
*/
nodeAlignment?: "left" | "right" | "center" | "justify";
nodeAlignment?: 'left' | 'right' | 'center' | 'justify';
useMaxWidth?: boolean;
}
/**

View File

@ -8,8 +8,25 @@ import note from './shapes/note.js';
import { parseMember } from '../diagrams/class/svgDraw.js';
import { evaluate } from '../diagrams/common/common.js';
const formatClass = (str) => {
if (str) {
return ' ' + str;
}
return '';
};
const getClassesFromNode = (node, otherClasses) => {
return `${otherClasses ? otherClasses : 'node default'}${formatClass(node.classes)} ${formatClass(
node.class
)}`;
};
const question = async (parent, node) => {
const { shapeSvg, bbox } = await labelHelper(parent, node, undefined, true);
const { shapeSvg, bbox } = await labelHelper(
parent,
node,
getClassesFromNode(node, undefined),
true
);
const w = bbox.width + node.padding;
const h = bbox.height + node.padding;
@ -70,7 +87,12 @@ const choice = (parent, node) => {
};
const hexagon = async (parent, node) => {
const { shapeSvg, bbox } = await labelHelper(parent, node, undefined, true);
const { shapeSvg, bbox } = await labelHelper(
parent,
node,
getClassesFromNode(node, undefined),
true
);
const f = 4;
const h = bbox.height + node.padding;
@ -97,7 +119,12 @@ const hexagon = async (parent, node) => {
};
const rect_left_inv_arrow = async (parent, node) => {
const { shapeSvg, bbox } = await labelHelper(parent, node, undefined, true);
const { shapeSvg, bbox } = await labelHelper(
parent,
node,
getClassesFromNode(node, undefined),
true
);
const w = bbox.width + node.padding;
const h = bbox.height + node.padding;
@ -123,7 +150,7 @@ const rect_left_inv_arrow = async (parent, node) => {
};
const lean_right = async (parent, node) => {
const { shapeSvg, bbox } = await labelHelper(parent, node, undefined, true);
const { shapeSvg, bbox } = await labelHelper(parent, node, getClassesFromNode(node), true);
const w = bbox.width + node.padding;
const h = bbox.height + node.padding;
@ -146,7 +173,12 @@ const lean_right = async (parent, node) => {
};
const lean_left = async (parent, node) => {
const { shapeSvg, bbox } = await labelHelper(parent, node, undefined, true);
const { shapeSvg, bbox } = await labelHelper(
parent,
node,
getClassesFromNode(node, undefined),
true
);
const w = bbox.width + node.padding;
const h = bbox.height + node.padding;
@ -169,7 +201,12 @@ const lean_left = async (parent, node) => {
};
const trapezoid = async (parent, node) => {
const { shapeSvg, bbox } = await labelHelper(parent, node, undefined, true);
const { shapeSvg, bbox } = await labelHelper(
parent,
node,
getClassesFromNode(node, undefined),
true
);
const w = bbox.width + node.padding;
const h = bbox.height + node.padding;
@ -192,7 +229,12 @@ const trapezoid = async (parent, node) => {
};
const inv_trapezoid = async (parent, node) => {
const { shapeSvg, bbox } = await labelHelper(parent, node, undefined, true);
const { shapeSvg, bbox } = await labelHelper(
parent,
node,
getClassesFromNode(node, undefined),
true
);
const w = bbox.width + node.padding;
const h = bbox.height + node.padding;
@ -215,7 +257,12 @@ const inv_trapezoid = async (parent, node) => {
};
const rect_right_inv_arrow = async (parent, node) => {
const { shapeSvg, bbox } = await labelHelper(parent, node, undefined, true);
const { shapeSvg, bbox } = await labelHelper(
parent,
node,
getClassesFromNode(node, undefined),
true
);
const w = bbox.width + node.padding;
const h = bbox.height + node.padding;
@ -239,7 +286,12 @@ const rect_right_inv_arrow = async (parent, node) => {
};
const cylinder = async (parent, node) => {
const { shapeSvg, bbox } = await labelHelper(parent, node, undefined, true);
const { shapeSvg, bbox } = await labelHelper(
parent,
node,
getClassesFromNode(node, undefined),
true
);
const w = bbox.width + node.padding;
const rx = w / 2;
@ -314,7 +366,7 @@ const rect = async (parent, node) => {
const { shapeSvg, bbox, halfPadding } = await labelHelper(
parent,
node,
'node ' + node.classes,
'node ' + node.classes + ' ' + node.class,
true
);
@ -360,7 +412,7 @@ const rect = async (parent, node) => {
const labelRect = async (parent, node) => {
const { shapeSvg } = await labelHelper(parent, node, 'label', true);
log.trace('Classes = ', node.classes);
log.trace('Classes = ', node.class);
// add the rect
const rect = shapeSvg.insert('rect', ':first-child');
@ -545,7 +597,12 @@ const rectWithTitle = (parent, node) => {
};
const stadium = async (parent, node) => {
const { shapeSvg, bbox } = await labelHelper(parent, node, undefined, true);
const { shapeSvg, bbox } = await labelHelper(
parent,
node,
getClassesFromNode(node, undefined),
true
);
const h = bbox.height + node.padding;
const w = bbox.width + h / 4 + node.padding;
@ -571,7 +628,12 @@ const stadium = async (parent, node) => {
};
const circle = async (parent, node) => {
const { shapeSvg, bbox, halfPadding } = await labelHelper(parent, node, undefined, true);
const { shapeSvg, bbox, halfPadding } = await labelHelper(
parent,
node,
getClassesFromNode(node, undefined),
true
);
const circle = shapeSvg.insert('circle', ':first-child');
// center the circle around its coordinate
@ -596,7 +658,12 @@ const circle = async (parent, node) => {
};
const doublecircle = async (parent, node) => {
const { shapeSvg, bbox, halfPadding } = await labelHelper(parent, node, undefined, true);
const { shapeSvg, bbox, halfPadding } = await labelHelper(
parent,
node,
getClassesFromNode(node, undefined),
true
);
const gap = 5;
const circleGroup = shapeSvg.insert('g', ':first-child');
const outerCircle = circleGroup.insert('circle');
@ -634,7 +701,12 @@ const doublecircle = async (parent, node) => {
};
const subroutine = async (parent, node) => {
const { shapeSvg, bbox } = await labelHelper(parent, node, undefined, true);
const { shapeSvg, bbox } = await labelHelper(
parent,
node,
getClassesFromNode(node, undefined),
true
);
const w = bbox.width + node.padding;
const h = bbox.height + node.padding;

View File

@ -13,6 +13,7 @@ export const labelHelper = async (parent, node, _classes, isNode) => {
} else {
classes = _classes;
}
// Add outer g element
const shapeSvg = parent
.insert('g')
@ -49,7 +50,6 @@ export const labelHelper = async (parent, node, _classes, isNode) => {
)
);
}
// Get the size of the label
let bbox = text.getBBox();
const halfPadding = node.padding / 2;

View File

@ -35,7 +35,12 @@ describe('DiagramAPI', () => {
'loki',
{
db: {},
parser: {},
parser: {
parse: (_text) => {
return;
},
parser: { yy: {} },
},
renderer: {},
styles: {},
},

View File

@ -69,11 +69,11 @@ export const getDiagram = (name: string): DiagramDefinition => {
if (name in diagrams) {
return diagrams[name];
}
throw new Error(`Diagram ${name} not found.`);
throw new DiagramNotFoundError(name);
};
export class DiagramNotFoundError extends Error {
constructor(message: string) {
super(`Diagram ${message} not found.`);
constructor(name: string) {
super(`Diagram ${name} not found.`);
}
}

View File

@ -1,5 +1,5 @@
import { Diagram } from '../Diagram.js';
import { MermaidConfig } from '../config.type.js';
import type { MermaidConfig } from '../config.type.js';
import type * as d3 from 'd3';
export interface InjectUtils {
@ -27,7 +27,7 @@ export interface DiagramDB {
export interface DiagramDefinition {
db: DiagramDB;
renderer: any;
parser: any;
parser: ParserDefinition;
styles?: any;
init?: (config: MermaidConfig) => void;
injectUtils?: (
@ -70,6 +70,11 @@ export type DrawDefinition = (
diagramObject: Diagram
) => void;
export interface ParserDefinition {
parse: (text: string) => void;
parser: { yy: DiagramDB };
}
/**
* Type for function parse directive from diagram code.
*
@ -79,8 +84,10 @@ export type DrawDefinition = (
*/
export type ParseDirectiveDefinition = (statement: string, context: string, type: string) => void;
export type HTML = d3.Selection<HTMLIFrameElement, unknown, Element, unknown>;
export type HTML = d3.Selection<HTMLIFrameElement, unknown, Element | null, unknown>;
export type SVG = d3.Selection<SVGSVGElement, unknown, Element, unknown>;
export type SVG = d3.Selection<SVGSVGElement, unknown, Element | null, unknown>;
export type Group = d3.Selection<SVGGElement, unknown, Element | null, unknown>;
export type DiagramStylesProvider = (options?: any) => string;

View File

@ -49,7 +49,7 @@ describe('diagram detection', () => {
"Parse error on line 2:
graph TD; A-->
--------------^
Expecting 'AMP', 'ALPHA', 'COLON', 'PIPE', 'TESTSTR', 'DOWN', 'DEFAULT', 'NUM', 'COMMA', 'MINUS', 'BRKT', 'DOT', 'PUNCTUATION', 'UNICODE_TEXT', 'PLUS', 'EQUALS', 'MULT', 'UNDERSCORE', got 'EOF'"
Expecting 'AMP', 'COLON', 'PIPE', 'TESTSTR', 'DOWN', 'DEFAULT', 'NUM', 'COMMA', 'NODE_STRING', 'BRKT', 'MINUS', 'MULT', 'UNICODE_TEXT', got 'EOF'"
`);
await expect(getDiagramFromText('sequenceDiagram; A-->B')).rejects
.toThrowErrorMatchingInlineSnapshot(`

View File

@ -1,4 +1,4 @@
// @ts-ignore: TODO Fix ts errors
// @ts-ignore: JISON doesn't support types
import c4Parser from './parser/c4Diagram.jison';
import c4Db from './c4Db.js';
import c4Renderer from './c4Renderer.js';

View File

@ -1,5 +1,5 @@
import { DiagramDefinition } from '../../diagram-api/types.js';
// @ts-ignore: TODO Fix ts errors
// @ts-ignore: JISON doesn't support types
import parser from './parser/classDiagram.jison';
import db from './classDb.js';
import styles from './styles.js';

View File

@ -1,5 +1,5 @@
import { DiagramDefinition } from '../../diagram-api/types.js';
// @ts-ignore: TODO Fix ts errors
// @ts-ignore: JISON doesn't support types
import parser from './parser/classDiagram.jison';
import db from './classDb.js';
import styles from './styles.js';

View File

@ -555,7 +555,6 @@ const drawRelationshipFromLayout = function (svg, rel, g, insert, diagObj) {
export const draw = function (text, id, _version, diagObj) {
conf = getConfig().er;
log.info('Drawing ER diagram');
// diag.db.clear();
const securityLevel = getConfig().securityLevel;
// Handle root and Document for when rendering in sandbox mode
let sandboxElement;

View File

@ -1,23 +1,15 @@
import { DiagramDefinition } from '../../diagram-api/types.js';
import styles from './styles.js';
import renderer from './errorRenderer.js';
export const diagram: DiagramDefinition = {
db: {
clear: () => {
// Quite ok, clear needs to be there for error to work as a regular diagram
},
},
styles,
import type { DiagramDefinition } from '../../diagram-api/types.js';
import { renderer } from './errorRenderer.js';
const diagram: DiagramDefinition = {
db: {},
renderer,
parser: {
parser: { yy: {} },
parse: () => {
// no op
parse: (): void => {
return;
},
},
init: () => {
// no op
},
};
export default diagram;

View File

@ -1,100 +1,81 @@
/** Created by knut on 14-12-11. */
// @ts-ignore TODO: Investigate D3 issue
import { select } from 'd3';
import { log } from '../../logger.js';
import { getErrorMessage } from '../../utils.js';
/**
* Merges the value of `conf` with the passed `cnf`
*
* @param cnf - Config to merge
*/
export const setConf = function () {
// no-op
};
import type { Group, SVG } from '../../diagram-api/types.js';
import { selectSvgElement } from '../../rendering-util/selectSvgElement.js';
import { configureSvgSize } from '../../setupGraphViewbox.js';
/**
* Draws a an info picture in the tag with id: id based on the graph definition in text.
*
* @param _text - Mermaid graph definition.
* @param id - The text for the error
* @param mermaidVersion - The version
* @param version - The version
*/
export const draw = (_text: string, id: string, mermaidVersion: string) => {
try {
log.debug('Renering svg for syntax error\n');
export const draw = (_text: string, id: string, version: string) => {
log.debug('renering svg for syntax error\n');
const svg = select('#' + id);
const svg: SVG = selectSvgElement(id);
svg.attr('viewBox', '0 0 2412 512');
configureSvgSize(svg, 100, 512, true);
const g = svg.append('g');
const g: Group = svg.append('g');
g.append('path')
.attr('class', 'error-icon')
.attr(
'd',
'm411.313,123.313c6.25-6.25 6.25-16.375 0-22.625s-16.375-6.25-22.625,0l-32,32-9.375,9.375-20.688-20.688c-12.484-12.5-32.766-12.5-45.25,0l-16,16c-1.261,1.261-2.304,2.648-3.31,4.051-21.739-8.561-45.324-13.426-70.065-13.426-105.867,0-192,86.133-192,192s86.133,192 192,192 192-86.133 192-192c0-24.741-4.864-48.327-13.426-70.065 1.402-1.007 2.79-2.049 4.051-3.31l16-16c12.5-12.492 12.5-32.758 0-45.25l-20.688-20.688 9.375-9.375 32.001-31.999zm-219.313,100.687c-52.938,0-96,43.063-96,96 0,8.836-7.164,16-16,16s-16-7.164-16-16c0-70.578 57.422-128 128-128 8.836,0 16,7.164 16,16s-7.164,16-16,16z'
);
g.append('path')
.attr('class', 'error-icon')
.attr(
'd',
'm411.313,123.313c6.25-6.25 6.25-16.375 0-22.625s-16.375-6.25-22.625,0l-32,32-9.375,9.375-20.688-20.688c-12.484-12.5-32.766-12.5-45.25,0l-16,16c-1.261,1.261-2.304,2.648-3.31,4.051-21.739-8.561-45.324-13.426-70.065-13.426-105.867,0-192,86.133-192,192s86.133,192 192,192 192-86.133 192-192c0-24.741-4.864-48.327-13.426-70.065 1.402-1.007 2.79-2.049 4.051-3.31l16-16c12.5-12.492 12.5-32.758 0-45.25l-20.688-20.688 9.375-9.375 32.001-31.999zm-219.313,100.687c-52.938,0-96,43.063-96,96 0,8.836-7.164,16-16,16s-16-7.164-16-16c0-70.578 57.422-128 128-128 8.836,0 16,7.164 16,16s-7.164,16-16,16z'
);
g.append('path')
.attr('class', 'error-icon')
.attr(
'd',
'm459.02,148.98c-6.25-6.25-16.375-6.25-22.625,0s-6.25,16.375 0,22.625l16,16c3.125,3.125 7.219,4.688 11.313,4.688 4.094,0 8.188-1.563 11.313-4.688 6.25-6.25 6.25-16.375 0-22.625l-16.001-16z'
);
g.append('path')
.attr('class', 'error-icon')
.attr(
'd',
'm459.02,148.98c-6.25-6.25-16.375-6.25-22.625,0s-6.25,16.375 0,22.625l16,16c3.125,3.125 7.219,4.688 11.313,4.688 4.094,0 8.188-1.563 11.313-4.688 6.25-6.25 6.25-16.375 0-22.625l-16.001-16z'
);
g.append('path')
.attr('class', 'error-icon')
.attr(
'd',
'm340.395,75.605c3.125,3.125 7.219,4.688 11.313,4.688 4.094,0 8.188-1.563 11.313-4.688 6.25-6.25 6.25-16.375 0-22.625l-16-16c-6.25-6.25-16.375-6.25-22.625,0s-6.25,16.375 0,22.625l15.999,16z'
);
g.append('path')
.attr('class', 'error-icon')
.attr(
'd',
'm340.395,75.605c3.125,3.125 7.219,4.688 11.313,4.688 4.094,0 8.188-1.563 11.313-4.688 6.25-6.25 6.25-16.375 0-22.625l-16-16c-6.25-6.25-16.375-6.25-22.625,0s-6.25,16.375 0,22.625l15.999,16z'
);
g.append('path')
.attr('class', 'error-icon')
.attr(
'd',
'm400,64c8.844,0 16-7.164 16-16v-32c0-8.836-7.156-16-16-16-8.844,0-16,7.164-16,16v32c0,8.836 7.156,16 16,16z'
);
g.append('path')
.attr('class', 'error-icon')
.attr(
'd',
'm400,64c8.844,0 16-7.164 16-16v-32c0-8.836-7.156-16-16-16-8.844,0-16,7.164-16,16v32c0,8.836 7.156,16 16,16z'
);
g.append('path')
.attr('class', 'error-icon')
.attr(
'd',
'm496,96.586h-32c-8.844,0-16,7.164-16,16 0,8.836 7.156,16 16,16h32c8.844,0 16-7.164 16-16 0-8.836-7.156-16-16-16z'
);
g.append('path')
.attr('class', 'error-icon')
.attr(
'd',
'm496,96.586h-32c-8.844,0-16,7.164-16,16 0,8.836 7.156,16 16,16h32c8.844,0 16-7.164 16-16 0-8.836-7.156-16-16-16z'
);
g.append('path')
.attr('class', 'error-icon')
.attr(
'd',
'm436.98,75.605c3.125,3.125 7.219,4.688 11.313,4.688 4.094,0 8.188-1.563 11.313-4.688l32-32c6.25-6.25 6.25-16.375 0-22.625s-16.375-6.25-22.625,0l-32,32c-6.251,6.25-6.251,16.375-0.001,22.625z'
);
g.append('path')
.attr('class', 'error-icon')
.attr(
'd',
'm436.98,75.605c3.125,3.125 7.219,4.688 11.313,4.688 4.094,0 8.188-1.563 11.313-4.688l32-32c6.25-6.25 6.25-16.375 0-22.625s-16.375-6.25-22.625,0l-32,32c-6.251,6.25-6.251,16.375-0.001,22.625z'
);
g.append('text') // text label for the x axis
.attr('class', 'error-text')
.attr('x', 1440)
.attr('y', 250)
.attr('font-size', '150px')
.style('text-anchor', 'middle')
.text('Syntax error in text');
g.append('text') // text label for the x axis
.attr('class', 'error-text')
.attr('x', 1250)
.attr('y', 400)
.attr('font-size', '100px')
.style('text-anchor', 'middle')
.text('mermaid version ' + mermaidVersion);
svg.attr('height', 100);
svg.attr('width', 500);
svg.attr('viewBox', '768 0 912 512');
} catch (e) {
log.error('Error while rendering info diagram');
log.error(getErrorMessage(e));
}
g.append('text') // text label for the x axis
.attr('class', 'error-text')
.attr('x', 1440)
.attr('y', 250)
.attr('font-size', '150px')
.style('text-anchor', 'middle')
.text('Syntax error in text');
g.append('text') // text label for the x axis
.attr('class', 'error-text')
.attr('x', 1250)
.attr('y', 400)
.attr('font-size', '100px')
.style('text-anchor', 'middle')
.text(`mermaid version ${version}`);
};
export default {
setConf,
draw,
};
export const renderer = { draw };
export default renderer;

View File

@ -1,3 +0,0 @@
const getStyles = () => ``;
export default getStyles;

View File

@ -655,14 +655,7 @@ const addMarkersToEdge = function (svgPath, edgeData, diagramType, arrowMarkerAb
*/
export const getClasses = function (text, diagObj) {
log.info('Extracting classes');
diagObj.db.clear('ver-2');
try {
// Parse the graph definition
diagObj.parse(text);
return diagObj.db.getClasses();
} catch (e) {
return {};
}
return diagObj.db.getClasses();
};
const addSubGraphs = function (db) {
@ -766,14 +759,8 @@ const insertChildren = (nodeArray, parentLookupDb) => {
*/
export const draw = async function (text, id, _version, diagObj) {
// Add temporary render element
diagObj.db.clear();
nodeDb = {};
portPos = {};
diagObj.db.setGen('gen-2');
// Parse the graph definition
diagObj.parser.parse(text);
const renderEl = select('body').append('div').attr('style', 'height:400px').attr('id', 'cy');
let graph = {
id: 'root',

View File

@ -1,4 +1,4 @@
// @ts-ignore: TODO Fix ts errors
// @ts-ignore: JISON doesn't support types
import flowParser from './parser/flow.jison';
import flowDb from './flowDb.js';
import flowRendererV2 from './flowRenderer-v2.js';

View File

@ -1,4 +1,4 @@
// @ts-ignore: TODO Fix ts errors
// @ts-ignore: JISON doesn't support types
import flowParser from './parser/flow.jison';
import flowDb from './flowDb.js';
import flowRenderer from './flowRenderer.js';

View File

@ -1,10 +1,7 @@
import * as graphlib from 'dagre-d3-es/src/graphlib/index.js';
import { select, curveLinear, selectAll } from 'd3';
import flowDb from './flowDb.js';
import { getConfig } from '../../config.js';
import utils from '../../utils.js';
import { render } from '../../dagre-wrapper/index.js';
import { addHtmlLabel } from 'dagre-d3-es/src/dagre-js/label/add-html-label.js';
import { log } from '../../logger.js';
@ -344,15 +341,7 @@ export const addEdges = function (edges, g, diagObj) {
* @returns {object} ClassDef styles
*/
export const getClasses = function (text, diagObj) {
log.info('Extracting classes');
diagObj.db.clear();
try {
// Parse the graph definition
diagObj.parse(text);
return diagObj.db.getClasses();
} catch (e) {
return;
}
return diagObj.db.getClasses();
};
/**
@ -364,10 +353,6 @@ export const getClasses = function (text, diagObj) {
export const draw = async function (text, id, _version, diagObj) {
log.info('Drawing flowchart');
diagObj.db.clear();
flowDb.setGen('gen-2');
// Parse the graph definition
diagObj.parser.parse(text);
// Fetch the default direction, use TD if none was found
let dir = diagObj.db.getDirection();

View File

@ -273,15 +273,7 @@ export const addEdges = function (edges, g, diagObj) {
*/
export const getClasses = function (text, diagObj) {
log.info('Extracting classes');
diagObj.db.clear();
try {
// Parse the graph definition
diagObj.parse(text);
return diagObj.db.getClasses();
} catch (e) {
log.error(e);
return {};
}
return diagObj.db.getClasses();
};
/**
@ -294,7 +286,6 @@ export const getClasses = function (text, diagObj) {
*/
export const draw = function (text, id, _version, diagObj) {
log.info('Drawing flowchart');
diagObj.db.clear();
const { securityLevel, flowchart: conf } = getConfig();
let sandboxElement;
if (securityLevel === 'sandbox') {

View File

@ -6,6 +6,40 @@ setConfig({
securityLevel: 'strict',
});
const keywords = [
'graph',
'flowchart',
'flowchart-elk',
'style',
'default',
'linkStyle',
'interpolate',
'classDef',
'class',
'href',
'call',
'click',
'_self',
'_blank',
'_parent',
'_top',
'end',
'subgraph',
'kitty',
];
const doubleEndedEdges = [
{ edgeStart: 'x--', edgeEnd: '--x', stroke: 'normal', type: 'double_arrow_cross' },
{ edgeStart: 'x==', edgeEnd: '==x', stroke: 'thick', type: 'double_arrow_cross' },
{ edgeStart: 'x-.', edgeEnd: '.-x', stroke: 'dotted', type: 'double_arrow_cross' },
{ edgeStart: 'o--', edgeEnd: '--o', stroke: 'normal', type: 'double_arrow_circle' },
{ edgeStart: 'o==', edgeEnd: '==o', stroke: 'thick', type: 'double_arrow_circle' },
{ edgeStart: 'o-.', edgeEnd: '.-o', stroke: 'dotted', type: 'double_arrow_circle' },
{ edgeStart: '<--', edgeEnd: '-->', stroke: 'normal', type: 'double_arrow_point' },
{ edgeStart: '<==', edgeEnd: '==>', stroke: 'thick', type: 'double_arrow_point' },
{ edgeStart: '<-.', edgeEnd: '.->', stroke: 'dotted', type: 'double_arrow_point' },
];
describe('[Edges] when parsing', () => {
beforeEach(function () {
flow.parser.yy = flowDb;
@ -39,211 +73,62 @@ describe('[Edges] when parsing', () => {
expect(edges[0].type).toBe('arrow_circle');
});
describe('cross', function () {
it('should handle double edged nodes and edges', function () {
const res = flow.parser.parse('graph TD;\nA x--x B;');
describe('edges', function () {
doubleEndedEdges.forEach((edgeType) => {
it(`should handle ${edgeType.stroke} ${edgeType.type} with no text`, function () {
const res = flow.parser.parse(`graph TD;\nA ${edgeType.edgeStart}${edgeType.edgeEnd} B;`);
const vert = flow.parser.yy.getVertices();
const edges = flow.parser.yy.getEdges();
const vert = flow.parser.yy.getVertices();
const edges = flow.parser.yy.getEdges();
expect(vert['A'].id).toBe('A');
expect(vert['B'].id).toBe('B');
expect(edges.length).toBe(1);
expect(edges[0].start).toBe('A');
expect(edges[0].end).toBe('B');
expect(edges[0].type).toBe('double_arrow_cross');
expect(edges[0].text).toBe('');
expect(edges[0].stroke).toBe('normal');
expect(edges[0].length).toBe(1);
});
expect(vert['A'].id).toBe('A');
expect(vert['B'].id).toBe('B');
expect(edges.length).toBe(1);
expect(edges[0].start).toBe('A');
expect(edges[0].end).toBe('B');
expect(edges[0].type).toBe(`${edgeType.type}`);
expect(edges[0].text).toBe('');
expect(edges[0].stroke).toBe(`${edgeType.stroke}`);
});
it('should handle double edged nodes with text', function () {
const res = flow.parser.parse('graph TD;\nA x-- text --x B;');
it(`should handle ${edgeType.stroke} ${edgeType.type} with text`, function () {
const res = flow.parser.parse(
`graph TD;\nA ${edgeType.edgeStart} text ${edgeType.edgeEnd} B;`
);
const vert = flow.parser.yy.getVertices();
const edges = flow.parser.yy.getEdges();
const vert = flow.parser.yy.getVertices();
const edges = flow.parser.yy.getEdges();
expect(vert['A'].id).toBe('A');
expect(vert['B'].id).toBe('B');
expect(edges.length).toBe(1);
expect(edges[0].start).toBe('A');
expect(edges[0].end).toBe('B');
expect(edges[0].type).toBe('double_arrow_cross');
expect(edges[0].text).toBe('text');
expect(edges[0].stroke).toBe('normal');
expect(edges[0].length).toBe(1);
});
expect(vert['A'].id).toBe('A');
expect(vert['B'].id).toBe('B');
expect(edges.length).toBe(1);
expect(edges[0].start).toBe('A');
expect(edges[0].end).toBe('B');
expect(edges[0].type).toBe(`${edgeType.type}`);
expect(edges[0].text).toBe('text');
expect(edges[0].stroke).toBe(`${edgeType.stroke}`);
});
it('should handle double edged nodes and edges on thick arrows', function () {
const res = flow.parser.parse('graph TD;\nA x==x B;');
it.each(keywords)(
`should handle ${edgeType.stroke} ${edgeType.type} with %s text`,
function (keyword) {
const res = flow.parser.parse(
`graph TD;\nA ${edgeType.edgeStart} ${keyword} ${edgeType.edgeEnd} B;`
);
const vert = flow.parser.yy.getVertices();
const edges = flow.parser.yy.getEdges();
const vert = flow.parser.yy.getVertices();
const edges = flow.parser.yy.getEdges();
expect(vert['A'].id).toBe('A');
expect(vert['B'].id).toBe('B');
expect(edges.length).toBe(1);
expect(edges[0].start).toBe('A');
expect(edges[0].end).toBe('B');
expect(edges[0].type).toBe('double_arrow_cross');
expect(edges[0].text).toBe('');
expect(edges[0].stroke).toBe('thick');
expect(edges[0].length).toBe(1);
});
it('should handle double edged nodes with text on thick arrows', function () {
const res = flow.parser.parse('graph TD;\nA x== text ==x B;');
const vert = flow.parser.yy.getVertices();
const edges = flow.parser.yy.getEdges();
expect(vert['A'].id).toBe('A');
expect(vert['B'].id).toBe('B');
expect(edges.length).toBe(1);
expect(edges[0].start).toBe('A');
expect(edges[0].end).toBe('B');
expect(edges[0].type).toBe('double_arrow_cross');
expect(edges[0].text).toBe('text');
expect(edges[0].stroke).toBe('thick');
expect(edges[0].length).toBe(1);
});
it('should handle double edged nodes and edges on dotted arrows', function () {
const res = flow.parser.parse('graph TD;\nA x-.-x B;');
const vert = flow.parser.yy.getVertices();
const edges = flow.parser.yy.getEdges();
expect(vert['A'].id).toBe('A');
expect(vert['B'].id).toBe('B');
expect(edges.length).toBe(1);
expect(edges[0].start).toBe('A');
expect(edges[0].end).toBe('B');
expect(edges[0].type).toBe('double_arrow_cross');
expect(edges[0].text).toBe('');
expect(edges[0].stroke).toBe('dotted');
expect(edges[0].length).toBe(1);
});
it('should handle double edged nodes with text on dotted arrows', function () {
const res = flow.parser.parse('graph TD;\nA x-. text .-x B;');
const vert = flow.parser.yy.getVertices();
const edges = flow.parser.yy.getEdges();
expect(vert['A'].id).toBe('A');
expect(vert['B'].id).toBe('B');
expect(edges.length).toBe(1);
expect(edges[0].start).toBe('A');
expect(edges[0].end).toBe('B');
expect(edges[0].type).toBe('double_arrow_cross');
expect(edges[0].text).toBe('text');
expect(edges[0].stroke).toBe('dotted');
expect(edges[0].length).toBe(1);
});
});
describe('circle', function () {
it('should handle double edged nodes and edges', function () {
const res = flow.parser.parse('graph TD;\nA o--o B;');
const vert = flow.parser.yy.getVertices();
const edges = flow.parser.yy.getEdges();
expect(vert['A'].id).toBe('A');
expect(vert['B'].id).toBe('B');
expect(edges.length).toBe(1);
expect(edges[0].start).toBe('A');
expect(edges[0].end).toBe('B');
expect(edges[0].type).toBe('double_arrow_circle');
expect(edges[0].text).toBe('');
expect(edges[0].stroke).toBe('normal');
expect(edges[0].length).toBe(1);
});
it('should handle double edged nodes with text', function () {
const res = flow.parser.parse('graph TD;\nA o-- text --o B;');
const vert = flow.parser.yy.getVertices();
const edges = flow.parser.yy.getEdges();
expect(vert['A'].id).toBe('A');
expect(vert['B'].id).toBe('B');
expect(edges.length).toBe(1);
expect(edges[0].start).toBe('A');
expect(edges[0].end).toBe('B');
expect(edges[0].type).toBe('double_arrow_circle');
expect(edges[0].text).toBe('text');
expect(edges[0].stroke).toBe('normal');
expect(edges[0].length).toBe(1);
});
it('should handle double edged nodes and edges on thick arrows', function () {
const res = flow.parser.parse('graph TD;\nA o==o B;');
const vert = flow.parser.yy.getVertices();
const edges = flow.parser.yy.getEdges();
expect(vert['A'].id).toBe('A');
expect(vert['B'].id).toBe('B');
expect(edges.length).toBe(1);
expect(edges[0].start).toBe('A');
expect(edges[0].end).toBe('B');
expect(edges[0].type).toBe('double_arrow_circle');
expect(edges[0].text).toBe('');
expect(edges[0].stroke).toBe('thick');
expect(edges[0].length).toBe(1);
});
it('should handle double edged nodes with text on thick arrows', function () {
const res = flow.parser.parse('graph TD;\nA o== text ==o B;');
const vert = flow.parser.yy.getVertices();
const edges = flow.parser.yy.getEdges();
expect(vert['A'].id).toBe('A');
expect(vert['B'].id).toBe('B');
expect(edges.length).toBe(1);
expect(edges[0].start).toBe('A');
expect(edges[0].end).toBe('B');
expect(edges[0].type).toBe('double_arrow_circle');
expect(edges[0].text).toBe('text');
expect(edges[0].stroke).toBe('thick');
expect(edges[0].length).toBe(1);
});
it('should handle double edged nodes and edges on dotted arrows', function () {
const res = flow.parser.parse('graph TD;\nA o-.-o B;');
const vert = flow.parser.yy.getVertices();
const edges = flow.parser.yy.getEdges();
expect(vert['A'].id).toBe('A');
expect(vert['B'].id).toBe('B');
expect(edges.length).toBe(1);
expect(edges[0].start).toBe('A');
expect(edges[0].end).toBe('B');
expect(edges[0].type).toBe('double_arrow_circle');
expect(edges[0].text).toBe('');
expect(edges[0].stroke).toBe('dotted');
expect(edges[0].length).toBe(1);
});
it('should handle double edged nodes with text on dotted arrows', function () {
const res = flow.parser.parse('graph TD;\nA o-. text .-o B;');
const vert = flow.parser.yy.getVertices();
const edges = flow.parser.yy.getEdges();
expect(vert['A'].id).toBe('A');
expect(vert['B'].id).toBe('B');
expect(edges.length).toBe(1);
expect(edges[0].start).toBe('A');
expect(edges[0].end).toBe('B');
expect(edges[0].type).toBe('double_arrow_circle');
expect(edges[0].text).toBe('text');
expect(edges[0].stroke).toBe('dotted');
expect(edges[0].length).toBe(1);
expect(vert['A'].id).toBe('A');
expect(vert['B'].id).toBe('B');
expect(edges.length).toBe(1);
expect(edges[0].start).toBe('A');
expect(edges[0].end).toBe('B');
expect(edges[0].type).toBe(`${edgeType.type}`);
expect(edges[0].text).toBe(`${keyword}`);
expect(edges[0].stroke).toBe(`${edgeType.stroke}`);
}
);
});
});

View File

@ -24,7 +24,7 @@ A["\`The cat in **the** hat\`"]-- "\`The *bat* in the chat\`" -->B["The dog in t
expect(vert['A'].labelType).toBe('markdown');
expect(vert['B'].id).toBe('B');
expect(vert['B'].text).toBe('The dog in the hog');
expect(vert['B'].labelType).toBe('text');
expect(vert['B'].labelType).toBe('string');
expect(edges.length).toBe(2);
expect(edges[0].start).toBe('A');
expect(edges[0].end).toBe('B');
@ -35,7 +35,7 @@ A["\`The cat in **the** hat\`"]-- "\`The *bat* in the chat\`" -->B["The dog in t
expect(edges[1].end).toBe('C');
expect(edges[1].type).toBe('arrow_point');
expect(edges[1].text).toBe('The rat in the mat');
expect(edges[1].labelType).toBe('text');
expect(edges[1].labelType).toBe('string');
});
it('mardown formatting in subgraphs', function () {
const res = flow.parser.parse(`flowchart LR

View File

@ -6,6 +6,29 @@ setConfig({
securityLevel: 'strict',
});
const keywords = [
'graph',
'flowchart',
'flowchart-elk',
'style',
'default',
'linkStyle',
'interpolate',
'classDef',
'class',
'href',
'call',
'click',
'_self',
'_blank',
'_parent',
'_top',
'end',
'subgraph',
];
const specialChars = ['#', ':', '0', '&', ',', '*', '.', '\\', 'v', '-', '/', '_'];
describe('[Singlenodes] when parsing', () => {
beforeEach(function () {
flow.parser.yy = flowDb;
@ -259,4 +282,90 @@ describe('[Singlenodes] when parsing', () => {
expect(edges.length).toBe(0);
expect(vert['i_d'].styles.length).toBe(0);
});
it.each(keywords)('should handle keywords between dashes "-"', function (keyword) {
const res = flow.parser.parse(`graph TD;a-${keyword}-node;`);
const vert = flow.parser.yy.getVertices();
expect(vert[`a-${keyword}-node`].text).toBe(`a-${keyword}-node`);
});
it.each(keywords)('should handle keywords between periods "."', function (keyword) {
const res = flow.parser.parse(`graph TD;a.${keyword}.node;`);
const vert = flow.parser.yy.getVertices();
expect(vert[`a.${keyword}.node`].text).toBe(`a.${keyword}.node`);
});
it.each(keywords)('should handle keywords between underscores "_"', function (keyword) {
const res = flow.parser.parse(`graph TD;a_${keyword}_node;`);
const vert = flow.parser.yy.getVertices();
expect(vert[`a_${keyword}_node`].text).toBe(`a_${keyword}_node`);
});
it.each(keywords)('should handle nodes ending in %s', function (keyword) {
const res = flow.parser.parse(`graph TD;node_${keyword};node.${keyword};node-${keyword};`);
const vert = flow.parser.yy.getVertices();
expect(vert[`node_${keyword}`].text).toBe(`node_${keyword}`);
expect(vert[`node.${keyword}`].text).toBe(`node.${keyword}`);
expect(vert[`node-${keyword}`].text).toBe(`node-${keyword}`);
});
const errorKeywords = [
'graph',
'flowchart',
'flowchart-elk',
'style',
'linkStyle',
'interpolate',
'classDef',
'class',
'_self',
'_blank',
'_parent',
'_top',
'end',
'subgraph',
];
it.each(errorKeywords)('should throw error at nodes beginning with %s', function (keyword) {
const str = `graph TD;${keyword}.node;${keyword}-node;${keyword}/node`;
const vert = flow.parser.yy.getVertices();
expect(() => flow.parser.parse(str)).toThrowError();
});
const workingKeywords = ['default', 'href', 'click', 'call'];
it.each(workingKeywords)('should parse node beginning with %s', function (keyword) {
flow.parser.parse(`graph TD; ${keyword}.node;${keyword}-node;${keyword}/node;`);
const vert = flow.parser.yy.getVertices();
expect(vert[`${keyword}.node`].text).toBe(`${keyword}.node`);
expect(vert[`${keyword}-node`].text).toBe(`${keyword}-node`);
expect(vert[`${keyword}/node`].text).toBe(`${keyword}/node`);
});
it.each(specialChars)(
'should allow node ids of single special characters',
function (specialChar) {
flow.parser.parse(`graph TD; ${specialChar} --> A`);
const vert = flow.parser.yy.getVertices();
expect(vert[`${specialChar}`].text).toBe(`${specialChar}`);
}
);
it.each(specialChars)(
'should allow node ids with special characters at start of id',
function (specialChar) {
flow.parser.parse(`graph TD; ${specialChar}node --> A`);
const vert = flow.parser.yy.getVertices();
expect(vert[`${specialChar}node`].text).toBe(`${specialChar}node`);
}
);
it.each(specialChars)(
'should allow node ids with special characters at end of id',
function (specialChar) {
flow.parser.parse(`graph TD; node${specialChar} --> A`);
const vert = flow.parser.yy.getVertices();
expect(vert[`node${specialChar}`].text).toBe(`node${specialChar}`);
}
);
});

View File

@ -26,15 +26,6 @@ describe('[Style] when parsing', () => {
expect(vert['Q'].styles[0]).toBe('background:#fff');
});
// log.debug(flow.parser.parse('graph TD;style Q background:#fff;'));
it('should handle styles for edges', function () {
const res = flow.parser.parse('graph TD;a-->b;\nstyle #0 stroke: #f66;');
const edges = flow.parser.yy.getEdges();
expect(edges.length).toBe(1);
});
it('should handle multiple styles for a vortex', function () {
const res = flow.parser.parse('graph TD;style R background:#fff,border:1px solid red;');

View File

@ -305,6 +305,95 @@ describe('[Text] when parsing', () => {
expect(vert['C'].type).toBe('round');
expect(vert['C'].text).toBe('Chimpansen hoppar');
});
const keywords = [
'graph',
'flowchart',
'flowchart-elk',
'style',
'default',
'linkStyle',
'interpolate',
'classDef',
'class',
'href',
'call',
'click',
'_self',
'_blank',
'_parent',
'_top',
'end',
'subgraph',
'kitty',
];
const shapes = [
{ start: '[', end: ']', name: 'square' },
{ start: '(', end: ')', name: 'round' },
{ start: '{', end: '}', name: 'diamond' },
{ start: '(-', end: '-)', name: 'ellipse' },
{ start: '([', end: '])', name: 'stadium' },
{ start: '>', end: ']', name: 'odd' },
{ start: '[(', end: ')]', name: 'cylinder' },
{ start: '(((', end: ')))', name: 'doublecircle' },
{ start: '[/', end: '\\]', name: 'trapezoid' },
{ start: '[\\', end: '/]', name: 'inv_trapezoid' },
{ start: '[/', end: '/]', name: 'lean_right' },
{ start: '[\\', end: '\\]', name: 'lean_left' },
{ start: '[[', end: ']]', name: 'subroutine' },
{ start: '{{', end: '}}', name: 'hexagon' },
];
shapes.forEach((shape) => {
it.each(keywords)(`should handle %s keyword in ${shape.name} vertex`, function (keyword) {
const rest = flow.parser.parse(
`graph TD;A_${keyword}_node-->B${shape.start}This node has a ${keyword} as text${shape.end};`
);
const vert = flow.parser.yy.getVertices();
const edges = flow.parser.yy.getEdges();
expect(vert['B'].type).toBe(`${shape.name}`);
expect(vert['B'].text).toBe(`This node has a ${keyword} as text`);
});
});
it.each(keywords)('should handle %s keyword in rect vertex', function (keyword) {
const rest = flow.parser.parse(
`graph TD;A_${keyword}_node-->B[|borders:lt|This node has a ${keyword} as text];`
);
const vert = flow.parser.yy.getVertices();
const edges = flow.parser.yy.getEdges();
expect(vert['B'].type).toBe('rect');
expect(vert['B'].text).toBe(`This node has a ${keyword} as text`);
});
it('should handle edge case for odd vertex with node id ending with minus', function () {
const res = flow.parser.parse('graph TD;A_node-->odd->Vertex Text];');
const vert = flow.parser.yy.getVertices();
expect(vert['odd-'].type).toBe('odd');
expect(vert['odd-'].text).toBe('Vertex Text');
});
it('should allow forward slashes in lean_right vertices', function () {
const rest = flow.parser.parse(`graph TD;A_node-->B[/This node has a / as text/];`);
const vert = flow.parser.yy.getVertices();
const edges = flow.parser.yy.getEdges();
expect(vert['B'].type).toBe('lean_right');
expect(vert['B'].text).toBe(`This node has a / as text`);
});
it('should allow back slashes in lean_left vertices', function () {
const rest = flow.parser.parse(`graph TD;A_node-->B[\\This node has a \\ as text\\];`);
const vert = flow.parser.yy.getVertices();
const edges = flow.parser.yy.getEdges();
expect(vert['B'].type).toBe('lean_left');
expect(vert['B'].text).toBe(`This node has a \\ as text`);
});
it('should handle åäö and minus', function () {
const res = flow.parser.parse('graph TD;A-->C{Chimpansen hoppar åäö-ÅÄÖ};');
@ -484,4 +573,33 @@ describe('[Text] when parsing', () => {
expect(vert['A'].text).toBe(',.?!+-*');
expect(edges[0].text).toBe(',.?!+-*');
});
it('should throw error at nested set of brackets', function () {
const str = 'graph TD; A[This is a () in text];';
expect(() => flow.parser.parse(str)).toThrowError("got 'PS'");
});
it('should throw error for strings and text at the same time', function () {
const str = 'graph TD;A(this node has "string" and text)-->|this link has "string" and text|C;';
expect(() => flow.parser.parse(str)).toThrowError("got 'STR'");
});
it('should throw error for escaping quotes in text state', function () {
//prettier-ignore
const str = 'graph TD; A[This is a \"()\" in text];'; //eslint-disable-line no-useless-escape
expect(() => flow.parser.parse(str)).toThrowError("got 'STR'");
});
it('should throw error for nested quoatation marks', function () {
const str = 'graph TD; A["This is a "()" in text"];';
expect(() => flow.parser.parse(str)).toThrowError("Expecting 'SQE'");
});
it('should throw error', function () {
const str = `graph TD; node[hello ) world] --> works`;
expect(() => flow.parser.parse(str)).toThrowError("got 'PE'");
});
});

View File

@ -13,6 +13,12 @@
%x acc_descr_multiline
%x dir
%x vertex
%x text
%x ellipseText
%x trapText
%x edgeText
%x thickEdgeText
%x dottedEdgeText
%x click
%x href
%x callbackname
@ -23,41 +29,19 @@
%x close_directive
%%
\%\%\{ { this.begin('open_directive'); return 'open_directive'; }
<open_directive>((?:(?!\}\%\%)[^:.])*) { this.begin('type_directive'); return 'type_directive'; }
<type_directive>":" { this.popState(); this.begin('arg_directive'); return ':'; }
<type_directive,arg_directive>\}\%\% { this.popState(); this.popState(); return 'close_directive'; }
<arg_directive>((?:(?!\}\%\%).|\n)*) return 'arg_directive';
accTitle\s*":"\s* { this.begin("acc_title");return 'acc_title'; }
<acc_title>(?!\n|;|#)*[^\n]* { this.popState(); return "acc_title_value"; }
accDescr\s*":"\s* { this.begin("acc_descr");return 'acc_descr'; }
<acc_descr>(?!\n|;|#)*[^\n]* { this.popState(); return "acc_descr_value"; }
accDescr\s*"{"\s* { this.begin("acc_descr_multiline");}
\%\%\{ { this.begin('open_directive'); return 'open_directive'; }
<open_directive>((?:(?!\}\%\%)[^:.])*) { this.begin('type_directive'); return 'type_directive'; }
<type_directive>":" { this.popState(); this.begin('arg_directive'); return ':'; }
<type_directive,arg_directive>\}\%\% { this.popState(); this.popState(); return 'close_directive'; }
<arg_directive>((?:(?!\}\%\%).|\n)*) return 'arg_directive';
accTitle\s*":"\s* { this.begin("acc_title");return 'acc_title'; }
<acc_title>(?!\n|;|#)*[^\n]* { this.popState(); return "acc_title_value"; }
accDescr\s*":"\s* { this.begin("acc_descr");return 'acc_descr'; }
<acc_descr>(?!\n|;|#)*[^\n]* { this.popState(); return "acc_descr_value"; }
accDescr\s*"{"\s* { this.begin("acc_descr_multiline");}
<acc_descr_multiline>[\}] { this.popState(); }
<acc_descr_multiline>[^\}]* return "acc_descr_multiline_value";
// <acc_descr_multiline>.*[^\n]* { return "acc_descr_line"}
["][`] { this.begin("md_string");}
<md_string>[^`"]+ { return "MD_STR";}
<md_string>[`]["] { this.popState();}
["] this.begin("string");
<string>["] this.popState();
<string>[^"]* return "STR";
"style" return 'STYLE';
"default" return 'DEFAULT';
"linkStyle" return 'LINKSTYLE';
"interpolate" return 'INTERPOLATE';
"classDef" return 'CLASSDEF';
"class" return 'CLASS';
/*
---interactivity command---
'href' adds a link to the specified node. 'href' can only be specified when the
line was introduced with 'click'.
'href "<link>"' attaches the specified link to the node that was specified by 'click'.
*/
"href"[\s]+["] this.begin("href");
<href>["] this.popState();
<href>[^"]* return 'HREF';
// <acc_descr_multiline>.*[^\n]* { return "acc_descr_line"}
/*
---interactivity command---
@ -74,88 +58,128 @@ Function arguments are optional: 'call <callbackname>()' simply executes 'callba
<callbackargs>\) this.popState();
<callbackargs>[^)]* return 'CALLBACKARGS';
<md_string>[^`"]+ { return "MD_STR";}
<md_string>[`]["] { this.popState();}
<*>["][`] { this.begin("md_string");}
<string>[^"]+ return "STR";
<string>["] this.popState();
<*>["] this.pushState("string");
"style" return 'STYLE';
"default" return 'DEFAULT';
"linkStyle" return 'LINKSTYLE';
"interpolate" return 'INTERPOLATE';
"classDef" return 'CLASSDEF';
"class" return 'CLASS';
/*
---interactivity command---
'href' adds a link to the specified node. 'href' can only be specified when the
line was introduced with 'click'.
'href "<link>"' attaches the specified link to the node that was specified by 'click'.
*/
"href"[\s] return 'HREF';
/*
'click' is the keyword to introduce a line that contains interactivity commands.
'click' must be followed by an existing node-id. All commands are attached to
that id.
'click <id>' can be followed by href or call commands in any desired order
*/
"click"[\s]+ this.begin("click");
<click>[\s\n] this.popState();
<click>[^\s\n]* return 'CLICK';
"click"[\s]+ this.begin("click");
<click>[\s\n] this.popState();
<click>[^\s\n]* return 'CLICK';
"flowchart-elk" {if(yy.lex.firstGraph()){this.begin("dir");} return 'GRAPH';}
"graph" {if(yy.lex.firstGraph()){this.begin("dir");} return 'GRAPH';}
"flowchart" {if(yy.lex.firstGraph()){this.begin("dir");} return 'GRAPH';}
"subgraph" return 'subgraph';
"end"\b\s* return 'end';
"flowchart-elk" {if(yy.lex.firstGraph()){this.begin("dir");} return 'GRAPH';}
"graph" {if(yy.lex.firstGraph()){this.begin("dir");} return 'GRAPH';}
"flowchart" {if(yy.lex.firstGraph()){this.begin("dir");} return 'GRAPH';}
"subgraph" return 'subgraph';
"end"\b\s* return 'end';
"_self" return 'LINK_TARGET';
"_blank" return 'LINK_TARGET';
"_parent" return 'LINK_TARGET';
"_top" return 'LINK_TARGET';
"_self" return 'LINK_TARGET';
"_blank" return 'LINK_TARGET';
"_parent" return 'LINK_TARGET';
"_top" return 'LINK_TARGET';
<dir>(\r?\n)*\s*\n { this.popState(); return 'NODIR'; }
<dir>\s*"LR" { this.popState(); return 'DIR'; }
<dir>\s*"RL" { this.popState(); return 'DIR'; }
<dir>\s*"TB" { this.popState(); return 'DIR'; }
<dir>\s*"BT" { this.popState(); return 'DIR'; }
<dir>\s*"TD" { this.popState(); return 'DIR'; }
<dir>\s*"BR" { this.popState(); return 'DIR'; }
<dir>\s*"<" { this.popState(); return 'DIR'; }
<dir>\s*">" { this.popState(); return 'DIR'; }
<dir>\s*"^" { this.popState(); return 'DIR'; }
<dir>\s*"v" { this.popState(); return 'DIR'; }
<dir>(\r?\n)*\s*\n { this.popState(); return 'NODIR'; }
<dir>\s*"LR" { this.popState(); return 'DIR'; }
<dir>\s*"RL" { this.popState(); return 'DIR'; }
<dir>\s*"TB" { this.popState(); return 'DIR'; }
<dir>\s*"BT" { this.popState(); return 'DIR'; }
<dir>\s*"TD" { this.popState(); return 'DIR'; }
<dir>\s*"BR" { this.popState(); return 'DIR'; }
<dir>\s*"<" { this.popState(); return 'DIR'; }
<dir>\s*">" { this.popState(); return 'DIR'; }
<dir>\s*"^" { this.popState(); return 'DIR'; }
<dir>\s*"v" { this.popState(); return 'DIR'; }
.*direction\s+TB[^\n]* return 'direction_tb';
.*direction\s+BT[^\n]* return 'direction_bt';
.*direction\s+RL[^\n]* return 'direction_rl';
.*direction\s+LR[^\n]* return 'direction_lr';
[0-9]+ return 'NUM';
\# return 'BRKT';
":::" return 'STYLE_SEPARATOR';
":" return 'COLON';
"&" return 'AMP';
";" return 'SEMI';
"," return 'COMMA';
"*" return 'MULT';
<INITIAL,edgeText>\s*[xo<]?\-\-+[-xo>]\s* { this.popState(); return 'LINK'; }
<INITIAL>\s*[xo<]?\-\-\s* { this.pushState("edgeText"); return 'START_LINK'; }
<edgeText>[^-]|\-(?!\-)+ return 'EDGE_TEXT';
<INITIAL,thickEdgeText>\s*[xo<]?\=\=+[=xo>]\s* { this.popState(); return 'LINK'; }
<INITIAL>\s*[xo<]?\=\=\s* { this.pushState("thickEdgeText"); return 'START_LINK'; }
<thickEdgeText>[^=]|\=(?!=) return 'EDGE_TEXT';
<INITIAL,dottedEdgeText>\s*[xo<]?\-?\.+\-[xo>]?\s* { this.popState(); return 'LINK'; }
<INITIAL>\s*[xo<]?\-\.\s* { this.pushState("dottedEdgeText"); return 'START_LINK'; }
<dottedEdgeText>[^\.]|\.(?!-) return 'EDGE_TEXT';
<*>\s*\~\~[\~]+\s* return 'LINK';
<ellipseText>[-/\)][\)] { this.popState(); return '-)'; }
<ellipseText>[^\(\)\[\]\{\}]|-/!\)+ return "TEXT"
<*>"(-" { this.pushState("ellipseText"); return '(-'; }
<text>"])" { this.popState(); return 'STADIUMEND'; }
<*>"([" { this.pushState("text"); return 'STADIUMSTART'; }
<text>"]]" { this.popState(); return 'SUBROUTINEEND'; }
<*>"[[" { this.pushState("text"); return 'SUBROUTINESTART'; }
"[|" { return 'VERTEX_WITH_PROPS_START'; }
\> { this.pushState("text"); return 'TAGEND'; }
<text>")]" { this.popState(); return 'CYLINDEREND'; }
<*>"[(" { this.pushState("text") ;return 'CYLINDERSTART'; }
<text>")))" { this.popState(); return 'DOUBLECIRCLEEND'; }
<*>"(((" { this.pushState("text"); return 'DOUBLECIRCLESTART'; }
<trapText>[\\(?=\])][\]] { this.popState(); return 'TRAPEND'; }
<trapText>\/(?=\])\] { this.popState(); return 'INVTRAPEND'; }
<trapText>\/(?!\])|\\(?!\])|[^\\\[\]\(\)\{\}\/]+ return 'TEXT';
<*>"[/" { this.pushState("trapText"); return 'TRAPSTART'; }
<*>"[\\" { this.pushState("trapText"); return 'INVTRAPSTART'; }
.*direction\s+TB[^\n]* return 'direction_tb';
.*direction\s+BT[^\n]* return 'direction_bt';
.*direction\s+RL[^\n]* return 'direction_rl';
.*direction\s+LR[^\n]* return 'direction_lr';
[0-9]+ { return 'NUM';}
\# return 'BRKT';
":::" return 'STYLE_SEPARATOR';
":" return 'COLON';
"&" return 'AMP';
";" return 'SEMI';
"," return 'COMMA';
"*" return 'MULT';
\s*[xo<]?\-\-+[-xo>]\s* return 'LINK';
\s*[xo<]?\=\=+[=xo>]\s* return 'LINK';
\s*[xo<]?\-?\.+\-[xo>]?\s* return 'LINK';
\s*\~\~[\~]+\s* return 'LINK';
\s*[xo<]?\-\-\s* return 'START_LINK';
\s*[xo<]?\=\=\s* return 'START_LINK';
\s*[xo<]?\-\.\s* return 'START_LINK';
"(-" return '(-';
"-)" return '-)';
"([" return 'STADIUMSTART';
"])" return 'STADIUMEND';
"[[" return 'SUBROUTINESTART';
"]]" return 'SUBROUTINEEND';
"[|" return 'VERTEX_WITH_PROPS_START';
"[(" return 'CYLINDERSTART';
")]" return 'CYLINDEREND';
"(((" return 'DOUBLECIRCLESTART';
")))" return 'DOUBLECIRCLEEND';
\- return 'MINUS';
"." return 'DOT';
[\_] return 'UNDERSCORE';
\+ return 'PLUS';
\% return 'PCT';
"=" return 'EQUALS';
\= return 'EQUALS';
"<" return 'TAGSTART';
">" return 'TAGEND';
"^" return 'UP';
"\|" return 'SEP';
"v" return 'DOWN';
[A-Za-z]+ return 'ALPHA';
"\\]" return 'TRAPEND';
"[/" return 'TRAPSTART';
"/]" return 'INVTRAPEND';
"[\\" return 'INVTRAPSTART';
[!"#$%&'*+,-.`?\\_/] return 'PUNCTUATION';
"*" return 'MULT';
"#" return 'BRKT';
"&" return 'AMP';
([A-Za-z0-9!"\#$%&'*+\.`?\\_\/]|\-(?=[^\>\-\.])|=(?!=))+ return 'NODE_STRING';
"-" return 'MINUS'
[\u00AA\u00B5\u00BA\u00C0-\u00D6\u00D8-\u00F6]|
[\u00F8-\u02C1\u02C6-\u02D1\u02E0-\u02E4\u02EC\u02EE\u0370-\u0374\u0376\u0377]|
[\u037A-\u037D\u0386\u0388-\u038A\u038C\u038E-\u03A1\u03A3-\u03F5]|
@ -218,13 +242,20 @@ that id.
[\uFF21-\uFF3A\uFF41-\uFF5A\uFF66-\uFFBE\uFFC2-\uFFC7\uFFCA-\uFFCF]|
[\uFFD2-\uFFD7\uFFDA-\uFFDC]
return 'UNICODE_TEXT';
"|" return 'PIPE';
"(" return 'PS';
")" return 'PE';
"[" return 'SQS';
"]" return 'SQE';
"{" return 'DIAMOND_START'
"}" return 'DIAMOND_STOP'
<text>"|" { this.popState(); return 'PIPE'; }
<*>"|" { this.pushState("text"); return 'PIPE'; }
<text>")" { this.popState(); return 'PE'; }
<*>"(" { this.pushState("text"); return 'PS'; }
<text>"]" { this.popState(); return 'SQE'; }
<*>"[" { this.pushState("text"); return 'SQS'; }
<text>(\}) { this.popState(); return 'DIAMOND_STOP' }
<*>"{" { this.pushState("text"); return 'DIAMOND_START' }
<text>[^\[\]\(\)\{\}\|\"]+ return "TEXT";
"\"" return 'QUOTE';
(\r?\n)+ return 'NEWLINE';
\s return 'SPACE';
@ -255,11 +286,11 @@ openDirective
;
typeDirective
: type_directive { yy.parseDirective($1, 'type_directive'); }
: type_directive { yy.parseDirective($type_directive, 'type_directive'); }
;
argDirective
: arg_directive { $1 = $1.trim().replace(/'/g, '"'); yy.parseDirective($1, 'arg_directive'); }
: arg_directive { $arg_directive = $arg_directive.trim().replace(/'/g, '"'); yy.parseDirective($arg_directive, 'arg_directive'); }
;
closeDirective
@ -275,15 +306,15 @@ document
{ $$ = [];}
| document line
{
if(!Array.isArray($2) || $2.length > 0){
$1.push($2);
if(!Array.isArray($line) || $line.length > 0){
$document.push($line);
}
$$=$1;}
$$=$document;}
;
line
: statement
{$$=$1;}
{$$=$statement;}
| SEMI
| NEWLINE
| SPACE
@ -296,15 +327,15 @@ graphConfig
| GRAPH NODIR
{ yy.setDirection('TB');$$ = 'TB';}
| GRAPH DIR FirstStmtSeperator
{ yy.setDirection($2);$$ = $2;}
{ yy.setDirection($DIR);$$ = $DIR;}
// | GRAPH SPACE TAGEND FirstStmtSeperator
// { yy.setDirection("LR");$$ = $3;}
// { yy.setDirection("LR");$$ = $TAGEND;}
// | GRAPH SPACE TAGSTART FirstStmtSeperator
// { yy.setDirection("RL");$$ = $3;}
// { yy.setDirection("RL");$$ = $TAGSTART;}
// | GRAPH SPACE UP FirstStmtSeperator
// { yy.setDirection("BT");$$ = $3;}
// { yy.setDirection("BT");$$ = $UP;}
// | GRAPH SPACE DOWN FirstStmtSeperator
// { yy.setDirection("TB");$$ = $3;}
// { yy.setDirection("TB");$$ = $DOWN;}
;
ending: endToken ending
@ -332,7 +363,7 @@ spaceList
statement
: verticeStatement separator
{ /* console.warn('finat vs', $1.nodes); */ $$=$1.nodes}
{ /* console.warn('finat vs', $verticeStatement.nodes); */ $$=$verticeStatement.nodes}
| styleStatement separator
{$$=[];}
| linkStyleStatement separator
@ -343,110 +374,121 @@ statement
{$$=[];}
| clickStatement separator
{$$=[];}
| subgraph SPACE text SQS text SQE separator document end
{$$=yy.addSubGraph($3,$8,$5);}
| subgraph SPACE text separator document end
{$$=yy.addSubGraph($3,$5,$3);}
// | subgraph SPACE text separator document end
// {$$=yy.addSubGraph($3,$5,$3);}
| subgraph SPACE textNoTags SQS text SQE separator document end
{$$=yy.addSubGraph($textNoTags,$document,$text);}
| subgraph SPACE textNoTags separator document end
{$$=yy.addSubGraph($textNoTags,$document,$textNoTags);}
// | subgraph SPACE textNoTags separator document end
// {$$=yy.addSubGraph($textNoTags,$document,$textNoTags);}
| subgraph separator document end
{$$=yy.addSubGraph(undefined,$3,undefined);}
{$$=yy.addSubGraph(undefined,$document,undefined);}
| direction
| acc_title acc_title_value { $$=$2.trim();yy.setAccTitle($$); }
| acc_descr acc_descr_value { $$=$2.trim();yy.setAccDescription($$); }
| acc_descr_multiline_value { $$=$1.trim();yy.setAccDescription($$); }
| acc_title acc_title_value { $$=$acc_title_value.trim();yy.setAccTitle($$); }
| acc_descr acc_descr_value { $$=$acc_descr_value.trim();yy.setAccDescription($$); }
| acc_descr_multiline_value { $$=$acc_descr_multiline_value.trim();yy.setAccDescription($$); }
;
separator: NEWLINE | SEMI | EOF ;
verticeStatement: verticeStatement link node
{ /* console.warn('vs',$1.stmt,$3); */ yy.addLink($1.stmt,$3,$2); $$ = { stmt: $3, nodes: $3.concat($1.nodes) } }
{ /* console.warn('vs',$verticeStatement.stmt,$node); */ yy.addLink($verticeStatement.stmt,$node,$link); $$ = { stmt: $node, nodes: $node.concat($verticeStatement.nodes) } }
| verticeStatement link node spaceList
{ /* console.warn('vs',$1.stmt,$3); */ yy.addLink($1.stmt,$3,$2); $$ = { stmt: $3, nodes: $3.concat($1.nodes) } }
|node spaceList {/*console.warn('noda', $1);*/ $$ = {stmt: $1, nodes:$1 }}
|node { /*console.warn('noda', $1);*/ $$ = {stmt: $1, nodes:$1 }}
{ /* console.warn('vs',$verticeStatement.stmt,$node); */ yy.addLink($verticeStatement.stmt,$node,$link); $$ = { stmt: $node, nodes: $node.concat($verticeStatement.nodes) } }
|node spaceList {/*console.warn('noda', $node);*/ $$ = {stmt: $node, nodes:$node }}
|node { /*console.warn('noda', $node);*/ $$ = {stmt: $node, nodes:$node }}
;
node: styledVertex
{ /* console.warn('nod', $1); */ $$ = [$1];}
{ /* console.warn('nod', $styledVertex); */ $$ = [$styledVertex];}
| node spaceList AMP spaceList styledVertex
{ $$ = $1.concat($5); /* console.warn('pip', $1[0], $5, $$); */ }
{ $$ = $node.concat($styledVertex); /* console.warn('pip', $node[0], $styledVertex, $$); */ }
;
styledVertex: vertex
{ /* console.warn('nod', $1); */ $$ = $1;}
{ /* console.warn('nod', $vertex); */ $$ = $vertex;}
| vertex STYLE_SEPARATOR idString
{$$ = $1;yy.setClass($1,$3)}
{$$ = $vertex;yy.setClass($vertex,$idString)}
;
vertex: idString SQS text SQE
{$$ = $1;yy.addVertex($1,$3,'square');}
{$$ = $idString;yy.addVertex($idString,$text,'square');}
| idString DOUBLECIRCLESTART text DOUBLECIRCLEEND
{$$ = $1;yy.addVertex($1,$3,'doublecircle');}
{$$ = $idString;yy.addVertex($idString,$text,'doublecircle');}
| idString PS PS text PE PE
{$$ = $1;yy.addVertex($1,$4,'circle');}
{$$ = $idString;yy.addVertex($idString,$text,'circle');}
| idString '(-' text '-)'
{$$ = $1;yy.addVertex($1,$3,'ellipse');}
{$$ = $idString;yy.addVertex($idString,$text,'ellipse');}
| idString STADIUMSTART text STADIUMEND
{$$ = $1;yy.addVertex($1,$3,'stadium');}
{$$ = $idString;yy.addVertex($idString,$text,'stadium');}
| idString SUBROUTINESTART text SUBROUTINEEND
{$$ = $1;yy.addVertex($1,$3,'subroutine');}
| idString VERTEX_WITH_PROPS_START ALPHA COLON ALPHA PIPE text SQE
{$$ = $1;yy.addVertex($1,$7,'rect',undefined,undefined,undefined, Object.fromEntries([[$3, $5]]));}
{$$ = $idString;yy.addVertex($idString,$text,'subroutine');}
| idString VERTEX_WITH_PROPS_START NODE_STRING\[field] COLON NODE_STRING\[value] PIPE text SQE
{$$ = $idString;yy.addVertex($idString,$text,'rect',undefined,undefined,undefined, Object.fromEntries([[$field, $value]]));}
| idString CYLINDERSTART text CYLINDEREND
{$$ = $1;yy.addVertex($1,$3,'cylinder');}
{$$ = $idString;yy.addVertex($idString,$text,'cylinder');}
| idString PS text PE
{$$ = $1;yy.addVertex($1,$3,'round');}
{$$ = $idString;yy.addVertex($idString,$text,'round');}
| idString DIAMOND_START text DIAMOND_STOP
{$$ = $1;yy.addVertex($1,$3,'diamond');}
{$$ = $idString;yy.addVertex($idString,$text,'diamond');}
| idString DIAMOND_START DIAMOND_START text DIAMOND_STOP DIAMOND_STOP
{$$ = $1;yy.addVertex($1,$4,'hexagon');}
{$$ = $idString;yy.addVertex($idString,$text,'hexagon');}
| idString TAGEND text SQE
{$$ = $1;yy.addVertex($1,$3,'odd');}
{$$ = $idString;yy.addVertex($idString,$text,'odd');}
| idString TRAPSTART text TRAPEND
{$$ = $1;yy.addVertex($1,$3,'trapezoid');}
{$$ = $idString;yy.addVertex($idString,$text,'trapezoid');}
| idString INVTRAPSTART text INVTRAPEND
{$$ = $1;yy.addVertex($1,$3,'inv_trapezoid');}
{$$ = $idString;yy.addVertex($idString,$text,'inv_trapezoid');}
| idString TRAPSTART text INVTRAPEND
{$$ = $1;yy.addVertex($1,$3,'lean_right');}
{$$ = $idString;yy.addVertex($idString,$text,'lean_right');}
| idString INVTRAPSTART text TRAPEND
{$$ = $1;yy.addVertex($1,$3,'lean_left');}
{$$ = $idString;yy.addVertex($idString,$text,'lean_left');}
| idString
{ /*console.warn('h: ', $1);*/$$ = $1;yy.addVertex($1);}
{ /*console.warn('h: ', $idString);*/$$ = $idString;yy.addVertex($idString);}
;
link: linkStatement arrowText
{$1.text = $2;$$ = $1;}
{$linkStatement.text = $arrowText;$$ = $linkStatement;}
| linkStatement TESTSTR SPACE
{$1.text = $2;$$ = $1;}
{$linkStatement.text = $TESTSTR;$$ = $linkStatement;}
| linkStatement arrowText SPACE
{$1.text = $2;$$ = $1;}
{$linkStatement.text = $arrowText;$$ = $linkStatement;}
| linkStatement
{$$ = $1;}
| START_LINK text LINK
{var inf = yy.destructLink($3, $1); $$ = {"type":inf.type,"stroke":inf.stroke,"length":inf.length,"text":$2};}
{$$ = $linkStatement;}
| START_LINK edgeText LINK
{var inf = yy.destructLink($LINK, $START_LINK); $$ = {"type":inf.type,"stroke":inf.stroke,"length":inf.length,"text":$edgeText};}
;
edgeText: edgeTextToken
{$$={text:$edgeTextToken, type:'text'};}
| edgeText edgeTextToken
{$$={text:$edgeText.text+''+$edgeTextToken, type:$edgeText.type};}
|STR
{$$={text: $STR, type: 'string'};}
| MD_STR
{$$={text:$MD_STR, type:'markdown'};}
;
linkStatement: LINK
{var inf = yy.destructLink($1);$$ = {"type":inf.type,"stroke":inf.stroke,"length":inf.length};}
{var inf = yy.destructLink($LINK);$$ = {"type":inf.type,"stroke":inf.stroke,"length":inf.length};}
;
arrowText:
PIPE text PIPE
{$$ = $2;}
{$$ = $text;}
;
text: textToken
{ $$={text:$1, type: 'text'};}
{ $$={text:$textToken, type: 'text'};}
| text textToken
{ $$={text:$1.text+''+$2, type: $1.type};}
{ $$={text:$text.text+''+$textToken, type: $text.type};}
| STR
{ $$={text: $1, type: 'text'};}
{ $$ = {text: $STR, type: 'string'};}
| MD_STR
{ $$={text: $1, type: 'markdown'};}
{ $$={text: $MD_STR, type: 'markdown'};}
;
@ -456,109 +498,104 @@ keywords
textNoTags: textNoTagsToken
{$$=$1;}
{$$={text:$textNoTagsToken, type: 'text'};}
| textNoTags textNoTagsToken
{$$=$1+''+$2;}
{$$={text:$textNoTags.text+''+$textNoTagsToken, type: $textNoTags.type};}
| STR
{ $$={text: $STR, type: 'text'};}
| MD_STR
{ $$={text: $MD_STR, type: 'markdown'};}
;
classDefStatement:CLASSDEF SPACE DEFAULT SPACE stylesOpt
{$$ = $1;yy.addClass($3,$5);}
| CLASSDEF SPACE alphaNum SPACE stylesOpt
{$$ = $1;yy.addClass($3,$5);}
classDefStatement:CLASSDEF SPACE idString SPACE stylesOpt
{$$ = $CLASSDEF;yy.addClass($idString,$stylesOpt);}
;
classStatement:CLASS SPACE alphaNum SPACE alphaNum
{$$ = $1;yy.setClass($3, $5);}
classStatement:CLASS SPACE idString\[vertex] SPACE idString\[class]
{$$ = $CLASS;yy.setClass($vertex, $class);}
;
clickStatement
: CLICK CALLBACKNAME {$$ = $1;yy.setClickEvent($1, $2);}
| CLICK CALLBACKNAME SPACE STR {$$ = $1;yy.setClickEvent($1, $2);yy.setTooltip($1, $4);}
| CLICK CALLBACKNAME CALLBACKARGS {$$ = $1;yy.setClickEvent($1, $2, $3);}
| CLICK CALLBACKNAME CALLBACKARGS SPACE STR {$$ = $1;yy.setClickEvent($1, $2, $3);yy.setTooltip($1, $5);}
| CLICK HREF {$$ = $1;yy.setLink($1, $2);}
| CLICK HREF SPACE STR {$$ = $1;yy.setLink($1, $2);yy.setTooltip($1, $4);}
| CLICK HREF SPACE LINK_TARGET {$$ = $1;yy.setLink($1, $2, $4);}
| CLICK HREF SPACE STR SPACE LINK_TARGET {$$ = $1;yy.setLink($1, $2, $6);yy.setTooltip($1, $4);}
| CLICK alphaNum {$$ = $1;yy.setClickEvent($1, $2);}
| CLICK alphaNum SPACE STR {$$ = $1;yy.setClickEvent($1, $2);yy.setTooltip($1, $4);}
| CLICK STR {$$ = $1;yy.setLink($1, $2);}
| CLICK STR SPACE STR {$$ = $1;yy.setLink($1, $2);yy.setTooltip($1, $4);}
| CLICK STR SPACE LINK_TARGET {$$ = $1;yy.setLink($1, $2, $4);}
| CLICK STR SPACE STR SPACE LINK_TARGET {$$ = $1;yy.setLink($1, $2, $6);yy.setTooltip($1, $4);}
: CLICK CALLBACKNAME {$$ = $CLICK;yy.setClickEvent($CLICK, $CALLBACKNAME);}
| CLICK CALLBACKNAME SPACE STR {$$ = $CLICK;yy.setClickEvent($CLICK, $CALLBACKNAME);yy.setTooltip($CLICK, $STR);}
| CLICK CALLBACKNAME CALLBACKARGS {$$ = $CLICK;yy.setClickEvent($CLICK, $CALLBACKNAME, $CALLBACKARGS);}
| CLICK CALLBACKNAME CALLBACKARGS SPACE STR {$$ = $CLICK;yy.setClickEvent($CLICK, $CALLBACKNAME, $CALLBACKARGS);yy.setTooltip($CLICK, $STR);}
| CLICK HREF STR {$$ = $CLICK;yy.setLink($CLICK, $STR);}
| CLICK HREF STR SPACE STR {$$ = $CLICK;yy.setLink($CLICK, $STR1);yy.setTooltip($CLICK, $STR2);}
| CLICK HREF STR SPACE LINK_TARGET {$$ = $CLICK;yy.setLink($CLICK, $STR, $LINK_TARGET);}
| CLICK HREF STR\[link] SPACE STR\[tooltip] SPACE LINK_TARGET {$$ = $CLICK;yy.setLink($CLICK, $link, $LINK_TARGET);yy.setTooltip($CLICK, $tooltip);}
| CLICK alphaNum {$$ = $CLICK;yy.setClickEvent($CLICK, $alphaNum);}
| CLICK alphaNum SPACE STR {$$ = $CLICK;yy.setClickEvent($CLICK, $alphaNum);yy.setTooltip($CLICK, $STR);}
| CLICK STR {$$ = $CLICK;yy.setLink($CLICK, $STR);}
| CLICK STR\[link] SPACE STR\[tooltip] {$$ = $CLICK;yy.setLink($CLICK, $link);yy.setTooltip($CLICK, $tooltip);}
| CLICK STR SPACE LINK_TARGET {$$ = $CLICK;yy.setLink($CLICK, $STR, $LINK_TARGET);}
| CLICK STR\[link] SPACE STR\[tooltip] SPACE LINK_TARGET {$$ = $CLICK;yy.setLink($CLICK, $link, $LINK_TARGET);yy.setTooltip($CLICK, $tooltip);}
;
styleStatement:STYLE SPACE alphaNum SPACE stylesOpt
{$$ = $1;yy.addVertex($3,undefined,undefined,$5);}
| STYLE SPACE HEX SPACE stylesOpt
{$$ = $1;yy.updateLink($3,$5);}
styleStatement:STYLE SPACE idString SPACE stylesOpt
{$$ = $STYLE;yy.addVertex($idString,undefined,undefined,$stylesOpt);}
;
linkStyleStatement
: LINKSTYLE SPACE DEFAULT SPACE stylesOpt
{$$ = $1;yy.updateLink([$3],$5);}
{$$ = $LINKSTYLE;yy.updateLink([$DEFAULT],$stylesOpt);}
| LINKSTYLE SPACE numList SPACE stylesOpt
{$$ = $1;yy.updateLink($3,$5);}
{$$ = $LINKSTYLE;yy.updateLink($numList,$stylesOpt);}
| LINKSTYLE SPACE DEFAULT SPACE INTERPOLATE SPACE alphaNum SPACE stylesOpt
{$$ = $1;yy.updateLinkInterpolate([$3],$7);yy.updateLink([$3],$9);}
{$$ = $LINKSTYLE;yy.updateLinkInterpolate([$DEFAULT],$alphaNum);yy.updateLink([$DEFAULT],$stylesOpt);}
| LINKSTYLE SPACE numList SPACE INTERPOLATE SPACE alphaNum SPACE stylesOpt
{$$ = $1;yy.updateLinkInterpolate($3,$7);yy.updateLink($3,$9);}
{$$ = $LINKSTYLE;yy.updateLinkInterpolate($numList,$alphaNum);yy.updateLink($numList,$stylesOpt);}
| LINKSTYLE SPACE DEFAULT SPACE INTERPOLATE SPACE alphaNum
{$$ = $1;yy.updateLinkInterpolate([$3],$7);}
{$$ = $LINKSTYLE;yy.updateLinkInterpolate([$DEFAULT],$alphaNum);}
| LINKSTYLE SPACE numList SPACE INTERPOLATE SPACE alphaNum
{$$ = $1;yy.updateLinkInterpolate($3,$7);}
{$$ = $LINKSTYLE;yy.updateLinkInterpolate($numList,$alphaNum);}
;
numList: NUM
{$$ = [$1]}
{$$ = [$NUM]}
| numList COMMA NUM
{$1.push($3);$$ = $1;}
{$numList.push($NUM);$$ = $numList;}
;
stylesOpt: style
{$$ = [$1]}
{$$ = [$style]}
| stylesOpt COMMA style
{$1.push($3);$$ = $1;}
{$stylesOpt.push($style);$$ = $stylesOpt;}
;
style: styleComponent
|style styleComponent
{$$ = $1 + $2;}
{$$ = $style + $styleComponent;}
;
styleComponent: ALPHA | COLON | MINUS | NUM | UNIT | SPACE | HEX | BRKT | DOT | STYLE | PCT ;
styleComponent: NUM | NODE_STRING| COLON | UNIT | SPACE | BRKT | STYLE | PCT ;
/* Token lists */
idStringToken : NUM | NODE_STRING | DOWN | MINUS | DEFAULT | COMMA | COLON | AMP | BRKT | MULT | UNICODE_TEXT;
textToken : textNoTagsToken | TAGSTART | TAGEND | START_LINK | PCT | DEFAULT;
textToken : TEXT | TAGSTART | TAGEND | UNICODE_TEXT;
textNoTagsToken: alphaNumToken | SPACE | MINUS | keywords ;
textNoTagsToken: NUM | NODE_STRING | SPACE | MINUS | AMP | UNICODE_TEXT | COLON | MULT | BRKT | keywords | START_LINK ;
edgeTextToken : EDGE_TEXT | UNICODE_TEXT ;
alphaNumToken : NUM | UNICODE_TEXT | NODE_STRING | DIR | DOWN | MINUS | COMMA | COLON | AMP | BRKT | MULT;
idString
:idStringToken
{$$=$1}
{$$=$idStringToken}
| idString idStringToken
{$$=$1+''+$2}
{$$=$idString+''+$idStringToken}
;
alphaNum
: alphaNumStatement
{$$=$1;}
| alphaNum alphaNumStatement
{$$=$1+''+$2;}
: alphaNumToken
{$$=$alphaNumToken;}
| alphaNum alphaNumToken
{$$=$alphaNum+''+$alphaNumToken;}
;
alphaNumStatement
: DIR
{$$=$1;}
| alphaNumToken
{$$=$1;}
| DOWN
{$$='v';}
| MINUS
{$$='-';}
;
direction
: direction_tb
@ -571,9 +608,4 @@ direction
{ $$={stmt:'dir', value:'LR'};}
;
alphaNumToken : PUNCTUATION | AMP | UNICODE_TEXT | NUM| ALPHA | COLON | COMMA | PLUS | EQUALS | MULT | DOT | BRKT| UNDERSCORE ;
idStringToken : ALPHA|UNDERSCORE |UNICODE_TEXT | NUM| COLON | COMMA | PLUS | MINUS | DOWN |EQUALS | MULT | BRKT | DOT | PUNCTUATION | AMP | DEFAULT;
graphCodeTokens: STADIUMSTART | STADIUMEND | SUBROUTINESTART | SUBROUTINEEND | VERTEX_WITH_PROPS_START | CYLINDERSTART | CYLINDEREND | TRAPSTART | TRAPEND | INVTRAPSTART | INVTRAPEND | PIPE | PS | PE | SQS | SQE | DIAMOND_START | DIAMOND_STOP | TAGSTART | TAGEND | ARROW_CROSS | ARROW_POINT | ARROW_CIRCLE | ARROW_OPEN | QUOTE | SEMI;
%%

View File

@ -1,4 +1,4 @@
// @ts-ignore: TODO Fix ts errors
// @ts-ignore: JISON doesn't support types
import ganttParser from './parser/gantt.jison';
import ganttDb from './ganttDb.js';
import ganttRenderer from './ganttRenderer.js';

View File

@ -1,4 +1,4 @@
// @ts-ignore: TODO Fix ts errors
// @ts-ignore: JISON doesn't support types
import gitGraphParser from './parser/gitGraph.jison';
import gitGraphDb from './gitGraphAst.js';
import gitGraphRenderer from './gitGraphRenderer.js';

View File

@ -1,7 +1,7 @@
import { select } from 'd3';
import { log } from '../../logger.js';
import { getConfig } from '../../config.js';
import type { DrawDefinition, HTML, SVG } from '../../diagram-api/types.js';
import { configureSvgSize } from '../../setupGraphViewbox.js';
import type { DrawDefinition, Group, SVG } from '../../diagram-api/types.js';
import { selectSvgElement } from '../../rendering-util/selectSvgElement.js';
/**
* Draws a an info picture in the tag with id: id based on the graph definition in text.
@ -11,40 +11,20 @@ import type { DrawDefinition, HTML, SVG } from '../../diagram-api/types.js';
* @param version - MermaidJS version.
*/
const draw: DrawDefinition = (text, id, version) => {
try {
log.debug('rendering info diagram\n' + text);
log.debug('rendering info diagram\n' + text);
const { securityLevel } = getConfig();
// handle root and document for when rendering in sandbox mode
let sandboxElement: HTML | undefined;
let document: Document | null | undefined;
if (securityLevel === 'sandbox') {
sandboxElement = select('#i' + id);
document = sandboxElement.nodes()[0].contentDocument;
}
const svg: SVG = selectSvgElement(id);
configureSvgSize(svg, 100, 400, true);
// @ts-ignore - figure out how to assign HTML to document type
const root: HTML =
sandboxElement !== undefined && document !== undefined && document !== null
? select(document)
: select('body');
const svg: SVG = root.select('#' + id);
svg.attr('height', 100);
svg.attr('width', 400);
const g = svg.append('g');
g.append('text') // text label for the x axis
.attr('x', 100)
.attr('y', 40)
.attr('class', 'version')
.attr('font-size', '32px')
.style('text-anchor', 'middle')
.text('v ' + version);
} catch (e) {
log.error('error while rendering info diagram', e);
}
const group: Group = svg.append('g');
group
.append('text')
.attr('x', 100)
.attr('y', 40)
.attr('class', 'version')
.attr('font-size', 32)
.style('text-anchor', 'middle')
.text(`v${version}`);
};
export const renderer = { draw };

View File

@ -1,4 +1,4 @@
// @ts-ignore: TODO Fix ts errors
// @ts-ignore: JISON doesn't support types
import mindmapParser from './parser/mindmap.jison';
import * as mindmapDb from './mindmapDb.js';
import mindmapRenderer from './mindmapRenderer.js';

View File

@ -1,5 +1,5 @@
import { DiagramDefinition } from '../../diagram-api/types.js';
// @ts-ignore: TODO Fix ts errors
// @ts-ignore: JISON doesn't support types
import parser from './parser/pie.jison';
import db from './pieDb.js';
import styles from './styles.js';

View File

@ -1,4 +1,4 @@
// @ts-ignore: TODO Fix ts errors
// @ts-ignore: JISON doesn't support types
import { parser } from './quadrant.jison';
import { Mock, vi } from 'vitest';

View File

@ -1,5 +1,5 @@
import { DiagramDefinition } from '../../diagram-api/types.js';
// @ts-ignore: TODO Fix ts errors
// @ts-ignore: JISON doesn't support types
import parser from './parser/quadrant.jison';
import db from './quadrantDb.js';
import renderer from './quadrantRenderer.js';

View File

@ -1,5 +1,5 @@
import { DiagramDefinition } from '../../diagram-api/types.js';
// @ts-ignore: TODO Fix ts errors
// @ts-ignore: JISON doesn't support types
import parser from './parser/requirementDiagram.jison';
import db from './requirementDb.js';
import styles from './styles.js';

View File

@ -172,14 +172,11 @@ describe('more than one sequence diagram', () => {
describe('when parsing a sequenceDiagram', function () {
beforeEach(function () {
// diagram.db = sequenceDb;
// diagram.db.clear();
diagram = new Diagram(`
sequenceDiagram
Alice->Bob:Hello Bob, how are you?
Note right of Bob: Bob thinks
Bob-->Alice: I am good thanks!`);
diagram.db.clear();
});
it('should handle a sequenceDiagram definition', async function () {
const str = `
@ -1482,8 +1479,6 @@ describe('when checking the bounds in a sequenceDiagram', function () {
let conf;
beforeEach(function () {
mermaidAPI.reset();
// diagram.db = sequenceDb;
// diagram.db.clear();
diagram.renderer.bounds.init();
conf = diagram.db.getConfig();
});
@ -1635,7 +1630,6 @@ sequenceDiagram
Alice->Bob:Hello Bob, how are you?
Note right of Bob: Bob thinks
Bob-->Alice: I am good thanks!`);
diagram.db.clear();
});
['tspan', 'fo', 'old', undefined].forEach(function (textPlacement) {
it(`
@ -2009,8 +2003,6 @@ describe('when rendering a sequenceDiagram with actor mirror activated', () => {
let conf;
beforeEach(function () {
mermaidAPI.reset();
// diagram.db = sequenceDb;
diagram.db.clear();
conf = diagram.db.getConfig();
diagram.renderer.bounds.init();
});
@ -2052,12 +2044,8 @@ describe('when rendering a sequenceDiagram with directives', () => {
mermaidAPI.initialize({ sequence: conf });
});
let conf;
beforeEach(function () {
mermaidAPI.reset();
// diagram.db = sequenceDb;
diagram.db.clear();
conf = diagram.db.getConfig();
diagram.renderer.bounds.init();
});
@ -2069,10 +2057,7 @@ sequenceDiagram
participant Alice
`;
diagram = new Diagram(str);
diagram.renderer.bounds.init();
await mermaidAPI.parse(str);
diagram.renderer.draw(str, 'tst', '1.2.3', diagram);
const { bounds, models } = diagram.renderer.bounds.getBounds();
@ -2093,7 +2078,7 @@ sequenceDiagram
participant Alice
`;
diagram.parse(str);
diagram = new Diagram(str);
diagram.renderer.draw(str, 'tst', '1.2.3', diagram);
const { bounds, models } = diagram.renderer.bounds.getBounds();
@ -2114,7 +2099,7 @@ Alice->Bob:Hello Bob, how are you?
Note right of Bob: Bob thinks
Bob-->Alice: I am good thanks!`;
await mermaidAPI.parse(str1);
diagram = new Diagram(str1);
diagram.renderer.draw(str1, 'tst', '1.2.3', diagram); // needs to be rendered for the correct value of visibility auto numbers
expect(diagram.db.showSequenceNumbers()).toBe(true);
@ -2124,7 +2109,7 @@ Alice->Bob:Hello Bob, how are you?
Note right of Bob: Bob thinks
Bob-->Alice: I am good thanks!`;
await mermaidAPI.parse(str2);
diagram = new Diagram(str2);
diagram.renderer.draw(str2, 'tst', '1.2.3', diagram);
expect(diagram.db.showSequenceNumbers()).toBe(false);
});

View File

@ -1,5 +1,5 @@
import { DiagramDefinition } from '../../diagram-api/types.js';
// @ts-ignore: TODO Fix ts errors
// @ts-ignore: JISON doesn't support types
import parser from './parser/sequenceDiagram.jison';
import db from './sequenceDb.js';
import styles from './styles.js';

View File

@ -749,9 +749,6 @@ function adjustCreatedDestroyedData(
export const draw = function (_text: string, id: string, _version: string, diagObj: Diagram) {
const { securityLevel, sequence } = configApi.getConfig();
conf = sequence;
diagObj.db.clear();
// Parse the graph definition
diagObj.parser.parse(_text);
// Handle root and Document for when rendering in sandbox mode
let sandboxElement;
if (securityLevel === 'sandbox') {

View File

@ -1,5 +1,5 @@
import { DiagramDefinition } from '../../diagram-api/types.js';
// @ts-ignore: TODO Fix ts errors
// @ts-ignore: JISON doesn't support types
import parser from './parser/stateDiagram.jison';
import db from './stateDb.js';
import styles from './styles.js';

View File

@ -1,5 +1,5 @@
import { DiagramDefinition } from '../../diagram-api/types.js';
// @ts-ignore: TODO Fix ts errors
// @ts-ignore: JISON doesn't support types
import parser from './parser/stateDiagram.jison';
import db from './stateDb.js';
import styles from './styles.js';

View File

@ -84,17 +84,8 @@ export const setConf = function (cnf) {
* @returns {object} ClassDef styles (a Map with keys = strings, values = )
*/
export const getClasses = function (text, diagramObj) {
log.trace('Extracting classes');
diagramObj.db.clear();
try {
// Parse the graph definition
diagramObj.parser.parse(text);
// must run extract() to turn the parsed statements into states, relationships, classes, etc.
diagramObj.db.extract(diagramObj.db.getRootDocV2());
return diagramObj.db.getClasses();
} catch (e) {
return e;
}
diagramObj.db.extract(diagramObj.db.getRootDocV2());
return diagramObj.db.getClasses();
};
/**
@ -384,7 +375,6 @@ const getDir = (parsedItem, defaultDir = DEFAULT_NESTED_DOC_DIR) => {
*/
export const draw = async function (text, id, _version, diag) {
log.info('Drawing state diagram (v2)', id);
// diag.sb.clear();
nodeDb = {};
// Fetch the default direction, use TD if none was found
let dir = diag.db.getDirection();

View File

@ -1,4 +1,4 @@
// @ts-ignore: TODO Fix ts errors
// @ts-ignore: JISON doesn't support types
import parser from './parser/timeline.jison';
import * as db from './timelineDb.js';
import renderer from './timelineRenderer.js';

View File

@ -1,5 +1,5 @@
import { DiagramDefinition } from '../../diagram-api/types.js';
// @ts-ignore: TODO Fix ts errors
// @ts-ignore: JISON doesn't support types
import parser from './parser/journey.jison';
import db from './journeyDb.js';
import styles from './styles.js';

View File

@ -4,7 +4,7 @@
#### Grammar
This would be to define a jison grammar for the new diagram type. That should start with a way to identify that the text in the mermaid tag is a diagram of that type. Create a new folder under diagrams for your new diagram type and a parser folder in it. This leads us to step 2.
This would be to define a JISON grammar for the new diagram type. That should start with a way to identify that the text in the mermaid tag is a diagram of that type. Create a new folder under diagrams for your new diagram type and a parser folder in it. This leads us to step 2.
For instance:
@ -55,7 +55,7 @@ Place the renderer in the diagram folder.
### Step 3: Detection of the new diagram type
The second thing to do is to add the capability to detect the new diagram to type to the detectType in utils.js. The detection should return a key for the new diagram type.
The second thing to do is to add the capability to detect the new diagram to type to the detectType in `diagram-api/detectType.ts`. The detection should return a key for the new diagram type.
[This key will be used to as the aria roledescription](#aria-roledescription), so it should be a word that clearly describes the diagram type.
For example, if your new diagram use a UML deployment diagram, a good key would be "UMLDeploymentDiagram" because assistive technologies such as a screen reader
would voice that as "U-M-L Deployment diagram." Another good key would be "deploymentDiagram" because that would be voiced as "Deployment Diagram." A bad key would be "deployment" because that would not sufficiently describe the diagram.
@ -119,53 +119,6 @@ There are a few features that are common between the different types of diagrams
Here some pointers on how to handle these different areas.
#### [Directives](../config/directives.md)
Here is example handling from flowcharts:
Jison:
```jison
/* lexical grammar */
%lex
%x open_directive
%x type_directive
%x arg_directive
%x close_directive
\%\%\{ { this.begin('open_directive'); return 'open_directive'; }
<open_directive>((?:(?!\}\%\%)[^:.])*) { this.begin('type_directive'); return 'type_directive'; }
<type_directive>":" { this.popState(); this.begin('arg_directive'); return ':'; }
<type_directive,arg_directive>\}\%\% { this.popState(); this.popState(); return 'close_directive'; }
<arg_directive>((?:(?!\}\%\%).|\n)*) return 'arg_directive';
/* language grammar */
/* ... */
directive
: openDirective typeDirective closeDirective separator
| openDirective typeDirective ':' argDirective closeDirective separator
;
openDirective
: open_directive { yy.parseDirective('%%{', 'open_directive'); }
;
typeDirective
: type_directive { yy.parseDirective($1, 'type_directive'); }
;
argDirective
: arg_directive { $1 = $1.trim().replace(/'/g, '"'); yy.parseDirective($1, 'arg_directive'); }
;
closeDirective
: close_directive { yy.parseDirective('}%%', 'close_directive', 'flowchart'); }
;
```
It is probably a good idea to keep the handling similar to this in your new diagram. The parseDirective function is provided by the mermaidAPI.
## Accessibility
Mermaid automatically adds the following accessibility information for the diagram SVG HTML element:
@ -184,7 +137,7 @@ See [the definition of aria-roledescription](https://www.w3.org/TR/wai-aria-1.1/
The syntax for accessible titles and descriptions is described in [the Accessibility documenation section.](../config/accessibility.md)
In a similar way to the directives, the jison syntax are quite similar between the diagrams.
As a design goal, the jison syntax should be similar between the diagrams.
```jison

View File

@ -21,17 +21,17 @@
},
"devDependencies": {
"@iconify-json/carbon": "^1.1.16",
"@unocss/reset": "^0.53.0",
"@unocss/reset": "^0.54.0",
"@vite-pwa/vitepress": "^0.2.0",
"@vitejs/plugin-vue": "^4.2.1",
"fast-glob": "^3.2.12",
"https-localhost": "^4.7.1",
"pathe": "^1.1.0",
"unocss": "^0.53.0",
"unocss": "^0.54.0",
"unplugin-vue-components": "^0.25.0",
"vite": "^4.3.3",
"vite": "^4.3.9",
"vite-plugin-pwa": "^0.16.0",
"vitepress": "1.0.0-beta.6",
"vitepress": "1.0.0-beta.7",
"workbox-window": "^7.0.0"
}
}

View File

@ -390,7 +390,7 @@ It is possible to escape characters using the syntax exemplified here.
```mermaid-example
flowchart LR
A["A double quote:#quot;"] -->B["A dec char:#9829;"]
A["A double quote:#quot;"] --> B["A dec char:#9829;"]
```
Numbers given are base 10, so `#` can be encoded as `#35;`. It is also supported to use HTML character names.

View File

@ -3,6 +3,7 @@ import { mermaidAPI } from './mermaidAPI.js';
import './diagram-api/diagram-orchestration.js';
import { addDiagrams } from './diagram-api/diagram-orchestration.js';
import { beforeAll, describe, it, expect, vi } from 'vitest';
import type { DiagramDefinition } from './diagram-api/types.js';
beforeAll(async () => {
addDiagrams();
@ -92,13 +93,16 @@ describe('when using mermaid and ', () => {
it('should defer diagram load based on parameter', async () => {
let loaded = false;
const dummyDiagram = {
const dummyDiagram: DiagramDefinition = {
db: {},
renderer: () => {
// do nothing
},
parser: () => {
// do nothing
parser: {
parse: (_text) => {
return;
},
parser: { yy: {} },
},
styles: () => {
// do nothing

View File

@ -108,8 +108,7 @@ export interface RenderResult {
async function parse(text: string, parseOptions?: ParseOptions): Promise<boolean> {
addDiagrams();
try {
const diagram = await getDiagramFromText(text);
diagram.parse();
await getDiagramFromText(text);
} catch (error) {
if (parseOptions?.suppressErrors) {
return false;
@ -285,7 +284,9 @@ export const cleanUpSvgCode = (
* TODO replace btoa(). Replace with buf.toString('base64')?
*/
export const putIntoIFrame = (svgCode = '', svgElement?: D3Element): string => {
const height = svgElement ? svgElement.viewBox.baseVal.height + 'px' : IFRAME_HEIGHT;
const height = svgElement?.viewBox?.baseVal?.height
? svgElement.viewBox.baseVal.height + 'px'
: IFRAME_HEIGHT;
const base64encodedSrc = btoa('<body style="' + IFRAME_BODY_STYLE + '">' + svgCode + '</body>');
return `<iframe style="width:${IFRAME_WIDTH};height:${height};${IFRAME_STYLES}" src="data:text/html;base64,${base64encodedSrc}" sandbox="${IFRAME_SANDBOX_OPTS}">
${IFRAME_NOT_SUPPORTED_MSG}

View File

@ -0,0 +1,22 @@
import { select } from 'd3';
import { getConfig } from '../config.js';
import type { HTML, SVG } from '../diagram-api/types.js';
/**
* Selects the SVG element using {@link id}.
*
* @param id - The diagram ID.
* @returns The selected {@link SVG} element using {@link id}.
*/
export const selectSvgElement = (id: string): SVG => {
const { securityLevel } = getConfig();
// handle root and document for when rendering in sandbox mode
let root: HTML = select('body');
if (securityLevel === 'sandbox') {
const sandboxElement: HTML = select(`#i${id}`);
const doc: Document = sandboxElement.node()?.contentDocument ?? document;
root = select(doc.body as HTMLIFrameElement);
}
const svg: SVG = root.select(`#${id}`);
return svg;
};

View File

@ -1,4 +1,5 @@
import { log } from './logger.js';
import { SVG } from './diagram-api/types.js';
/**
* Applies d3 attributes
@ -35,7 +36,7 @@ export const calculateSvgSizeAttrs = function (height, width, useMaxWidth) {
/**
* Applies attributes from `calculateSvgSizeAttrs`
*
* @param {SVGSVGElement} svgElem The SVG Element to configure
* @param {SVG} svgElem The SVG Element to configure
* @param {number} height The height of the SVG
* @param {number} width The width of the SVG
* @param {boolean} useMaxWidth Whether or not to use max-width and set width to 100%

View File

@ -19,7 +19,6 @@ import classDiagram from './diagrams/class/styles.js';
import flowchart from './diagrams/flowchart/styles.js';
import flowchartElk from './diagrams/flowchart/elk/styles.js';
import er from './diagrams/er/styles.js';
import error from './diagrams/error/styles.js';
import git from './diagrams/git/styles.js';
import gantt from './diagrams/gantt/styles.js';
import pie from './diagrams/pie/styles.js';
@ -86,7 +85,6 @@ describe('styles', () => {
c4,
classDiagram,
er,
error,
flowchart,
flowchartElk,
gantt,

View File

@ -1,5 +1,9 @@
lockfileVersion: '6.0'
settings:
autoInstallPeers: true
excludeLinksFromLockfile: false
importers:
.:
@ -152,8 +156,8 @@ importers:
specifier: ^1.0.1
version: 1.0.1
pnpm:
specifier: ^8.3.1
version: 8.3.1
specifier: ^8.6.8
version: 8.6.8
prettier:
specifier: ^2.8.8
version: 2.8.8
@ -188,8 +192,8 @@ importers:
packages/mermaid:
dependencies:
'@braintree/sanitize-url':
specifier: ^6.0.2
version: 6.0.2
specifier: ^6.0.1
version: 6.0.1
'@types/d3-scale':
specifier: ^4.0.3
version: 4.0.3
@ -218,7 +222,7 @@ importers:
specifier: ^1.11.7
version: 1.11.7
dompurify:
specifier: 3.0.5
specifier: ^3.0.5
version: 3.0.5
elkjs:
specifier: ^0.8.2
@ -372,8 +376,8 @@ importers:
packages/mermaid-example-diagram:
dependencies:
'@braintree/sanitize-url':
specifier: ^6.0.0
version: 6.0.0
specifier: ^6.0.1
version: 6.0.1
cytoscape:
specifier: ^3.23.0
version: 3.23.0
@ -409,8 +413,8 @@ importers:
packages/mermaid-zenuml:
dependencies:
'@zenuml/core':
specifier: ^3.0.3
version: 3.0.3(ts-node@10.9.1)
specifier: ^3.0.6
version: 3.0.6(ts-node@10.9.1)
devDependencies:
mermaid:
specifier: workspace:^
@ -432,14 +436,14 @@ importers:
specifier: ^1.1.16
version: 1.1.16
'@unocss/reset':
specifier: ^0.53.0
version: 0.53.0
specifier: ^0.54.0
version: 0.54.0
'@vite-pwa/vitepress':
specifier: ^0.2.0
version: 0.2.0(vite-plugin-pwa@0.16.0)
'@vitejs/plugin-vue':
specifier: ^4.2.1
version: 4.2.1(vite@4.3.3)(vue@3.2.47)
version: 4.2.1(vite@4.3.9)(vue@3.2.47)
fast-glob:
specifier: ^3.2.12
version: 3.2.12
@ -450,20 +454,20 @@ importers:
specifier: ^1.1.0
version: 1.1.0
unocss:
specifier: ^0.53.0
version: 0.53.0(postcss@8.4.27)(rollup@2.79.1)(vite@4.3.3)
specifier: ^0.54.0
version: 0.54.0(postcss@8.4.27)(rollup@2.79.1)(vite@4.3.9)
unplugin-vue-components:
specifier: ^0.25.0
version: 0.25.0(rollup@2.79.1)(vue@3.2.47)
vite:
specifier: ^4.3.3
version: 4.3.3(@types/node@18.16.0)
specifier: ^4.3.9
version: 4.3.9(@types/node@18.16.0)
vite-plugin-pwa:
specifier: ^0.16.0
version: 0.16.0(vite@4.3.3)(workbox-build@7.0.0)(workbox-window@7.0.0)
version: 0.16.0(vite@4.3.9)(workbox-build@7.0.0)(workbox-window@7.0.0)
vitepress:
specifier: 1.0.0-beta.6
version: 1.0.0-beta.6(@algolia/client-search@4.14.2)(@types/node@18.16.0)(search-insights@2.6.0)
specifier: 1.0.0-beta.7
version: 1.0.0-beta.7(@algolia/client-search@4.14.2)(@types/node@18.16.0)(search-insights@2.6.0)
workbox-window:
specifier: ^7.0.0
version: 7.0.0
@ -1100,7 +1104,7 @@ packages:
convert-source-map: 1.8.0
debug: 4.3.4(supports-color@8.1.1)
gensync: 1.0.0-beta.2
json5: 2.2.1
json5: 2.2.3
lodash: 4.17.21
resolve: 1.22.2
semver: 5.7.1
@ -2267,12 +2271,8 @@ packages:
resolution: {integrity: sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==}
dev: true
/@braintree/sanitize-url@6.0.0:
resolution: {integrity: sha512-mgmE7XBYY/21erpzhexk4Cj1cyTQ9LzvnTxtzM17BJ7ERMNE6W72mQRo0I1Ud8eFJ+RVVIcBNhLFZ3GX4XFz5w==}
dev: false
/@braintree/sanitize-url@6.0.2:
resolution: {integrity: sha512-Tbsj02wXCbqGmzdnXNk0SOF19ChhRU70BsroIi4Pm6Ehp56in6vch94mfbdQ17DozxkL3BAVjbZ4Qc1a0HFRAg==}
/@braintree/sanitize-url@6.0.1:
resolution: {integrity: sha512-zr9Qs9KFQiEvMWdZesjcmRJlUck5NR+eKGS1uyKk+oYTWwlYrsoPEi6VmG6/TzBD1hKCGEimrhTgGS6hvn/xIQ==}
dev: false
/@colors/colors@1.5.0:
@ -3582,14 +3582,14 @@ packages:
resolution: {integrity: sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==}
dev: true
/@iconify/utils@2.1.5:
resolution: {integrity: sha512-6MvDI+I6QMvXn5rK9KQGdpEE4mmLTcuQdLZEiX5N+uZB+vc4Yw9K1OtnOgkl8mp4d9X0UrILREyZgF1NUwUt+Q==}
/@iconify/utils@2.1.7:
resolution: {integrity: sha512-P8S3z/L1LcV4Qem9AoCfVAaTFGySEMzFEY4CHZLkfRj0Fv9LiR+AwjDgrDrzyI93U2L2mg9JHsbTJ52mF8suNw==}
dependencies:
'@antfu/install-pkg': 0.1.1
'@antfu/utils': 0.7.4
'@iconify/types': 2.0.0
debug: 4.3.4(supports-color@8.1.1)
kolorist: 1.7.0
kolorist: 1.8.0
local-pkg: 0.4.3
transitivePeerDependencies:
- supports-color
@ -4057,7 +4057,7 @@ packages:
resolution: {integrity: sha512-lR8q/9W7hZpMWweNiAKU7NQerBnzQQLvi8qnTDU/fxItPhtZVMbPV3lbCwjhIlNBe9Bbr5V+KHshvWmVSG9cxQ==}
dependencies:
ejs: 3.1.8
json5: 2.2.1
json5: 2.2.3
magic-string: 0.25.9
string.prototype.matchall: 4.0.8
dev: true
@ -4950,31 +4950,31 @@ packages:
eslint-visitor-keys: 3.4.0
dev: true
/@unocss/astro@0.53.0(rollup@2.79.1)(vite@4.3.3):
resolution: {integrity: sha512-8bR7ysIMZEOpcjd/cVmogcABSFDYPjUqMnbflv44p1A2/deemo9CIkpRARoq/96NQuzWJsKhKodcQodExZcqiA==}
/@unocss/astro@0.54.0(rollup@2.79.1)(vite@4.3.9):
resolution: {integrity: sha512-Zq4GGRiXbWCipN9lUKlu3fmlrqIYu3rFoGwjL+v7VJulP8tVhiqzfbLXFKQePOVvCmiSvCKr6leuqgFA7PlPBg==}
dependencies:
'@unocss/core': 0.53.0
'@unocss/reset': 0.53.0
'@unocss/vite': 0.53.0(rollup@2.79.1)(vite@4.3.3)
'@unocss/core': 0.54.0
'@unocss/reset': 0.54.0
'@unocss/vite': 0.54.0(rollup@2.79.1)(vite@4.3.9)
transitivePeerDependencies:
- rollup
- vite
dev: true
/@unocss/cli@0.53.0(rollup@2.79.1):
resolution: {integrity: sha512-9WNBHy8m8tMqwcp7mUhebRUBvHQfbx01CMe5cAFLmUYtJULM+8IjJxqERkaAZyyoOXf1TNO2v1dFAmCwhMRCLQ==}
/@unocss/cli@0.54.0(rollup@2.79.1):
resolution: {integrity: sha512-SuQkqJxuvC9JHUpHbFQY5r+6/FoF0j4zTwY25POlr9SIz3CFrdn4tDndxvhClap9d6wVHKSbHBP9EY0fA2SQzw==}
engines: {node: '>=14'}
hasBin: true
dependencies:
'@ampproject/remapping': 2.2.1
'@rollup/pluginutils': 5.0.2(rollup@2.79.1)
'@unocss/config': 0.53.0
'@unocss/core': 0.53.0
'@unocss/preset-uno': 0.53.0
'@unocss/config': 0.54.0
'@unocss/core': 0.54.0
'@unocss/preset-uno': 0.54.0
cac: 6.7.14
chokidar: 3.5.3
colorette: 2.0.20
consola: 3.1.0
consola: 3.2.3
fast-glob: 3.3.0
magic-string: 0.30.1
pathe: 1.1.1
@ -4983,158 +4983,158 @@ packages:
- rollup
dev: true
/@unocss/config@0.53.0:
resolution: {integrity: sha512-D9A3uFT6jSj/EgMOCpQQ+dPadLQDiEIb0BHa7BYW7/3STijnPMcFjPVjzABj9Wn7RQjka/MZ2/AvfH9eYMTR8g==}
/@unocss/config@0.54.0:
resolution: {integrity: sha512-FT0zOJCR2qr5P08msNovsJ4Qx+P4rXoYlK2zt/hgLKiFRIUKxnwSBDvapqmW6vo3vzOsdmBBO0YKpaZJ877F8A==}
engines: {node: '>=14'}
dependencies:
'@unocss/core': 0.53.0
'@unocss/core': 0.54.0
unconfig: 0.3.9
dev: true
/@unocss/core@0.53.0:
resolution: {integrity: sha512-MB6hqSN2wjmm3NNYspNqzxvMv7LnyLqz0uCWr15elRqnjsuq01w7DZ1iPS9ckA2M3YjQIRTXR9YPtDbSqY0jcA==}
/@unocss/core@0.54.0:
resolution: {integrity: sha512-iHfJJ8U+pVhMrbVpzMb0GImZUJu3Xmp165Q5Qr44hGOEzcMdvdBxbMSSl2VBKjRsEuNudNVhh7XJAyUcKxnSWg==}
dev: true
/@unocss/extractor-arbitrary-variants@0.53.0:
resolution: {integrity: sha512-f1v2E5PherulTAdrsXXb5Knaz4Viu2dM71WalNYhb+j9QqwGngagLrMzRzeIRLOEI2c0D0l7HBQtew+QFWsXcg==}
/@unocss/extractor-arbitrary-variants@0.54.0:
resolution: {integrity: sha512-luJTF3TnXFbMZ2Gau56p0uRsR+yIUbvHbT6ag6mvv0TvUsnhEFsMUdkXVJ1arp0duIl/dg0r1drL/Ax75RszNw==}
dependencies:
'@unocss/core': 0.53.0
'@unocss/core': 0.54.0
dev: true
/@unocss/inspector@0.53.0:
resolution: {integrity: sha512-TX8O39tXuEStUs516YBiCr2BS68Z9oHXnMZspxBxMma1X47bW2Hz+x9kWkhFzqmHWBjFPJob1PjjkbfeE4TbOQ==}
/@unocss/inspector@0.54.0:
resolution: {integrity: sha512-D3yVO7zE4NY/sARiNCUXQC7HPQZhEy7U1mSZEPc+vsVKx3nJJuRMqK9qo60SV4AZuxnd8WhL0T00W7cjVldzRw==}
dependencies:
gzip-size: 6.0.0
sirv: 2.0.3
dev: true
/@unocss/postcss@0.53.0(postcss@8.4.27):
resolution: {integrity: sha512-q+5aDvkwP1eEhDmdz32WrwsGEEcJdQLy3apiU/df+CaL71HATvUfMZJVZbXZlFqoed703c+cGLHOhRHMPDk/dw==}
/@unocss/postcss@0.54.0(postcss@8.4.27):
resolution: {integrity: sha512-t1PmIkp2Qa9F/9swfCVCXMuheQxd1ddrcvf0+d4fOckpFF8YhvOi+WfMoZW4YFwoCmG5pvDg4VYgKbDunGHhRg==}
engines: {node: '>=14'}
peerDependencies:
postcss: ^8.4.21
dependencies:
'@unocss/config': 0.53.0
'@unocss/core': 0.53.0
'@unocss/config': 0.54.0
'@unocss/core': 0.54.0
css-tree: 2.3.1
fast-glob: 3.3.0
magic-string: 0.30.1
postcss: 8.4.27
dev: true
/@unocss/preset-attributify@0.53.0:
resolution: {integrity: sha512-RqvSbuECeMBVVt2rmNIozznLBkfzkfe7vOIx3arytPBG/nggDnC1GB/xTxCGAiU7UcEXw03laWtjwXHmJHt8Gw==}
/@unocss/preset-attributify@0.54.0:
resolution: {integrity: sha512-5Ar1n7LHKF6z1BF9N5CR8jjl9TXrVktTDd+Ldyia69jDLi+stVhM9AOGEDE8wbDkLKwv9CK5XhvyPCazGHrG+A==}
dependencies:
'@unocss/core': 0.53.0
'@unocss/core': 0.54.0
dev: true
/@unocss/preset-icons@0.53.0:
resolution: {integrity: sha512-0Et3dtrmBRVPZ5pGiITrwb9O01M88s0juOVSM7L4z0Uf0RNXuPCGwh2N5TRX2IIS7LAi4k0tAXFUORlkUiC2Lg==}
/@unocss/preset-icons@0.54.0:
resolution: {integrity: sha512-WHdkpMzj6tohIkCc/+mEOzn0Yppqoz3y5zbI3WsDqA2/QFNSXx4haWcjV5iJI42uGcLXRp4K3l9JV3EL+oAxbg==}
dependencies:
'@iconify/utils': 2.1.5
'@unocss/core': 0.53.0
ofetch: 1.0.1
'@iconify/utils': 2.1.7
'@unocss/core': 0.54.0
ofetch: 1.1.1
transitivePeerDependencies:
- supports-color
dev: true
/@unocss/preset-mini@0.53.0:
resolution: {integrity: sha512-hGj9ltZUJIuPT+9bO+R0OlsQOSlV7rjQRkSSMnUaDsuKfzhahsyc7QglNHZI4wuTI/9iSJKGUD4nvTe559+8Hg==}
/@unocss/preset-mini@0.54.0:
resolution: {integrity: sha512-y+BnGpQAGC3ZWWZfXnsvUuTTO2rNnakHx4jIyf1cv7rw5oo7jL+ONb8stKqlmLGCzlQUKjG1xp+DGuKSVnRXBw==}
dependencies:
'@unocss/core': 0.53.0
'@unocss/extractor-arbitrary-variants': 0.53.0
'@unocss/core': 0.54.0
'@unocss/extractor-arbitrary-variants': 0.54.0
dev: true
/@unocss/preset-tagify@0.53.0:
resolution: {integrity: sha512-S3e1d2jJvjEbGBE0jPEht/Hmp+245SxjWcrDdO7HmKVL2+0vwIQQg6P2P9aUWqt+/kZQ6iBStSzGm9RyKRKMhw==}
/@unocss/preset-tagify@0.54.0:
resolution: {integrity: sha512-FTIZc0vMoX9+fcjPYMWALpCQp3cZQCFzR05CVJapvymxb6zl5eZq7e+tpvrmU9ZPSOdG+eHTd3SxhjeJSwh15g==}
dependencies:
'@unocss/core': 0.53.0
'@unocss/core': 0.54.0
dev: true
/@unocss/preset-typography@0.53.0:
resolution: {integrity: sha512-VFTNV8O9KIH/JX9Pn43Vv6JrCTljG9NYnuvZpKpEp95uYDcZQAISao04RWEzbAzqB31x8N9Aga1Bq2TSOg3uTA==}
/@unocss/preset-typography@0.54.0:
resolution: {integrity: sha512-QqHmC49nDgYeoOCMZp1OPn6R7ISIb2LMpSq81iuuFDeYO8J+JTBWe+Z1TZhVRAXwc9rsVZeUWW6PqoBGP9QCOw==}
dependencies:
'@unocss/core': 0.53.0
'@unocss/preset-mini': 0.53.0
'@unocss/core': 0.54.0
'@unocss/preset-mini': 0.54.0
dev: true
/@unocss/preset-uno@0.53.0:
resolution: {integrity: sha512-f50D2nFnX7nXvxtueUfCRbSCrWNJTFm4qKg0J9gzqyOJGWJoNcN2Ig9aL0P47W1TmIjYA5SpGlvg6U5qIfkNtQ==}
/@unocss/preset-uno@0.54.0:
resolution: {integrity: sha512-09/sthjGLDNMr/Cayu0Gy9jTMSxUuTfetWnM3jkByNidhfuzMW26eaMhxTrbUd28H8Titt6M+WgbJ7Gi0lQtZA==}
dependencies:
'@unocss/core': 0.53.0
'@unocss/preset-mini': 0.53.0
'@unocss/preset-wind': 0.53.0
'@unocss/core': 0.54.0
'@unocss/preset-mini': 0.54.0
'@unocss/preset-wind': 0.54.0
dev: true
/@unocss/preset-web-fonts@0.53.0:
resolution: {integrity: sha512-CAZW/PSp9+VBvzE/T56v2Yb8Nk3xF9XJaQrDydF9cAPyz/gVOZBbKQSDS8OqyAqKiXbnn+NYCwEqTG8v/YOMyw==}
/@unocss/preset-web-fonts@0.54.0:
resolution: {integrity: sha512-3x1SDbJ2omwNNc3eK19zOdNU6moJg4SEr09GkeV4MMHrMXM6BHW2mEJYFSVgmTVD1RN4LZuoy/gTHMWpJhTuzw==}
dependencies:
'@unocss/core': 0.53.0
ofetch: 1.0.1
'@unocss/core': 0.54.0
ofetch: 1.1.1
dev: true
/@unocss/preset-wind@0.53.0:
resolution: {integrity: sha512-vb9tV3Cze+w8OZyOd/Xi6Zn8F8+EV53AZIqCrQvMD/6ZeqQJ9gjFx/Q69H/bu009wnPleQpce6RKJcNqMzif8g==}
/@unocss/preset-wind@0.54.0:
resolution: {integrity: sha512-SO971KQOYzM5IKwGDBve+EWBKevU1T0mK20g17BHxPI++ubHPWRRQIh/xxHyew592taBFWK6Q75fcbOgIodx4w==}
dependencies:
'@unocss/core': 0.53.0
'@unocss/preset-mini': 0.53.0
'@unocss/core': 0.54.0
'@unocss/preset-mini': 0.54.0
dev: true
/@unocss/reset@0.53.0:
resolution: {integrity: sha512-4XJkEtVxUGYp+WX2aRTrZLNp6MEwulBvhhpkAjwfkS+wVdo9lMma0O93TCqJaFeYx7lU8W92APB4n918rz9scA==}
/@unocss/reset@0.54.0:
resolution: {integrity: sha512-zxvr96hVsmvJtxCLatLSCc67RBEgqvVDhEtkIFxIz5oCJzxvipJTGdKxM4F6Akyzx1A+q7zM8dimqvmC6D5Idw==}
dev: true
/@unocss/scope@0.53.0:
resolution: {integrity: sha512-JAk3jJeFTmmafVI8Oy/TkAs1/NXpR9Vy5IEIMO6gyAmYw0VjiL9dkYDNZAD9hwdj/oRIUgJMcX96Huhy+YDl/w==}
/@unocss/scope@0.54.0:
resolution: {integrity: sha512-47M3y3sl512BWZL5/aLrGPglQIRUjQrIW+WVVh3uzwIGVnDNHlxIhcHQUXXJuf8SLduXoIvcZQTfJt+jSXeuhA==}
dev: true
/@unocss/transformer-attributify-jsx-babel@0.53.0:
resolution: {integrity: sha512-++DTBEkFS2/1VE+TBPEmK0NAaCa/KP7dkJ7uldrQ+c5MpDp/IcCkOt8vPEL/6qKhUbTYXb/hruqq6wv27ZDrSg==}
/@unocss/transformer-attributify-jsx-babel@0.54.0:
resolution: {integrity: sha512-+YWhyReh6JZvGiYFZ61tyqkKOc/Tn+hyYaO7VP+G2IvJqtjTwzAuyxANHimCle7O4GLodouiHPe3lKscVFt0vg==}
dependencies:
'@unocss/core': 0.53.0
'@unocss/core': 0.54.0
dev: true
/@unocss/transformer-attributify-jsx@0.53.0:
resolution: {integrity: sha512-4QJEmoj2of7nZM8afNsMk+NWX3K89j1sHx+EKw5+s1r/Pg4/PxeDgF4PnRWvPnjvRpDaRRTZGRxTrBEimup8vg==}
/@unocss/transformer-attributify-jsx@0.54.0:
resolution: {integrity: sha512-in5IglhFqY/3GFe7IZA7g5Q9fskjiWAZiKtCTp5vFExagq1d3Tr9VIOA98SEXBrpXXIh3lKbTiY0NusJRU3K2Q==}
dependencies:
'@unocss/core': 0.53.0
'@unocss/core': 0.54.0
dev: true
/@unocss/transformer-compile-class@0.53.0:
resolution: {integrity: sha512-PTPysxBAimEWspMU3gMo+053M5RURnLT88Wp0y8f4F8oEMg7fV9Tn5f/bftvG+iI7dPyl4m/OsislxfucoESYw==}
/@unocss/transformer-compile-class@0.54.0:
resolution: {integrity: sha512-WK1fC+iDOl7Z7fO2ids6nWiMXMPHEfwMOs5dbv5lBz9UTrY1kpObToBsm3EfzhR6vwOTgld1UzpKAs3zCqZoKg==}
dependencies:
'@unocss/core': 0.53.0
'@unocss/core': 0.54.0
dev: true
/@unocss/transformer-directives@0.53.0:
resolution: {integrity: sha512-EIrrVphm0Bv+Ng2w1Qj5f0JFkfbN0b1/1fJ9hwgb5S2ewE3Xvwk59/h321D/GGDraQCUqqyZGgcG368xVh3pQA==}
/@unocss/transformer-directives@0.54.0:
resolution: {integrity: sha512-DJ9B5TSxScoj4B1C8H3qeUIfNGjUPuM42Lvl2exDEk4RhA/IwVePnCAjTl8UsHTDI9z+6H37v4p8j8srPrzEmQ==}
dependencies:
'@unocss/core': 0.53.0
'@unocss/core': 0.54.0
css-tree: 2.3.1
dev: true
/@unocss/transformer-variant-group@0.53.0:
resolution: {integrity: sha512-dwfjifgoa2VuO3LCl2ayRw3M5T6EfDKt16s9KbIRUcHqMJFnoHACAk8e4YsHGBvly0utbQHxFuBygOar3IfxEg==}
/@unocss/transformer-variant-group@0.54.0:
resolution: {integrity: sha512-qwviBwjBKhbXYK0T1wNuM3weY+RJbmrWmKqWTldXAuZDf0q06KAa4jQC8FF1YXhq5/Z6tn2MW2GFPVWd/8nPHQ==}
dependencies:
'@unocss/core': 0.53.0
'@unocss/core': 0.54.0
dev: true
/@unocss/vite@0.53.0(rollup@2.79.1)(vite@4.3.3):
resolution: {integrity: sha512-JoZhKVNruRjfySMVg/zNJbLEn/NTXj29Wf0SN4++xnGKrSapkPzYC46psL5bm5N5v4SHdpepTCoonC3FWCY6Fw==}
/@unocss/vite@0.54.0(rollup@2.79.1)(vite@4.3.9):
resolution: {integrity: sha512-lABmJKYs/yNfZZSs3xwVhBZwNhfLaYcdKxPAopJ8MKiUqECdWvHqLvklKQvLttZpN3dQUmGTQLblM+55IodKEw==}
peerDependencies:
vite: ^2.9.0 || ^3.0.0-0 || ^4.0.0
dependencies:
'@ampproject/remapping': 2.2.1
'@rollup/pluginutils': 5.0.2(rollup@2.79.1)
'@unocss/config': 0.53.0
'@unocss/core': 0.53.0
'@unocss/inspector': 0.53.0
'@unocss/scope': 0.53.0
'@unocss/transformer-directives': 0.53.0
'@unocss/config': 0.54.0
'@unocss/core': 0.54.0
'@unocss/inspector': 0.54.0
'@unocss/scope': 0.54.0
'@unocss/transformer-directives': 0.54.0
chokidar: 3.5.3
fast-glob: 3.3.0
magic-string: 0.30.1
vite: 4.3.3(@types/node@18.16.0)
vite: 4.3.9(@types/node@18.16.0)
transitivePeerDependencies:
- rollup
dev: true
@ -5144,17 +5144,17 @@ packages:
peerDependencies:
vite-plugin-pwa: '>=0.16.3 <1'
dependencies:
vite-plugin-pwa: 0.16.0(vite@4.3.3)(workbox-build@7.0.0)(workbox-window@7.0.0)
vite-plugin-pwa: 0.16.0(vite@4.3.9)(workbox-build@7.0.0)(workbox-window@7.0.0)
dev: true
/@vitejs/plugin-vue@4.2.1(vite@4.3.3)(vue@3.2.47):
/@vitejs/plugin-vue@4.2.1(vite@4.3.9)(vue@3.2.47):
resolution: {integrity: sha512-ZTZjzo7bmxTRTkb8GSTwkPOYDIP7pwuyV+RV53c9PYUouwcbkIZIvWvNWlX2b1dYZqtOv7D6iUAnJLVNGcLrSw==}
engines: {node: ^14.18.0 || >=16.0.0}
peerDependencies:
vite: ^4.0.0
vue: ^3.2.25
dependencies:
vite: 4.3.3(@types/node@18.16.0)
vite: 4.3.9(@types/node@18.16.0)
vue: 3.2.47
dev: true
@ -5169,14 +5169,14 @@ packages:
vue: 3.3.4
dev: true
/@vitejs/plugin-vue@4.2.3(vite@4.4.6)(vue@3.3.4):
/@vitejs/plugin-vue@4.2.3(vite@4.4.7)(vue@3.3.4):
resolution: {integrity: sha512-R6JDUfiZbJA9cMiguQ7jxALsgiprjBeHL5ikpXfJCH62pPHtI+JdJ5xWj6Ev73yXSlYl86+blXn1kZHQ7uElxw==}
engines: {node: ^14.18.0 || >=16.0.0}
peerDependencies:
vite: ^4.0.0
vue: ^3.2.25
dependencies:
vite: 4.4.6(@types/node@18.16.0)
vite: 4.4.7(@types/node@18.16.0)
vue: 3.3.4
dev: true
@ -5738,14 +5738,14 @@ packages:
resolution: {integrity: sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==}
dev: true
/@zenuml/core@3.0.3(ts-node@10.9.1):
resolution: {integrity: sha512-Wp6yF5iERvGXrR3z/mNhQYP2uI54Bd7RQ2ZwA26Lca+tufj4X8pfqGVSORLqbUl4wjjdcwHc2RNT8AU+cz2NCg==}
/@zenuml/core@3.0.6(ts-node@10.9.1):
resolution: {integrity: sha512-azEBVrl+ClCPhII92TbzBUFcWhIjlOPdEHVzF6eZXs5Oy4JlrfldS5pAZBHCFL4riOBsjZ5sHHmQLQg9V07T4Q==}
engines: {node: '>=12.0.0'}
dependencies:
'@types/assert': 1.5.6
'@types/ramda': 0.28.25
'@vue/compat': 3.3.4(vue@3.3.4)
antlr4: 4.13.0
antlr4: 4.11.0
color-string: 1.9.1
dom-to-image-more: 2.16.0
file-saver: 2.0.5
@ -6026,9 +6026,9 @@ packages:
engines: {node: '>=12'}
dev: true
/antlr4@4.13.0:
resolution: {integrity: sha512-zooUbt+UscjnWyOrsuY/tVFL4rwrAGwOivpQmvmUDE22hy/lUA467Rc1rcixyRwcRUIXFYBwv7+dClDSHdmmew==}
engines: {node: '>=16'}
/antlr4@4.11.0:
resolution: {integrity: sha512-GUGlpE2JUjAN+G8G5vY+nOoeyNhHsXoIJwP1XF1oRw89vifA1K46T6SEkwLwr7drihN7I/lf0DIjKc4OZvBX8w==}
engines: {node: '>=14'}
dev: false
/any-promise@1.3.0:
@ -7029,8 +7029,9 @@ packages:
engines: {node: '>=0.8'}
dev: true
/consola@3.1.0:
resolution: {integrity: sha512-rrrJE6rP0qzl/Srg+C9x/AE5Kxfux7reVm1Wh0wCjuXvih6DqZgqDZe8auTD28fzJ9TF0mHlSDrPpWlujQRo1Q==}
/consola@3.2.3:
resolution: {integrity: sha512-I5qxpzLv+sJhTVEoLYNcTW+bThDCPsit0vLNKShZx6rLtpilNpmmeTPaeqJb9ZE9dV3DGaeby6Vuhrw38WjeyQ==}
engines: {node: ^14.18.0 || >=16.10.0}
dev: true
/content-disposition@0.5.4:
@ -7966,8 +7967,8 @@ packages:
resolution: {integrity: sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==}
engines: {node: '>=6'}
/destr@1.2.2:
resolution: {integrity: sha512-lrbCJwD9saUQrqUfXvl6qoM+QN3W7tLV5pAOs+OqOmopCCz/JkE05MHedJR1xfk4IAnZuJXPVuN5+7jNA2ZCiA==}
/destr@2.0.0:
resolution: {integrity: sha512-FJ9RDpf3GicEBvzI3jxc2XhHzbqD8p4ANw/1kPsFBfTvP1b7Gn/Lg1vO7R9J4IVgoMbyUmFrFGZafJ1hPZpvlg==}
dev: true
/destroy@1.2.0:
@ -11087,8 +11088,8 @@ packages:
resolution: {integrity: sha512-ZClg6AaYvamvYEE82d3Iyd3vSSIjQ+odgjaTzRuO3s7toCdFKczob2i0zCh7JE8kWn17yvAWhUVxvqGwUalsRA==}
dev: true
/json5@2.2.1:
resolution: {integrity: sha512-1hqLFMSrGHRHxav9q9gNjJ5EXznIxGVO09xQRrwplcS8qs28pZ8s8hupZAmqDwZUmVZ2Qb2jnyPOWcDH8m8dlA==}
/json5@2.2.3:
resolution: {integrity: sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==}
engines: {node: '>=6'}
hasBin: true
dev: true
@ -11169,8 +11170,8 @@ packages:
resolution: {integrity: sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ==}
engines: {node: '>=6'}
/kolorist@1.7.0:
resolution: {integrity: sha512-ymToLHqL02udwVdbkowNpzjFd6UzozMtshPQKVi5k1EjKRqKqBrOnE9QbLEb0/pV76SAiIT13hdL8R6suc+f3g==}
/kolorist@1.8.0:
resolution: {integrity: sha512-Y+60/zizpJ3HRH8DCss+q95yr6145JXZo46OTpFvDZWLfRCE4qChOyk1b26nMaNpfHHgxagk9dXT5OP0Tfe+dQ==}
dev: true
/ky@0.30.0:
@ -12198,8 +12199,8 @@ packages:
engines: {node: '>=10.5.0'}
dev: true
/node-fetch-native@1.1.0:
resolution: {integrity: sha512-nl5goFCig93JZ9FIV8GHT9xpNqXbxQUzkOmKIMKmncsBH9jhg7qKex8hirpymkBFmNQ114chEEG5lS4wgK2I+Q==}
/node-fetch-native@1.2.0:
resolution: {integrity: sha512-5IAMBTl9p6PaAjYCnMv5FmqIF6GcZnawAVnzaCG0rX2aYZJ4CxEkZNtVPuTRug7fL7wyM5BQYTlAzcyMPi6oTQ==}
dev: true
/node-fetch@2.6.7:
@ -12397,12 +12398,12 @@ packages:
resolution: {integrity: sha512-PX1wu0AmAdPqOL1mWhqmlOd8kOIZQwGZw6rh7uby9fTc5lhaOWFLX3I6R1hrF9k3zUY40e6igsLGkDXK92LJNg==}
dev: true
/ofetch@1.0.1:
resolution: {integrity: sha512-icBz2JYfEpt+wZz1FRoGcrMigjNKjzvufE26m9+yUiacRQRHwnNlGRPiDnW4op7WX/MR6aniwS8xw8jyVelF2g==}
/ofetch@1.1.1:
resolution: {integrity: sha512-SSMoktrp9SNLi20BWfB/BnnKcL0RDigXThD/mZBeQxkIRv1xrd9183MtLdsqRYLYSqW0eTr5t8w8MqjNhvoOQQ==}
dependencies:
destr: 1.2.2
node-fetch-native: 1.1.0
ufo: 1.1.1
destr: 2.0.0
node-fetch-native: 1.2.0
ufo: 1.1.2
dev: true
/on-exit-leak-free@2.1.0:
@ -12871,8 +12872,8 @@ packages:
engines: {node: '>=12.13.0'}
dev: true
/pnpm@8.3.1:
resolution: {integrity: sha512-0mT2ZAv08J3nz8xUdWhRW88GE89IWgPo/xZhb6acQXK2+aCikl7kT7Bg31ZcnJqOrwYXSed68xjLd/ZoSnBR8w==}
/pnpm@8.6.8:
resolution: {integrity: sha512-OtrCRUE7VqRyKly9E3gfExZHOAHtFDpmulyVFKrnl3v/n2xJckdueVumWJqUA5FHxcRP/T42r8P8CDr9duPP9w==}
engines: {node: '>=16.14'}
hasBin: true
dev: true
@ -12946,24 +12947,6 @@ packages:
resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==}
dev: false
/postcss@8.4.23:
resolution: {integrity: sha512-bQ3qMcpF6A/YjR55xtoTr0jGOlnPOKAIMdOWiv0EIT6HVPEaJiJB4NLljSbiHoC2RX7DN5Uvjtpbg1NPdwv1oA==}
engines: {node: ^10 || ^12 || >=14}
dependencies:
nanoid: 3.3.6
picocolors: 1.0.0
source-map-js: 1.0.2
dev: true
/postcss@8.4.24:
resolution: {integrity: sha512-M0RzbcI0sO/XJNucsGjvWU9ERWxb/ytp1w6dKtxTKgixdtQDq4rmx/g8W1hnaheq9jgwL/oyEdH5Bc4WwJKMqg==}
engines: {node: ^10 || ^12 || >=14}
dependencies:
nanoid: 3.3.6
picocolors: 1.0.0
source-map-js: 1.0.2
dev: true
/postcss@8.4.27:
resolution: {integrity: sha512-gY/ACJtJPSmUFPDCHtX78+01fHa64FaU4zaaWfuh1MhGJISufJAH4cun6k/8fwsHYeK4UQmENQK+tRLCFJE8JQ==}
engines: {node: ^10 || ^12 || >=14}
@ -13570,14 +13553,6 @@ packages:
fsevents: 2.3.2
dev: true
/rollup@3.21.0:
resolution: {integrity: sha512-ANPhVcyeHvYdQMUyCbczy33nbLzI7RzrBje4uvNiTDJGIMtlKoOStmympwr9OtS1LZxiDmE2wvxHyVhoLtf1KQ==}
engines: {node: '>=14.18.0', npm: '>=8.0.0'}
hasBin: true
optionalDependencies:
fsevents: 2.3.2
dev: true
/rollup@3.26.0:
resolution: {integrity: sha512-YzJH0eunH2hr3knvF3i6IkLO/jTjAEwU4HoMUbQl4//Tnl3ou0e7P5SjxdDr8HQJdeUJShlbEHXrrnEHy1l7Yg==}
engines: {node: '>=14.18.0', npm: '>=8.0.0'}
@ -14918,10 +14893,6 @@ packages:
resolution: {integrity: sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA==}
dev: true
/ufo@1.1.1:
resolution: {integrity: sha512-MvlCc4GHrmZdAllBc0iUDowff36Q9Ndw/UzqmEKyrfSzokTd9ZCy1i+IIk5hrYKkjoYVQyNbrw7/F8XJ2rEwTg==}
dev: true
/ufo@1.1.2:
resolution: {integrity: sha512-TrY6DsjTQQgyS3E3dBaOXf0TpPD8u9FVrVYmKVegJuFw51n/YB9XPt+U6ydzFG5ZIN7+DIjPbNmXoBj9esYhgQ==}
dev: true
@ -15051,35 +15022,35 @@ packages:
engines: {node: '>= 10.0.0'}
dev: true
/unocss@0.53.0(postcss@8.4.27)(rollup@2.79.1)(vite@4.3.3):
resolution: {integrity: sha512-kY4h5ERiDYlSnL2X+hbDfh+uaF7QNouy7j51GOTUr3Q0aaWehaNd05b15SjHrab559dEC0mYfrSEdh/DnCK1cw==}
/unocss@0.54.0(postcss@8.4.27)(rollup@2.79.1)(vite@4.3.9):
resolution: {integrity: sha512-SXjyQqt/MP1uW8mjEmQaSa0zd+QB3FwaGD/ityNlu+zNRx1D03BPP9ACbJDB1zZKx4aodMVSsHZ3TV5wsu+VRQ==}
engines: {node: '>=14'}
peerDependencies:
'@unocss/webpack': 0.53.0
'@unocss/webpack': 0.54.0
peerDependenciesMeta:
'@unocss/webpack':
optional: true
dependencies:
'@unocss/astro': 0.53.0(rollup@2.79.1)(vite@4.3.3)
'@unocss/cli': 0.53.0(rollup@2.79.1)
'@unocss/core': 0.53.0
'@unocss/extractor-arbitrary-variants': 0.53.0
'@unocss/postcss': 0.53.0(postcss@8.4.27)
'@unocss/preset-attributify': 0.53.0
'@unocss/preset-icons': 0.53.0
'@unocss/preset-mini': 0.53.0
'@unocss/preset-tagify': 0.53.0
'@unocss/preset-typography': 0.53.0
'@unocss/preset-uno': 0.53.0
'@unocss/preset-web-fonts': 0.53.0
'@unocss/preset-wind': 0.53.0
'@unocss/reset': 0.53.0
'@unocss/transformer-attributify-jsx': 0.53.0
'@unocss/transformer-attributify-jsx-babel': 0.53.0
'@unocss/transformer-compile-class': 0.53.0
'@unocss/transformer-directives': 0.53.0
'@unocss/transformer-variant-group': 0.53.0
'@unocss/vite': 0.53.0(rollup@2.79.1)(vite@4.3.3)
'@unocss/astro': 0.54.0(rollup@2.79.1)(vite@4.3.9)
'@unocss/cli': 0.54.0(rollup@2.79.1)
'@unocss/core': 0.54.0
'@unocss/extractor-arbitrary-variants': 0.54.0
'@unocss/postcss': 0.54.0(postcss@8.4.27)
'@unocss/preset-attributify': 0.54.0
'@unocss/preset-icons': 0.54.0
'@unocss/preset-mini': 0.54.0
'@unocss/preset-tagify': 0.54.0
'@unocss/preset-typography': 0.54.0
'@unocss/preset-uno': 0.54.0
'@unocss/preset-web-fonts': 0.54.0
'@unocss/preset-wind': 0.54.0
'@unocss/reset': 0.54.0
'@unocss/transformer-attributify-jsx': 0.54.0
'@unocss/transformer-attributify-jsx-babel': 0.54.0
'@unocss/transformer-compile-class': 0.54.0
'@unocss/transformer-directives': 0.54.0
'@unocss/transformer-variant-group': 0.54.0
'@unocss/vite': 0.54.0(rollup@2.79.1)(vite@4.3.9)
transitivePeerDependencies:
- postcss
- rollup
@ -15288,7 +15259,7 @@ packages:
- supports-color
dev: true
/vite-plugin-pwa@0.16.0(vite@4.3.3)(workbox-build@7.0.0)(workbox-window@7.0.0):
/vite-plugin-pwa@0.16.0(vite@4.3.9)(workbox-build@7.0.0)(workbox-window@7.0.0):
resolution: {integrity: sha512-E+AQRzHxqNU4ZhEeR8X37/foZB+ezJEhXauE/mcf1UITY6k2Pa1dtlFl+BQu57fTdiVlWim5S0Qy44Yap93Dkg==}
engines: {node: '>=16.0.0'}
peerDependencies:
@ -15299,46 +15270,13 @@ packages:
debug: 4.3.4(supports-color@8.1.1)
fast-glob: 3.2.12
pretty-bytes: 6.1.0
vite: 4.3.3(@types/node@18.16.0)
vite: 4.3.9(@types/node@18.16.0)
workbox-build: 7.0.0
workbox-window: 7.0.0
transitivePeerDependencies:
- supports-color
dev: true
/vite@4.3.3(@types/node@18.16.0):
resolution: {integrity: sha512-MwFlLBO4udZXd+VBcezo3u8mC77YQk+ik+fbc0GZWGgzfbPP+8Kf0fldhARqvSYmtIWoAJ5BXPClUbMTlqFxrA==}
engines: {node: ^14.18.0 || >=16.0.0}
hasBin: true
peerDependencies:
'@types/node': '>= 14'
less: '*'
sass: '*'
stylus: '*'
sugarss: '*'
terser: ^5.4.0
peerDependenciesMeta:
'@types/node':
optional: true
less:
optional: true
sass:
optional: true
stylus:
optional: true
sugarss:
optional: true
terser:
optional: true
dependencies:
'@types/node': 18.16.0
esbuild: 0.17.18
postcss: 8.4.23
rollup: 3.21.0
optionalDependencies:
fsevents: 2.3.2
dev: true
/vite@4.3.8(@types/node@18.16.0):
resolution: {integrity: sha512-uYB8PwN7hbMrf4j1xzGDk/lqjsZvCDbt/JC5dyfxc19Pg8kRm14LinK/uq+HSLNswZEoKmweGdtpbnxRtrAXiQ==}
engines: {node: ^14.18.0 || >=16.0.0}
@ -15366,7 +15304,7 @@ packages:
dependencies:
'@types/node': 18.16.0
esbuild: 0.17.18
postcss: 8.4.24
postcss: 8.4.27
rollup: 3.26.0
optionalDependencies:
fsevents: 2.3.2
@ -15399,8 +15337,8 @@ packages:
dependencies:
'@types/node': 18.16.0
esbuild: 0.17.18
postcss: 8.4.23
rollup: 3.21.0
postcss: 8.4.27
rollup: 3.26.0
optionalDependencies:
fsevents: 2.3.2
dev: true
@ -15441,6 +15379,42 @@ packages:
fsevents: 2.3.2
dev: true
/vite@4.4.7(@types/node@18.16.0):
resolution: {integrity: sha512-6pYf9QJ1mHylfVh39HpuSfMPojPSKVxZvnclX1K1FyZ1PXDOcLBibdq5t1qxJSnL63ca8Wf4zts6mD8u8oc9Fw==}
engines: {node: ^14.18.0 || >=16.0.0}
hasBin: true
peerDependencies:
'@types/node': '>= 14'
less: '*'
lightningcss: ^1.21.0
sass: '*'
stylus: '*'
sugarss: '*'
terser: ^5.4.0
peerDependenciesMeta:
'@types/node':
optional: true
less:
optional: true
lightningcss:
optional: true
sass:
optional: true
stylus:
optional: true
sugarss:
optional: true
terser:
optional: true
dependencies:
'@types/node': 18.16.0
esbuild: 0.18.11
postcss: 8.4.27
rollup: 3.26.0
optionalDependencies:
fsevents: 2.3.2
dev: true
/vitepress-plugin-search@1.0.4-alpha.20(flexsearch@0.7.31)(vitepress@1.0.0-alpha.72)(vue@3.3.4):
resolution: {integrity: sha512-zG+ev9pw1Mg7htABlFCNXb8XwnKN+qfTKw+vU0Ers6RIrABx+45EAAFBoaL1mEpl1FRFn1o/dQ7F4b8GP6HdGQ==}
engines: {node: ^14.13.1 || ^16.7.0 || >=18}
@ -15487,13 +15461,13 @@ packages:
- terser
dev: true
/vitepress@1.0.0-beta.6(@algolia/client-search@4.14.2)(@types/node@18.16.0)(search-insights@2.6.0):
resolution: {integrity: sha512-xK/ulKgQpKZVbvlL4+/vW49VG7ySi5nmSoKUNH1G4kM+Cj9JwYM+PDJO7jSJROv8zW99G0ise+maDYnaLlbGBQ==}
/vitepress@1.0.0-beta.7(@algolia/client-search@4.14.2)(@types/node@18.16.0)(search-insights@2.6.0):
resolution: {integrity: sha512-P9Rw+FXatKIU4fVdtKxqwHl6fby8E/8zE3FIfep6meNgN4BxbWqoKJ6yfuuQQR9IrpQqwnyaBh4LSabyll6tWg==}
hasBin: true
dependencies:
'@docsearch/css': 3.5.1
'@docsearch/js': 3.5.1(@algolia/client-search@4.14.2)(search-insights@2.6.0)
'@vitejs/plugin-vue': 4.2.3(vite@4.4.6)(vue@3.3.4)
'@vitejs/plugin-vue': 4.2.3(vite@4.4.7)(vue@3.3.4)
'@vue/devtools-api': 6.5.0
'@vueuse/core': 10.2.1(vue@3.3.4)
'@vueuse/integrations': 10.2.1(focus-trap@7.5.2)(vue@3.3.4)
@ -15502,7 +15476,7 @@ packages:
mark.js: 8.11.1
minisearch: 6.1.0
shiki: 0.14.3
vite: 4.4.6(@types/node@18.16.0)
vite: 4.4.7(@types/node@18.16.0)
vue: 3.3.4
transitivePeerDependencies:
- '@algolia/client-search'
@ -15585,7 +15559,7 @@ packages:
strip-literal: 1.0.1
tinybench: 2.5.0
tinypool: 0.6.0
vite: 4.3.9(@types/node@18.16.0)
vite: 4.4.6(@types/node@18.16.0)
vite-node: 0.33.0(@types/node@18.16.0)
why-is-node-running: 2.2.2
transitivePeerDependencies: