marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-10-09 00:59:37 +02:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'develop' into bug/4645_graph_node_containing_keyword

Browse Source
This commit is contained in:
Ibrahim Wassouf
2023-08-01 11:07:25 -04:00
committed by GitHub
parent 7dc985712a 660162686b
commit daf43f8d34
5 changed files with 48 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
docs/community/newDiagram.md
View File

@@ -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. 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 ## Accessibility
Mermaid automatically adds the following accessibility information for the diagram SVG HTML element: 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) 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 ```jison

2
package.json
View File

@@ -4,7 +4,7 @@
"version": "10.2.4", "version": "10.2.4",
"description": "Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.", "description": "Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
"type": "module", "type": "module",
"packageManager": "pnpm@8.6.10", "packageManager": "pnpm@8.6.11",
"keywords": [ "keywords": [
"diagram", "diagram",
"markdown", "markdown",

49
packages/mermaid/src/docs/community/newDiagram.md
View File

@@ -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. 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 ## Accessibility
Mermaid automatically adds the following accessibility information for the diagram SVG HTML element: 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) 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 ```jison

2
packages/mermaid/src/docs/package.json
View File

@@ -31,7 +31,7 @@
"unplugin-vue-components": "^0.25.0", "unplugin-vue-components": "^0.25.0",
"vite": "^4.3.9", "vite": "^4.3.9",
"vite-plugin-pwa": "^0.16.0", "vite-plugin-pwa": "^0.16.0",
"vitepress": "1.0.0-beta.6", "vitepress": "1.0.0-beta.7",
"workbox-window": "^7.0.0" "workbox-window": "^7.0.0"
} }
} }

52
pnpm-lock.yaml generated
View File

@@ -466,8 +466,8 @@ importers:
specifier: ^0.16.0 specifier: ^0.16.0
version: 0.16.0(vite@4.3.9)(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: vitepress:
specifier: 1.0.0-beta.6 specifier: 1.0.0-beta.7
version: 1.0.0-beta.6(@algolia/client-search@4.14.2)(@types/node@18.16.0)(search-insights@2.6.0) version: 1.0.0-beta.7(@algolia/client-search@4.14.2)(@types/node@18.16.0)(search-insights@2.6.0)
workbox-window: workbox-window:
specifier: ^7.0.0 specifier: ^7.0.0
version: 7.0.0 version: 7.0.0
@@ -5169,14 +5169,14 @@ packages:
vue: 3.3.4 vue: 3.3.4
dev: true 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==} resolution: {integrity: sha512-R6JDUfiZbJA9cMiguQ7jxALsgiprjBeHL5ikpXfJCH62pPHtI+JdJ5xWj6Ev73yXSlYl86+blXn1kZHQ7uElxw==}
engines: {node: ^14.18.0 || >=16.0.0} engines: {node: ^14.18.0 || >=16.0.0}
peerDependencies: peerDependencies:
vite: ^4.0.0 vite: ^4.0.0
vue: ^3.2.25 vue: ^3.2.25
dependencies: dependencies:
vite: 4.4.6(@types/node@18.16.0) vite: 4.4.7(@types/node@18.16.0)
vue: 3.3.4 vue: 3.3.4
dev: true dev: true
@@ -15379,6 +15379,42 @@ packages:
fsevents: 2.3.2 fsevents: 2.3.2
dev: true 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): /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==} resolution: {integrity: sha512-zG+ev9pw1Mg7htABlFCNXb8XwnKN+qfTKw+vU0Ers6RIrABx+45EAAFBoaL1mEpl1FRFn1o/dQ7F4b8GP6HdGQ==}
engines: {node: ^14.13.1 || ^16.7.0 || >=18} engines: {node: ^14.13.1 || ^16.7.0 || >=18}
@@ -15425,13 +15461,13 @@ packages:
- terser - terser
dev: true dev: true
/vitepress@1.0.0-beta.6(@algolia/client-search@4.14.2)(@types/node@18.16.0)(search-insights@2.6.0): /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-xK/ulKgQpKZVbvlL4+/vW49VG7ySi5nmSoKUNH1G4kM+Cj9JwYM+PDJO7jSJROv8zW99G0ise+maDYnaLlbGBQ==} resolution: {integrity: sha512-P9Rw+FXatKIU4fVdtKxqwHl6fby8E/8zE3FIfep6meNgN4BxbWqoKJ6yfuuQQR9IrpQqwnyaBh4LSabyll6tWg==}
hasBin: true hasBin: true
dependencies: dependencies:
'@docsearch/css': 3.5.1 '@docsearch/css': 3.5.1
'@docsearch/js': 3.5.1(@algolia/client-search@4.14.2)(search-insights@2.6.0) '@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 '@vue/devtools-api': 6.5.0
'@vueuse/core': 10.2.1(vue@3.3.4) '@vueuse/core': 10.2.1(vue@3.3.4)
'@vueuse/integrations': 10.2.1(focus-trap@7.5.2)(vue@3.3.4) '@vueuse/integrations': 10.2.1(focus-trap@7.5.2)(vue@3.3.4)
@@ -15440,7 +15476,7 @@ packages:
mark.js: 8.11.1 mark.js: 8.11.1
minisearch: 6.1.0 minisearch: 6.1.0
shiki: 0.14.3 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 vue: 3.3.4
transitivePeerDependencies: transitivePeerDependencies:
- '@algolia/client-search' - '@algolia/client-search'