chore: Update cspell and fix issues
- covert `cSpell.json` to `cspell.config.yaml` - break up the word list into multiple dictionary files - fix spelling issues - Enable spell checking code for non-test files
This commit is contained in:
Jason Dent
parent
fe1cff3f55
commit
4a7489a7b6
|
|
@ -0,0 +1,136 @@
|
|||
# This file contains coding related terms
|
||||
ALPHANUM
|
||||
antiscript
|
||||
APPLYCLASS
|
||||
ARROWHEADSTYLE
|
||||
ARROWTYPE
|
||||
autonumber
|
||||
axisl-line
|
||||
Bigdecimal
|
||||
birel
|
||||
BIREL
|
||||
bqstring
|
||||
BQUOTE
|
||||
bramp
|
||||
BRKT
|
||||
callbackargs
|
||||
callbackname
|
||||
classdef
|
||||
classdefid
|
||||
classentity
|
||||
classname
|
||||
COLONSEP
|
||||
COMPOSIT_STATE
|
||||
concat
|
||||
controlx
|
||||
controly
|
||||
CSSCLASS
|
||||
CYLINDEREND
|
||||
CYLINDERSTART
|
||||
datakey
|
||||
DEND
|
||||
descr
|
||||
distp
|
||||
distq
|
||||
divs
|
||||
docref
|
||||
DOMID
|
||||
doublecircle
|
||||
DOUBLECIRCLEEND
|
||||
DOUBLECIRCLESTART
|
||||
DQUOTE
|
||||
DSTART
|
||||
edgesep
|
||||
EMPTYSTR
|
||||
enddate
|
||||
ERDIAGRAM
|
||||
flatmap
|
||||
forwardable
|
||||
frontmatter
|
||||
funs
|
||||
gantt
|
||||
GENERICTYPE
|
||||
getBoundarys
|
||||
grammr
|
||||
graphtype
|
||||
interp
|
||||
introdcued
|
||||
INVTRAPEND
|
||||
INVTRAPSTART
|
||||
JDBC
|
||||
jison
|
||||
Kaufmann
|
||||
keyify
|
||||
LABELPOS
|
||||
LABELTYPE
|
||||
LEFTOF
|
||||
Lexa
|
||||
linebreak
|
||||
LINETYPE
|
||||
LINKSTYLE
|
||||
LLABEL
|
||||
loglevel
|
||||
LOGMSG
|
||||
lookaheads
|
||||
mdast
|
||||
minlen
|
||||
Mstartx
|
||||
MULT
|
||||
NODIR
|
||||
NSTR
|
||||
Qcontrolx
|
||||
reinit
|
||||
rels
|
||||
reqs
|
||||
rewritelinks
|
||||
rgba
|
||||
RIGHTOF
|
||||
sankey
|
||||
sequencenumber
|
||||
shrc
|
||||
signaltype
|
||||
someclass
|
||||
SPACELINE
|
||||
SPACELIST
|
||||
STADIUMEND
|
||||
STADIUMSTART
|
||||
startdate
|
||||
startx
|
||||
starty
|
||||
STMNT
|
||||
stopx
|
||||
stopy
|
||||
strikethrough
|
||||
stringifying
|
||||
struct
|
||||
STYLECLASS
|
||||
STYLEOPTS
|
||||
subcomponent
|
||||
subcomponents
|
||||
SUBROUTINEEND
|
||||
SUBROUTINESTART
|
||||
Subschemas
|
||||
substr
|
||||
TAGEND
|
||||
TAGSTART
|
||||
techn
|
||||
TESTSTR
|
||||
TEXTDATA
|
||||
TEXTLENGTH
|
||||
titlevalue
|
||||
topbar
|
||||
TRAPEND
|
||||
TRAPSTART
|
||||
ts-nocheck
|
||||
tsdoc
|
||||
typeof
|
||||
typestr
|
||||
unshift
|
||||
verifymethod
|
||||
VERIFYMTHD
|
||||
WARN_DOCSDIR_DOESNT_MATCH
|
||||
xhost
|
||||
yaxis
|
||||
yfunc
|
||||
yytext
|
||||
zenuml
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
# Contributors to mermaidjs, one per line
|
||||
cpettitt
|
||||
Dong Cai
|
||||
Nikolay Rozhkov
|
||||
Peng Xiao
|
||||
subhash-halder
|
||||
Vinod Sidharth
|
||||
Ashish Jain
|
||||
|
|
@ -0,0 +1,52 @@
|
|||
# yaml-language-server: $schema=https://raw.githubusercontent.com/streetsidesoftware/cspell/main/cspell.schema.json
|
||||
|
||||
$schema: https://raw.githubusercontent.com/streetsidesoftware/cspell/main/cspell.schema.json
|
||||
|
||||
dictionaryDefinitions:
|
||||
- name: code-terms
|
||||
path: ./code-terms.txt
|
||||
description: A list of coding related terms.
|
||||
addWords: true
|
||||
- name: mermaid-terms
|
||||
path: ./mermaid-terms.txt
|
||||
description: A list of terms related to the mermaid project.
|
||||
addWords: true
|
||||
- name: misc-terms
|
||||
path: ./misc-terms.txt
|
||||
description: A list of miscellaneous terms.
|
||||
- name: 3rd-party-terms
|
||||
path: ./libraries.txt
|
||||
description: A list of 3rd party terms from dependencies.
|
||||
addWords: true
|
||||
- name: contributors
|
||||
path: ./contributors.txt
|
||||
description: A list of contributors to the mermaid project.
|
||||
type: 'W'
|
||||
addWords: true
|
||||
|
||||
# cspell:disable
|
||||
- name: suggestions
|
||||
words:
|
||||
- none
|
||||
suggestWords:
|
||||
- seperator:separator
|
||||
- vertice:vertex
|
||||
# cspell:enable
|
||||
|
||||
patterns:
|
||||
- name: character-set-cyrillic
|
||||
pattern: '/\p{Script_Extensions=Cyrillic}+/gu'
|
||||
- name: svg-block
|
||||
pattern: '<svg[\S\s]+?</svg>'
|
||||
- name: json-property
|
||||
pattern: '/"[\w/@-]+":/g'
|
||||
|
||||
dictionaries:
|
||||
- mermaid-terms
|
||||
- suggestions
|
||||
- contributors
|
||||
|
||||
ignorePaths:
|
||||
- '*.txt' # do not spell check local dictionaries
|
||||
|
||||
# cspell:dictionary misc-terms
|
||||
|
|
@ -0,0 +1,69 @@
|
|||
# Add third party library terms below
|
||||
acyclicer
|
||||
Antlr
|
||||
Appli
|
||||
applitools
|
||||
Asciidoctor
|
||||
Astah
|
||||
automerge
|
||||
bilkent
|
||||
bisheng
|
||||
codedoc
|
||||
Codemia
|
||||
codepaths
|
||||
csstree
|
||||
cytoscape
|
||||
cytoscape-cose-bilkent
|
||||
dagre
|
||||
dagre-d3
|
||||
Deepdwn
|
||||
Docsify
|
||||
Docsy
|
||||
DokuWiki
|
||||
dompurify
|
||||
elkjs
|
||||
fontawesome
|
||||
Foswiki
|
||||
Gitea
|
||||
graphlib
|
||||
Grav
|
||||
iconify
|
||||
Inkdrop
|
||||
jiti
|
||||
jsdocs
|
||||
jsfiddle
|
||||
jsonschema
|
||||
katex
|
||||
khroma
|
||||
mathml
|
||||
matplotlib
|
||||
mdbook
|
||||
Mermerd
|
||||
mkdocs
|
||||
Nextra
|
||||
nodenext
|
||||
npmjs
|
||||
pageview
|
||||
pathe
|
||||
phpbb
|
||||
pixelmatch
|
||||
Podlite
|
||||
presetAttributify
|
||||
pyplot
|
||||
redmine
|
||||
rehype
|
||||
rscratch
|
||||
sparkline
|
||||
sphinxcontrib
|
||||
ssim
|
||||
stylis
|
||||
Swimm
|
||||
tsbuildinfo
|
||||
Tuleap
|
||||
Typora
|
||||
unocss
|
||||
unplugin
|
||||
unstub
|
||||
vite
|
||||
vitest
|
||||
Zune
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
Adamiecki
|
||||
arrowend
|
||||
bmatrix
|
||||
braintree
|
||||
catmull
|
||||
compositTitleSize
|
||||
doublecircle
|
||||
elems
|
||||
gantt
|
||||
gitgraph
|
||||
gzipped
|
||||
knsv
|
||||
Knut
|
||||
marginx
|
||||
marginy
|
||||
Markdownish
|
||||
mermaidjs
|
||||
mindmap
|
||||
mindmaps
|
||||
multigraph
|
||||
nodesep
|
||||
NOTEGROUP
|
||||
Pinterest
|
||||
rankdir
|
||||
ranksep
|
||||
rect
|
||||
rects
|
||||
sandboxed
|
||||
siebling
|
||||
statediagram
|
||||
substate
|
||||
Sveidqvist
|
||||
unfixable
|
||||
Viewbox
|
||||
viewports
|
||||
visio
|
||||
vitepress
|
||||
xlink
|
||||
xychart
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
colour
|
||||
colours
|
||||
mitigations
|
||||
newbranch
|
||||
|
|
@ -78,9 +78,9 @@ module.exports = {
|
|||
'@cspell/spellchecker': [
|
||||
'error',
|
||||
{
|
||||
checkIdentifiers: false,
|
||||
checkStrings: false,
|
||||
checkStringTemplates: false,
|
||||
checkIdentifiers: true,
|
||||
checkStrings: true,
|
||||
checkStringTemplates: true,
|
||||
},
|
||||
],
|
||||
'no-empty': [
|
||||
|
|
@ -159,6 +159,19 @@ module.exports = {
|
|||
'@typescript-eslint/no-unused-vars': 'off',
|
||||
},
|
||||
},
|
||||
{
|
||||
files: ['*.spec.{ts,js}', 'tests/**', 'cypress/**/*.js'],
|
||||
rules: {
|
||||
'@cspell/spellchecker': [
|
||||
'error',
|
||||
{
|
||||
checkIdentifiers: false,
|
||||
checkStrings: false,
|
||||
checkStringTemplates: false,
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
files: ['*.html', '*.md', '**/*.md/*'],
|
||||
rules: {
|
||||
|
|
|
|||
|
|
@ -120,7 +120,7 @@ C -->|Two| E[Result 2]
|
|||
```
|
||||
sequenceDiagram
|
||||
Alice->>John: Hello John, how are you?
|
||||
loop Healthcheck
|
||||
loop HealthCheck
|
||||
John->>John: Fight against hypochondria
|
||||
end
|
||||
Note right of John: Rational thoughts!
|
||||
|
|
@ -132,7 +132,7 @@ Bob-->>John: Jolly good!
|
|||
```mermaid
|
||||
sequenceDiagram
|
||||
Alice->>John: Hello John, how are you?
|
||||
loop Healthcheck
|
||||
loop HealthCheck
|
||||
John->>John: Fight against hypochondria
|
||||
end
|
||||
Note right of John: Rational thoughts!
|
||||
|
|
|
|||
|
|
@ -93,7 +93,7 @@ C -->|Two| E[Result 2]
|
|||
```
|
||||
sequenceDiagram
|
||||
Alice->>John: Hello John, how are you?
|
||||
loop Healthcheck
|
||||
loop HealthCheck
|
||||
John->>John: Fight against hypochondria
|
||||
end
|
||||
Note right of John: Rational thoughts!
|
||||
|
|
@ -105,7 +105,7 @@ Bob-->>John: Jolly good!
|
|||
```mermaid
|
||||
sequenceDiagram
|
||||
Alice->>John: Hello John, how are you?
|
||||
loop Healthcheck
|
||||
loop HealthCheck
|
||||
John->>John: Fight against hypochondria
|
||||
end
|
||||
Note right of John: Rational thoughts!
|
||||
|
|
|
|||
212
cSpell.json
212
cSpell.json
|
|
@ -1,212 +0,0 @@
|
|||
{
|
||||
"version": "0.2",
|
||||
"language": "en",
|
||||
"words": [
|
||||
"acyclicer",
|
||||
"adamiecki",
|
||||
"alois",
|
||||
"aloisklink",
|
||||
"antiscript",
|
||||
"antlr",
|
||||
"appli",
|
||||
"applitools",
|
||||
"asciidoctor",
|
||||
"ashish",
|
||||
"ashishjain",
|
||||
"astah",
|
||||
"bbox",
|
||||
"bilkent",
|
||||
"bisheng",
|
||||
"blrs",
|
||||
"braintree",
|
||||
"brkt",
|
||||
"brolin",
|
||||
"brotli",
|
||||
"catmull",
|
||||
"città",
|
||||
"classdef",
|
||||
"codedoc",
|
||||
"codemia",
|
||||
"colour",
|
||||
"colours",
|
||||
"commitlint",
|
||||
"cpettitt",
|
||||
"customizability",
|
||||
"cuzon",
|
||||
"cytoscape",
|
||||
"dagre",
|
||||
"deepdwn",
|
||||
"descr",
|
||||
"docsify",
|
||||
"docsy",
|
||||
"doku",
|
||||
"dompurify",
|
||||
"dont",
|
||||
"doublecircle",
|
||||
"edgechromium",
|
||||
"elems",
|
||||
"elkjs",
|
||||
"elle",
|
||||
"faber",
|
||||
"flatmap",
|
||||
"foswiki",
|
||||
"frontmatter",
|
||||
"ftplugin",
|
||||
"gantt",
|
||||
"gitea",
|
||||
"gitgraph",
|
||||
"globby",
|
||||
"graphlib",
|
||||
"graphviz",
|
||||
"grav",
|
||||
"greywolf",
|
||||
"gzipped",
|
||||
"huynh",
|
||||
"huynhicode",
|
||||
"inkdrop",
|
||||
"jaoude",
|
||||
"jgreywolf",
|
||||
"jison",
|
||||
"jiti",
|
||||
"katex",
|
||||
"kaufmann",
|
||||
"khroma",
|
||||
"klemm",
|
||||
"klink",
|
||||
"knsv",
|
||||
"knut",
|
||||
"knutsveidqvist",
|
||||
"laganeckas",
|
||||
"linetype",
|
||||
"lintstagedrc",
|
||||
"logmsg",
|
||||
"lucida",
|
||||
"markdownish",
|
||||
"mathml",
|
||||
"matthieu",
|
||||
"matthieumorel",
|
||||
"mdast",
|
||||
"mdbook",
|
||||
"mermaidjs",
|
||||
"mermerd",
|
||||
"mindaugas",
|
||||
"mindmap",
|
||||
"mindmaps",
|
||||
"mitigations",
|
||||
"mkdocs",
|
||||
"mmorel",
|
||||
"mult",
|
||||
"neurodiverse",
|
||||
"nextra",
|
||||
"nikolay",
|
||||
"nirname",
|
||||
"npmjs",
|
||||
"orlandoni",
|
||||
"pathe",
|
||||
"pbrolin",
|
||||
"phpbb",
|
||||
"pixelmatch",
|
||||
"plantuml",
|
||||
"playfair",
|
||||
"pnpm",
|
||||
"podlite",
|
||||
"quence",
|
||||
"radious",
|
||||
"ranksep",
|
||||
"rect",
|
||||
"rects",
|
||||
"reda",
|
||||
"redmine",
|
||||
"regexes",
|
||||
"rehype",
|
||||
"roledescription",
|
||||
"rozhkov",
|
||||
"sandboxed",
|
||||
"sankey",
|
||||
"setupgraphviewbox",
|
||||
"shiki",
|
||||
"sidharth",
|
||||
"sidharthv",
|
||||
"sphinxcontrib",
|
||||
"ssim",
|
||||
"startx",
|
||||
"starty",
|
||||
"statediagram",
|
||||
"steph",
|
||||
"stopx",
|
||||
"stopy",
|
||||
"stylis",
|
||||
"subhash-halder",
|
||||
"substate",
|
||||
"sulais",
|
||||
"sveidqvist",
|
||||
"swimm",
|
||||
"techn",
|
||||
"teststr",
|
||||
"textlength",
|
||||
"treemap",
|
||||
"ts-nocheck",
|
||||
"tsdoc",
|
||||
"tuleap",
|
||||
"tylerlong",
|
||||
"typora",
|
||||
"ugge",
|
||||
"unist",
|
||||
"unocss",
|
||||
"upvoting",
|
||||
"valign",
|
||||
"verdana",
|
||||
"viewports",
|
||||
"vinod",
|
||||
"visio",
|
||||
"vitepress",
|
||||
"vueuse",
|
||||
"xlink",
|
||||
"xychart",
|
||||
"yash",
|
||||
"yokozuna",
|
||||
"zenuml",
|
||||
"zune"
|
||||
],
|
||||
"patterns": [
|
||||
{ "name": "Markdown links", "pattern": "\\((.*)\\)", "description": "" },
|
||||
{
|
||||
"name": "Markdown code blocks",
|
||||
"pattern": "/^(\\s*`{3,}).*[\\s\\S]*?^\\1/gmx",
|
||||
"description": "Taken from the cSpell example at https://cspell.org/configuration/patterns/#verbose-regular-expressions"
|
||||
},
|
||||
{
|
||||
"name": "Inline code blocks",
|
||||
"pattern": "\\`([^\\`\\r\\n]+?)\\`",
|
||||
"description": "https://stackoverflow.com/questions/41274241/how-to-capture-inline-markdown-code-but-not-a-markdown-code-fence-with-regex"
|
||||
},
|
||||
{ "name": "Link contents", "pattern": "\\<a(.*)\\>", "description": "" },
|
||||
{ "name": "Snippet references", "pattern": "-- snippet:(.*)", "description": "" },
|
||||
{
|
||||
"name": "Snippet references 2",
|
||||
"pattern": "\\<\\[sample:(.*)",
|
||||
"description": "another kind of snippet reference"
|
||||
},
|
||||
{ "name": "Multi-line code blocks", "pattern": "/^\\s*```[\\s\\S]*?^\\s*```/gm" },
|
||||
{
|
||||
"name": "HTML Tags",
|
||||
"pattern": "<[^>]*>",
|
||||
"description": "Reference: https://stackoverflow.com/questions/11229831/regular-expression-to-remove-html-tags-from-a-string"
|
||||
}
|
||||
],
|
||||
"ignoreRegExpList": [
|
||||
"Markdown links",
|
||||
"Markdown code blocks",
|
||||
"Inline code blocks",
|
||||
"Link contents",
|
||||
"Snippet references",
|
||||
"Snippet references 2",
|
||||
"Multi-line code blocks",
|
||||
"HTML Tags"
|
||||
],
|
||||
"ignorePaths": [
|
||||
"packages/mermaid/src/docs/CHANGELOG.md",
|
||||
"packages/mermaid/src/docs/.vitepress/redirect.ts",
|
||||
"packages/mermaid/src/docs/.vitepress/contributor-names.json"
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
# yaml-language-server: $schema=https://raw.githubusercontent.com/streetsidesoftware/cspell/main/cspell.schema.json
|
||||
|
||||
$schema: https://raw.githubusercontent.com/streetsidesoftware/cspell/main/cspell.schema.json
|
||||
version: '0.2'
|
||||
language: en
|
||||
|
||||
import:
|
||||
- ./.cspell/cspell.config.yaml
|
||||
|
||||
ignoreRegExpList:
|
||||
- character-set-cyrillic
|
||||
- svg-block
|
||||
ignorePaths:
|
||||
- '*lock.{yaml,json}'
|
||||
- dist
|
||||
- CHANGELOG.md
|
||||
- packages/mermaid/src/docs/.vitepress/redirect.ts
|
||||
- packages/mermaid/src/docs/.vitepress/contributor-names.json
|
||||
- backup
|
||||
- '**/*.spec.{js,ts}' # checked by eslint
|
||||
- 'tests/webpack/src/index.js' # checked by eslint
|
||||
- 'cypress/**/*.js' # checked by eslint
|
||||
- '*.csv'
|
||||
- '*.patch'
|
||||
- 'docs/**/*.html'
|
||||
- 'cypress/platform/**'
|
||||
dictionaries:
|
||||
- misc-terms
|
||||
overrides:
|
||||
- filename:
|
||||
- '**/*.{jison,ts,mts,cjs,mjs,js,json,yaml,yml,md,html}'
|
||||
- 'run'
|
||||
- Dockerfile
|
||||
ignoreRegExpList:
|
||||
- js-unicode-escape
|
||||
dictionaries:
|
||||
- code-terms
|
||||
- 3rd-party-terms
|
||||
- fonts
|
||||
- html
|
||||
- lorem-ipsum
|
||||
- filename: '**/package.json'
|
||||
ignoreRegExpList:
|
||||
- json-property
|
||||
# cspell:dictionaries code-terms
|
||||
|
|
@ -137,7 +137,7 @@ config:
|
|||
plotReservedSpacePercent: 60
|
||||
---
|
||||
xychart-beta
|
||||
title "Sales Revene"
|
||||
title "Sales Revenue"
|
||||
x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
|
||||
y-axis "Revenue (in $)" 4000 --> 11000
|
||||
bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
|
||||
|
|
@ -163,7 +163,7 @@ config:
|
|||
plotColorPalette: "#008000, #faba63"
|
||||
---
|
||||
xychart-beta
|
||||
title "Sales Revene"
|
||||
title "Sales Revenue"
|
||||
x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
|
||||
y-axis "Revenue (in $)" 4000 --> 11000
|
||||
bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
|
||||
|
|
|
|||
|
|
@ -132,7 +132,7 @@ All tests should run successfully without any errors or failures.
|
|||
|
||||
## Workflow
|
||||
|
||||
Contributing process is very simple and strightforward:
|
||||
Contributing process is very simple and straightforward:
|
||||
|
||||
```mermaid
|
||||
flowchart LR
|
||||
|
|
@ -376,7 +376,7 @@ eg: `# Feature Name (v<MERMAID_RELEASE_VERSION>+)`
|
|||
|
||||
We know it can sometimes be hard to code _and_ write user documentation.
|
||||
|
||||
Create another issue specifically for the documentation.\
|
||||
Create another issue specifically for the documentation.
|
||||
You will need to help with the PR, but definitely ask for help if you feel stuck.
|
||||
When it feels hard to write stuff out, explaining it to someone and having that person ask you clarifying questions can often be 80% of the work!
|
||||
|
||||
|
|
@ -401,14 +401,14 @@ The contents of [mermaid.js.org](https://mermaid.js.org/) are based on the docs
|
|||
flowchart LR
|
||||
classDef default fill:#fff,color:black,stroke:black
|
||||
|
||||
source["Edit /packages/mermaid/src/docs"] -- automatic processing--> published["View /docs which will be publised on Official Website"]
|
||||
source["Edit /packages/mermaid/src/docs"] -- automatic processing--> published["View /docs which will be published on Official Website"]
|
||||
```
|
||||
|
||||
```mermaid
|
||||
flowchart LR
|
||||
classDef default fill:#fff,color:black,stroke:black
|
||||
|
||||
source["Edit /packages/mermaid/src/docs"] -- automatic processing--> published["View /docs which will be publised on Official Website"]
|
||||
source["Edit /packages/mermaid/src/docs"] -- automatic processing--> published["View /docs which will be published on Official Website"]
|
||||
```
|
||||
|
||||
### Running the Documentation Website Locally
|
||||
|
|
@ -519,3 +519,5 @@ You have successfully submitted your improvements! What is next?
|
|||
- When a release is ready, the `release/x.x.x` branch will be created, extensively tested and knsv will be in charge of the release process.
|
||||
|
||||
Thanks for you help!
|
||||
|
||||
<!--- cspell:ignore florbs --->
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@ Mermaid will automatically insert the [aria-roledescription](#aria-roledescripti
|
|||
|
||||
The [aria-roledescription](https://www.w3.org/TR/wai-aria-1.1/#aria-roledescription) for the SVG HTML element is set to the diagram type key. (Note this may be slightly different than the keyword used for the diagram in the diagram text.)
|
||||
|
||||
For example: The diagram type key for a state diagram is "stateDiagram". Here (a part of) the HTML of the SVG tag that shows the automatically inserted aria-roledscription set to "stateDiagram". _(Note that some of the SVG attributes and the SVG contents are omitted for clarity.):_
|
||||
For example: The diagram type key for a state diagram is "stateDiagram". Here (a part of) the HTML of the SVG tag that shows the automatically inserted aria-roledescription set to "stateDiagram". _(Note that some of the SVG attributes and the SVG contents are omitted for clarity.):_
|
||||
|
||||
```html
|
||||
<svg
|
||||
|
|
|
|||
|
|
@ -65,7 +65,7 @@ Example of `init` directive setting the `theme` to `forest`:
|
|||
a --> b
|
||||
```
|
||||
|
||||
> **Reminder**: the only theme that can be customed is the `base` theme. The following section covers how to use `themeVariables` for customizations.
|
||||
> **Reminder**: the only theme that can be customized is the `base` theme. The following section covers how to use `themeVariables` for customizations.
|
||||
|
||||
## Customizing Themes with `themeVariables`
|
||||
|
||||
|
|
|
|||
|
|
@ -436,3 +436,8 @@ mermaid_config.startOnLoad = true;
|
|||
|
||||
> **Warning**
|
||||
> This way of setting the configuration is deprecated. Instead the preferred way is to use the initialize method. This functionality is only kept for backwards compatibility.
|
||||
|
||||
<!---
|
||||
cspell:locale en,en-gb
|
||||
cspell:ignore pumbaa
|
||||
--->
|
||||
|
|
|
|||
|
|
@ -80,3 +80,5 @@ graph LR;
|
|||
**Output**
|
||||
|
||||
|
||||
|
||||
<!--- cspell:ignore Elle Jaoude Neurodiverse graphbytes --->
|
||||
|
|
|
|||
|
|
@ -88,7 +88,7 @@ sequenceDiagram
|
|||
participant Alice
|
||||
participant Bob
|
||||
Alice->>John: Hello John, how are you?
|
||||
loop Healthcheck
|
||||
loop HealthCheck
|
||||
John->>John: Fight against hypochondria
|
||||
end
|
||||
Note right of John: Rational thoughts <br/>prevail!
|
||||
|
|
@ -102,7 +102,7 @@ sequenceDiagram
|
|||
participant Alice
|
||||
participant Bob
|
||||
Alice->>John: Hello John, how are you?
|
||||
loop Healthcheck
|
||||
loop HealthCheck
|
||||
John->>John: Fight against hypochondria
|
||||
end
|
||||
Note right of John: Rational thoughts <br/>prevail!
|
||||
|
|
|
|||
|
|
@ -425,7 +425,7 @@ block-beta
|
|||
ida space:3 idb idc
|
||||
```
|
||||
|
||||
Note that you can set how many columns the spece block occupied using the number notaion `space:num` where num is a number indicating the num columns width. You can alsio use `space` which defaults to one column.
|
||||
Note that you can set how many columns the space block occupied using the number notation `space:num` where num is a number indicating the num columns width. You can also use `space` which defaults to one column.
|
||||
|
||||
The variety of shapes and special blocks in Mermaid enhances the expressive power of block diagrams, allowing for more accurate and context-specific representations. These options give users the flexibility to create diagrams that are both informative and visually appealing. In the next sections, we will explore the ways to connect these blocks and customize their appearance.
|
||||
|
||||
|
|
@ -640,7 +640,7 @@ A common mistake is incorrect linking syntax, which can lead to unexpected resul
|
|||
A - B
|
||||
|
||||
**Correction**:
|
||||
Ensure that links between blocks are correctly specified with arrows (--> or ---) to define the direction and type of connection. Also rememeber that one of the fundaments for block diagram is to give the author full control of where the boxes are positioned so in the example you need to add a space between the boxes:
|
||||
Ensure that links between blocks are correctly specified with arrows (--> or ---) to define the direction and type of connection. Also remember that one of the fundaments for block diagram is to give the author full control of where the boxes are positioned so in the example you need to add a space between the boxes:
|
||||
|
||||
```mermaid-example
|
||||
block-beta
|
||||
|
|
|
|||
|
|
@ -191,7 +191,7 @@ The following unfinished features are not supported in the short term.
|
|||
- [x] Rel_L, Rel_Left
|
||||
- [x] Rel_R, Rel_Right
|
||||
- [x] Rel_Back
|
||||
- [x] RelIndex \* Compatible with C4-Plantuml syntax, but ignores the index parameter. The sequence number is determined by the order in which the rel statements are written.
|
||||
- [x] RelIndex \* Compatible with C4-PlantUML syntax, but ignores the index parameter. The sequence number is determined by the order in which the rel statements are written.
|
||||
|
||||
- [ ] Custom tags/stereotypes support and skin param updates
|
||||
- [ ] AddElementTag(tagStereo, ?bgColor, ?fontColor, ?borderColor, ?shadowing, ?shape, ?sprite, ?techn, ?legendText, ?legendSprite): Introduces a new element tag. The styles of the tagged elements are updated and the tag is displayed in the calculated legend.
|
||||
|
|
@ -621,3 +621,5 @@ UpdateRelStyle(customerA, bankA, $offsetY="60")
|
|||
UpdateRelStyle(db, db2, $offsetY="-10")
|
||||
|
||||
```
|
||||
|
||||
<!--- cspell:ignore bigbank bigbankdb techn mbsfacade --->
|
||||
|
|
|
|||
|
|
@ -240,7 +240,7 @@ class BankAccount{
|
|||
|
||||
#### Generic Types
|
||||
|
||||
Generics can be representated as part of a class definition, and for class members/return types. In order to denote an item as generic, you enclose that type within `~` (**tilde**). **Nested** type declarations such as `List<List<int>>` are supported, though generics that include a comma are currently not supported. (such as `List<List<K, V>>`)
|
||||
Generics can be represented as part of a class definition, and for class members/return types. In order to denote an item as generic, you enclose that type within `~` (**tilde**). **Nested** type declarations such as `List<List<int>>` are supported, though generics that include a comma are currently not supported. (such as `List<List<K, V>>`)
|
||||
|
||||
> _note_ when a generic is used within a class definition, the generic type is NOT considered part of the class name. i.e.: for any syntax which required you to reference the class name, you need to drop the type part of the definition. This also means that mermaid does not currently support having two classes with the same name, but different generic types.
|
||||
|
||||
|
|
|
|||
|
|
@ -307,3 +307,5 @@ The following CSS class selectors are available for richer styling:
|
|||
| `.er.relationshipLabel` | The label for a relationship |
|
||||
| `.er.relationshipLabelBox` | The box surrounding a relationship label |
|
||||
| `.er.relationshipLine` | The line representing a relationship between entities |
|
||||
|
||||
<!--- cspell:locale en,en-gb --->
|
||||
|
|
|
|||
|
|
@ -175,7 +175,7 @@ sequenceDiagram
|
|||
participant Alice
|
||||
participant Bob
|
||||
Alice->>John: Hello John, how are you?
|
||||
loop Healthcheck
|
||||
loop HealthCheck
|
||||
John->>John: Fight against hypochondria
|
||||
end
|
||||
Note right of John: Rational thoughts<br/>prevail...
|
||||
|
|
@ -189,7 +189,7 @@ sequenceDiagram
|
|||
participant Alice
|
||||
participant Bob
|
||||
Alice->>John: Hello John, how are you?
|
||||
loop Healthcheck
|
||||
loop HealthCheck
|
||||
John->>John: Fight against hypochondria
|
||||
end
|
||||
Note right of John: Rational thoughts<br/>prevail...
|
||||
|
|
@ -297,3 +297,5 @@ gitGraph:
|
|||
branch b2
|
||||
commit
|
||||
```
|
||||
|
||||
<!--- cspell:ignore Ashish newbranch --->
|
||||
|
|
|
|||
|
|
@ -1200,3 +1200,5 @@ mermaid.flowchartConfig = {
|
|||
width: 100%
|
||||
}
|
||||
```
|
||||
|
||||
<!--- cspell:ignore lagom --->
|
||||
|
|
|
|||
|
|
@ -298,7 +298,7 @@ gantt
|
|||
|
||||
## Output in compact mode
|
||||
|
||||
The compact mode allows you to display multiple tasks in the same row. Compact mode can be enabled for a gantt chart by setting the display mode of the graph via preceeding YAML settings.
|
||||
The compact mode allows you to display multiple tasks in the same row. Compact mode can be enabled for a gantt chart by setting the display mode of the graph via preceding YAML settings.
|
||||
|
||||
```mermaid-example
|
||||
---
|
||||
|
|
|
|||
|
|
@ -1626,7 +1626,7 @@ See how the commit label color and background color are changed to the values sp
|
|||
|
||||
### Customizing Commit Label Font Size
|
||||
|
||||
You can customize commit using the `commitLabelFontSize` theme variables for changing in the font soze of the commit label .
|
||||
You can customize commit using the `commitLabelFontSize` theme variables for changing in the font size of the commit label .
|
||||
|
||||
Example:
|
||||
Now let's override the default values for the `commitLabelFontSize` variable:
|
||||
|
|
@ -1677,7 +1677,7 @@ See how the commit label font size changed.
|
|||
|
||||
### Customizing Tag Label Font Size
|
||||
|
||||
You can customize commit using the `tagLabelFontSize` theme variables for changing in the font soze of the tag label .
|
||||
You can customize commit using the `tagLabelFontSize` theme variables for changing in the font size of the tag label .
|
||||
|
||||
Example:
|
||||
Now let's override the default values for the `tagLabelFontSize` variable:
|
||||
|
|
|
|||
|
|
@ -305,3 +305,8 @@ From version 9.4.0 you can simplify this code to:
|
|||
```
|
||||
|
||||
You can also refer the implementation in the live editor [here](https://github.com/mermaid-js/mermaid-live-editor/blob/develop/src/lib/util/mermaid.ts) to see how the async loading is done.
|
||||
|
||||
<!---
|
||||
cspell:locale en,en-gb
|
||||
cspell:ignore Buzan
|
||||
--->
|
||||
|
|
|
|||
|
|
@ -241,3 +241,5 @@ This example uses all features of the diagram.
|
|||
test_entity3 - verifies -> test_req5
|
||||
test_req <- copies - test_entity2
|
||||
```
|
||||
|
||||
<!--- cspell:ignore reqs --->
|
||||
|
|
|
|||
|
|
@ -301,3 +301,5 @@ Graph layout can be changed by setting `nodeAlignment` to:
|
|||
- `center`
|
||||
- `left`
|
||||
- `right`
|
||||
|
||||
<!--- cspell:ignore Ngas bioenergy biofuel --->
|
||||
|
|
|
|||
|
|
@ -172,8 +172,8 @@ The actor(s) can be grouped in vertical boxes. You can define a color (if not, i
|
|||
end
|
||||
A->>J: Hello John, how are you?
|
||||
J->>A: Great!
|
||||
A->>B: Hello Bob, how is Charly?
|
||||
B->>C: Hello Charly, how are you?
|
||||
A->>B: Hello Bob, how is Charley?
|
||||
B->>C: Hello Charley, how are you?
|
||||
```
|
||||
|
||||
```mermaid
|
||||
|
|
@ -188,8 +188,8 @@ The actor(s) can be grouped in vertical boxes. You can define a color (if not, i
|
|||
end
|
||||
A->>J: Hello John, how are you?
|
||||
J->>A: Great!
|
||||
A->>B: Hello Bob, how is Charly?
|
||||
B->>C: Hello Charly, how are you?
|
||||
A->>B: Hello Bob, how is Charley?
|
||||
B->>C: Hello Charley, how are you?
|
||||
```
|
||||
|
||||
## Messages
|
||||
|
|
@ -646,7 +646,7 @@ It can also be turned on via the diagram code as in the diagram:
|
|||
sequenceDiagram
|
||||
autonumber
|
||||
Alice->>John: Hello John, how are you?
|
||||
loop Healthcheck
|
||||
loop HealthCheck
|
||||
John->>John: Fight against hypochondria
|
||||
end
|
||||
Note right of John: Rational thoughts!
|
||||
|
|
@ -659,7 +659,7 @@ sequenceDiagram
|
|||
sequenceDiagram
|
||||
autonumber
|
||||
Alice->>John: Hello John, how are you?
|
||||
loop Healthcheck
|
||||
loop HealthCheck
|
||||
John->>John: Fight against hypochondria
|
||||
end
|
||||
Note right of John: Rational thoughts!
|
||||
|
|
|
|||
|
|
@ -622,7 +622,7 @@ Spaces can be added to a state by first defining the state with an id and then r
|
|||
|
||||
In the following example there is a state with the id **yswsii** and description **Your state with spaces in it**.
|
||||
After it has been defined, **yswsii** is used in the diagram in the first transition (`[*] --> yswsii`)
|
||||
and also in the transition to **YetAnotherState** (`yswsii --> YetAnotherState`).\
|
||||
and also in the transition to **YetAnotherState** (`yswsii --> YetAnotherState`).
|
||||
(**yswsii** has been styled so that it is different from the other states.)
|
||||
|
||||
```mermaid-example
|
||||
|
|
@ -648,3 +648,5 @@ stateDiagram
|
|||
yswsii --> YetAnotherState
|
||||
YetAnotherState --> [*]
|
||||
```
|
||||
|
||||
<!--- cspell:ignore yswsii --->
|
||||
|
|
|
|||
|
|
@ -191,7 +191,7 @@ As explained earlier, each section has a color scheme, and each time period and
|
|||
|
||||
However, if there is no section defined, then we have two possibilities:
|
||||
|
||||
1. Style time periods individually, i.e. each time period(and its coressponding events) will have its own color scheme. This is the DEFAULT behavior.
|
||||
1. Style time periods individually, i.e. each time period(and its corresponding events) will have its own color scheme. This is the DEFAULT behavior.
|
||||
|
||||
```mermaid-example
|
||||
timeline
|
||||
|
|
|
|||
|
|
@ -139,11 +139,11 @@ The only two things required are the chart name (`xychart-beta`) and one data se
|
|||
| ---------------- | --------------------------------------------------------- |
|
||||
| backgroundColor | Background color of the whole chart |
|
||||
| titleColor | Color of the Title text |
|
||||
| xAxisLableColor | Color of the x-axis labels |
|
||||
| xAxisLabelColor | Color of the x-axis labels |
|
||||
| xAxisTitleColor | Color of the x-axis title |
|
||||
| xAxisTickColor | Color of the x-axis tick |
|
||||
| xAxisLineColor | Color of the x-axis line |
|
||||
| yAxisLableColor | Color of the y-axis labels |
|
||||
| yAxisLabelColor | Color of the y-axis labels |
|
||||
| yAxisTitleColor | Color of the y-axis title |
|
||||
| yAxisTickColor | Color of the y-axis tick |
|
||||
| yAxisLineColor | Color of the y-axis line |
|
||||
|
|
|
|||
|
|
@ -64,7 +64,7 @@
|
|||
"@applitools/eyes-cypress": "^3.40.6",
|
||||
"@commitlint/cli": "^17.6.1",
|
||||
"@commitlint/config-conventional": "^17.6.1",
|
||||
"@cspell/eslint-plugin": "^6.31.1",
|
||||
"@cspell/eslint-plugin": "^8.3.2",
|
||||
"@cypress/code-coverage": "^3.12.18",
|
||||
"@rollup/plugin-typescript": "^11.1.1",
|
||||
"@types/cors": "^2.8.13",
|
||||
|
|
@ -85,6 +85,7 @@
|
|||
"ajv": "^8.12.0",
|
||||
"concurrently": "^8.0.1",
|
||||
"cors": "^2.8.5",
|
||||
"cspell": "^8.3.2",
|
||||
"cypress": "^12.17.4",
|
||||
"cypress-image-snapshot": "^4.0.1",
|
||||
"esbuild": "^0.20.0",
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@
|
|||
"docs:dev": "pnpm docs:pre:vitepress && concurrently \"pnpm --filter ./src/vitepress dev\" \"tsx scripts/docs.cli.mts --watch --vitepress\"",
|
||||
"docs:dev:docker": "pnpm docs:pre:vitepress && concurrently \"pnpm --filter ./src/vitepress dev:docker\" \"tsx scripts/docs.cli.mts --watch --vitepress\"",
|
||||
"docs:serve": "pnpm docs:build:vitepress && vitepress serve src/vitepress",
|
||||
"docs:spellcheck": "cspell --config ../../cSpell.json \"src/docs/**/*.md\"",
|
||||
"docs:spellcheck": "cspell \"src/docs/**/*.md\"",
|
||||
"docs:release-version": "tsx scripts/update-release-version.mts",
|
||||
"docs:verify-version": "tsx scripts/update-release-version.mts --verify",
|
||||
"types:build-config": "tsx scripts/create-types-from-json-schema.mts",
|
||||
|
|
@ -102,7 +102,6 @@
|
|||
"chokidar": "^3.5.3",
|
||||
"concurrently": "^8.0.1",
|
||||
"cpy-cli": "^4.2.0",
|
||||
"cspell": "^6.31.1",
|
||||
"csstree-validator": "^3.0.0",
|
||||
"globby": "^13.1.4",
|
||||
"jison": "^0.4.18",
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@ flowchart
|
|||
|
||||
The new nodes C1 and C2 are a special type of nodes, clusterNodes. ClusterNodes have have the nodes in the cluster including the cluster attached in a graph object.
|
||||
|
||||
When rendering this diagram it it beeing rendered recursively. The diagram is rendered by the dagre-mermaid:render function which in turn will be used to render the node C1 and the node C2. The result of those renderings will be inserted as nodes in the "root" diagram. With this recursive approach it would be possible to have different layout direction for each cluster.
|
||||
When rendering this diagram it is being rendered recursively. The diagram is rendered by the dagre-mermaid:render function which in turn will be used to render the node C1 and the node C2. The result of those renderings will be inserted as nodes in the "root" diagram. With this recursive approach it would be possible to have different layout direction for each cluster.
|
||||
|
||||
```
|
||||
{ clusterNode: true, graph }
|
||||
|
|
|
|||
|
|
@ -69,13 +69,13 @@ const rect = (parent, node) => {
|
|||
if (useHtmlLabels) {
|
||||
label.attr(
|
||||
'transform',
|
||||
// This puts the labal on top of the box instead of inside it
|
||||
// This puts the label on top of the box instead of inside it
|
||||
`translate(${node.x - bbox.width / 2}, ${node.y - node.height / 2 + subGraphTitleTopMargin})`
|
||||
);
|
||||
} else {
|
||||
label.attr(
|
||||
'transform',
|
||||
// This puts the labal on top of the box instead of inside it
|
||||
// This puts the label on top of the box instead of inside it
|
||||
`translate(${node.x}, ${node.y - node.height / 2 + subGraphTitleTopMargin})`
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -60,7 +60,7 @@ const createLabel = (_vertexText, style, isTitle, isNode) => {
|
|||
const node = {
|
||||
isNode,
|
||||
label: decodeEntities(vertexText).replace(
|
||||
/fa[blrs]?:fa-[\w-]+/g,
|
||||
/fa[blrs]?:fa-[\w-]+/g, // cspell: disable-line
|
||||
(s) => `<i class='${s.replace(':', ' ')}'></i>`
|
||||
),
|
||||
labelStyle: style.replace('fill:', 'color:'),
|
||||
|
|
|
|||
|
|
@ -269,7 +269,7 @@ export const intersection = (node, outsidePoint, insidePoint) => {
|
|||
res.y = outsidePoint.y;
|
||||
}
|
||||
|
||||
log.debug(`abc89 topp/bott calc, Q ${Q}, q ${q}, R ${R}, r ${r}`, res);
|
||||
log.debug(`abc89 topp/bott calc, Q ${Q}, q ${q}, R ${R}, r ${r}`, res); // cspell: disable-line
|
||||
|
||||
return res;
|
||||
} else {
|
||||
|
|
@ -306,20 +306,20 @@ export const intersection = (node, outsidePoint, insidePoint) => {
|
|||
* and return an update path ending by the border of the node.
|
||||
*
|
||||
* @param {Array} _points
|
||||
* @param {any} boundryNode
|
||||
* @param {any} boundaryNode
|
||||
* @returns {Array} Points
|
||||
*/
|
||||
const cutPathAtIntersect = (_points, boundryNode) => {
|
||||
log.debug('abc88 cutPathAtIntersect', _points, boundryNode);
|
||||
const cutPathAtIntersect = (_points, boundaryNode) => {
|
||||
log.debug('abc88 cutPathAtIntersect', _points, boundaryNode);
|
||||
let points = [];
|
||||
let lastPointOutside = _points[0];
|
||||
let isInside = false;
|
||||
_points.forEach((point) => {
|
||||
// check if point is inside the boundary rect
|
||||
if (!outsideNode(boundryNode, point) && !isInside) {
|
||||
if (!outsideNode(boundaryNode, point) && !isInside) {
|
||||
// First point inside the rect found
|
||||
// Calc the intersection coord between the point anf the last point outside the rect
|
||||
const inter = intersection(boundryNode, lastPointOutside, point);
|
||||
const inter = intersection(boundaryNode, lastPointOutside, point);
|
||||
|
||||
// // Check case where the intersection is the same as the last point
|
||||
let pointPresent = false;
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@ import { log } from '../logger.js';
|
|||
import { getSubGraphTitleMargins } from '../utils/subGraphTitleMargins.js';
|
||||
import { getConfig } from '../diagram-api/diagramAPI.js';
|
||||
|
||||
const recursiveRender = async (_elem, graph, diagramtype, id, parentCluster, siteConfig) => {
|
||||
const recursiveRender = async (_elem, graph, diagramType, id, parentCluster, siteConfig) => {
|
||||
log.info('Graph in recursive render: XXX', graphlibJson.write(graph), parentCluster);
|
||||
const dir = graph.graph().rankdir;
|
||||
log.trace('Dir in recursive render - dir:', dir);
|
||||
|
|
@ -57,7 +57,7 @@ const recursiveRender = async (_elem, graph, diagramtype, id, parentCluster, sit
|
|||
const o = await recursiveRender(
|
||||
nodes,
|
||||
node.graph,
|
||||
diagramtype,
|
||||
diagramType,
|
||||
id,
|
||||
graph.node(v),
|
||||
siteConfig
|
||||
|
|
@ -95,7 +95,7 @@ const recursiveRender = async (_elem, graph, diagramtype, id, parentCluster, sit
|
|||
log.info('Edge ' + e.v + ' -> ' + e.w + ': ', e, ' ', JSON.stringify(graph.edge(e)));
|
||||
|
||||
// Check if link is either from or to a cluster
|
||||
log.info('Fix', clusterDb, 'ids:', e.v, e.w, 'Translateing: ', clusterDb[e.v], clusterDb[e.w]);
|
||||
log.info('Fix', clusterDb, 'ids:', e.v, e.w, 'Translating: ', clusterDb[e.v], clusterDb[e.w]);
|
||||
insertEdgeLabel(edgeLabels, edge);
|
||||
});
|
||||
|
||||
|
|
@ -147,7 +147,7 @@ const recursiveRender = async (_elem, graph, diagramtype, id, parentCluster, sit
|
|||
log.info('Edge ' + e.v + ' -> ' + e.w + ': ' + JSON.stringify(edge), edge);
|
||||
|
||||
edge.points.forEach((point) => (point.y += subGraphTitleTotalMargin / 2));
|
||||
const paths = insertEdge(edgePaths, e, edge, clusterDb, diagramtype, graph, id);
|
||||
const paths = insertEdge(edgePaths, e, edge, clusterDb, diagramType, graph, id);
|
||||
positionEdgeLabel(edge, paths);
|
||||
});
|
||||
|
||||
|
|
@ -161,8 +161,8 @@ const recursiveRender = async (_elem, graph, diagramtype, id, parentCluster, sit
|
|||
return { elem, diff };
|
||||
};
|
||||
|
||||
export const render = async (elem, graph, markers, diagramtype, id) => {
|
||||
insertMarkers(elem, markers, diagramtype, id);
|
||||
export const render = async (elem, graph, markers, diagramType, id) => {
|
||||
insertMarkers(elem, markers, diagramType, id);
|
||||
clearNodes();
|
||||
clearEdges();
|
||||
clearClusters();
|
||||
|
|
@ -173,7 +173,7 @@ export const render = async (elem, graph, markers, diagramtype, id) => {
|
|||
log.warn('Graph after:', JSON.stringify(graphlibJson.write(graph)));
|
||||
// log.warn('Graph ever after:', graphlibJson.write(graph.node('A').graph));
|
||||
const siteConfig = getConfig();
|
||||
await recursiveRender(elem, graph, diagramtype, id, undefined, siteConfig);
|
||||
await recursiveRender(elem, graph, diagramType, id, undefined, siteConfig);
|
||||
};
|
||||
|
||||
// const shapeDefinitions = {};
|
||||
|
|
|
|||
|
|
@ -13,11 +13,11 @@ export const clear = () => {
|
|||
clusterDb = {};
|
||||
};
|
||||
|
||||
const isDescendant = (id, ancenstorId) => {
|
||||
// if (id === ancenstorId) return true;
|
||||
const isDescendant = (id, ancestorId) => {
|
||||
// if (id === ancestorId) return true;
|
||||
|
||||
log.trace('In isDecendant', ancenstorId, ' ', id, ' = ', descendants[ancenstorId].includes(id));
|
||||
if (descendants[ancenstorId].includes(id)) {
|
||||
log.trace('In isDescendant', ancestorId, ' ', id, ' = ', descendants[ancestorId].includes(id));
|
||||
if (descendants[ancestorId].includes(id)) {
|
||||
return true;
|
||||
}
|
||||
|
||||
|
|
@ -25,7 +25,7 @@ const isDescendant = (id, ancenstorId) => {
|
|||
};
|
||||
|
||||
const edgeInCluster = (edge, clusterId) => {
|
||||
log.info('Decendants of ', clusterId, ' is ', descendants[clusterId]);
|
||||
log.info('Descendants of ', clusterId, ' is ', descendants[clusterId]);
|
||||
log.info('Edge is ', edge);
|
||||
// Edges to/from the cluster is not in the cluster, they are in the parent
|
||||
if (edge.v === clusterId) {
|
||||
|
|
@ -36,7 +36,7 @@ const edgeInCluster = (edge, clusterId) => {
|
|||
}
|
||||
|
||||
if (!descendants[clusterId]) {
|
||||
log.debug('Tilt, ', clusterId, ',not in decendants');
|
||||
log.debug('Tilt, ', clusterId, ',not in descendants');
|
||||
return false;
|
||||
}
|
||||
return (
|
||||
|
|
@ -244,7 +244,7 @@ export const adjustClustersAndEdges = (graph, depth) => {
|
|||
// d1 xor d2 - if either d1 is true and d2 is false or the other way around
|
||||
if (d1 ^ d2) {
|
||||
log.warn('Edge: ', edge, ' leaves cluster ', id);
|
||||
log.warn('Decendants of XXX ', id, ': ', descendants[id]);
|
||||
log.warn('Descendants of XXX ', id, ': ', descendants[id]);
|
||||
clusterDb[id].externalConnections = true;
|
||||
}
|
||||
}
|
||||
|
|
@ -286,6 +286,7 @@ export const adjustClustersAndEdges = (graph, depth) => {
|
|||
clusterDb[e.w]
|
||||
);
|
||||
if (clusterDb[e.v] && clusterDb[e.w] && clusterDb[e.v] === clusterDb[e.w]) {
|
||||
// cspell:ignore trixing
|
||||
log.warn('Fixing and trixing link to self - removing XXX', e.v, e.w, e.name);
|
||||
log.warn('Fixing and trixing - removing XXX', e.v, e.w, e.name);
|
||||
v = getAnchorId(e.v);
|
||||
|
|
@ -337,7 +338,7 @@ export const adjustClustersAndEdges = (graph, depth) => {
|
|||
|
||||
// Remove references to extracted cluster
|
||||
// graph.edges().forEach(edge => {
|
||||
// if (isDecendant(edge.v, clusterId) || isDecendant(edge.w, clusterId)) {
|
||||
// if (isDescendant(edge.v, clusterId) || isDescendant(edge.w, clusterId)) {
|
||||
// graph.removeEdge(edge);
|
||||
// }
|
||||
// });
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@ export interface DiagramDB {
|
|||
getDiagramTitle?: () => string;
|
||||
setAccTitle?: (title: string) => void;
|
||||
getAccTitle?: () => string;
|
||||
setAccDescription?: (describetion: string) => void;
|
||||
setAccDescription?: (description: string) => void;
|
||||
getAccDescription?: () => string;
|
||||
|
||||
setDisplayMode?: (title: string) => void;
|
||||
|
|
|
|||
|
|
@ -240,8 +240,8 @@ const setHierarchy = (block: Block[]): void => {
|
|||
blocks = rootBlock.children;
|
||||
};
|
||||
|
||||
const getColumns = (blockid: string): number => {
|
||||
const block = blockDatabase[blockid];
|
||||
const getColumns = (blockId: string): number => {
|
||||
const block = blockDatabase[blockId];
|
||||
if (!block) {
|
||||
return -1;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -22,11 +22,11 @@ export function calculateBlockPosition(columns: number, position: number): Block
|
|||
}
|
||||
|
||||
if (columns < 0) {
|
||||
// Auto coulumns is set
|
||||
// Auto columns is set
|
||||
return { px: position, py: 0 };
|
||||
}
|
||||
if (columns === 1) {
|
||||
// Auto coulumns is set
|
||||
// Auto columns is set
|
||||
return { px: 0, py: position };
|
||||
}
|
||||
// Calculate posX and posY
|
||||
|
|
@ -145,9 +145,10 @@ function setBlockSizes(block: Block, db: BlockDB, siblingWidth = 0, siblingHeigh
|
|||
height = siblingHeight;
|
||||
const childWidth = (siblingWidth - xSize * padding - padding) / xSize;
|
||||
const childHeight = (siblingHeight - ySize * padding - padding) / ySize;
|
||||
// cspell:ignore indata
|
||||
log.debug('Size indata abc88', block.id, 'childWidth', childWidth, 'maxWidth', maxWidth);
|
||||
log.debug('Size indata abc88', block.id, 'childHeight', childHeight, 'maxHeight', maxHeight);
|
||||
log.debug('Size indata abc88 xSize', xSize, 'paddiong', padding);
|
||||
log.debug('Size indata abc88 xSize', xSize, 'padding', padding);
|
||||
|
||||
// set width of block to max width of children
|
||||
for (const child of block.children) {
|
||||
|
|
@ -238,6 +239,7 @@ function layoutBlocks(block: Block, db: BlockDB) {
|
|||
const halfWidth = width / 2;
|
||||
child.size.x = startingPosX + padding + halfWidth;
|
||||
|
||||
// cspell:ignore pyid
|
||||
log.debug(
|
||||
`abc91 layout blocks (calc) px, pyid:${
|
||||
child.id
|
||||
|
|
|
|||
|
|
@ -173,13 +173,13 @@ spaceLines
|
|||
| spaceLines NL
|
||||
;
|
||||
|
||||
seperator
|
||||
separator
|
||||
: NL
|
||||
{yy.getLogger().debug('Rule: seperator (NL) ');}
|
||||
{yy.getLogger().debug('Rule: separator (NL) ');}
|
||||
| SPACE
|
||||
{yy.getLogger().debug('Rule: seperator (Space) ');}
|
||||
{yy.getLogger().debug('Rule: separator (Space) ');}
|
||||
| EOF
|
||||
{yy.getLogger().debug('Rule: seperator (EOF) ');}
|
||||
{yy.getLogger().debug('Rule: separator (EOF) ');}
|
||||
;
|
||||
|
||||
start: BLOCK_DIAGRAM_KEY document EOF
|
||||
|
|
@ -245,10 +245,10 @@ blockStatement
|
|||
|
||||
node
|
||||
: NODE_ID
|
||||
{ yy.getLogger().debug("Rule: node (NODE_ID seperator): ", $1); $$ = { id: $1 }; }
|
||||
{ yy.getLogger().debug("Rule: node (NODE_ID separator): ", $1); $$ = { id: $1 }; }
|
||||
| NODE_ID nodeShapeNLabel
|
||||
{
|
||||
yy.getLogger().debug("Rule: node (NODE_ID nodeShapeNLabel seperator): ", $1, $2);
|
||||
yy.getLogger().debug("Rule: node (NODE_ID nodeShapeNLabel separator): ", $1, $2);
|
||||
$$ = { id: $1, label: $2.label, typeStr: $2.typeStr, directions: $2.directions };
|
||||
}
|
||||
;
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ let c4ShapeArray = [];
|
|||
let boundaryParseStack = [''];
|
||||
let currentBoundaryParse = 'global';
|
||||
let parentBoundaryParse = '';
|
||||
let boundarys = [
|
||||
let boundaries = [
|
||||
{
|
||||
alias: 'global',
|
||||
label: { text: 'global' },
|
||||
|
|
@ -312,12 +312,12 @@ export const addPersonOrSystemBoundary = function (alias, label, type, tags, lin
|
|||
}
|
||||
|
||||
let boundary = {};
|
||||
const old = boundarys.find((boundary) => boundary.alias === alias);
|
||||
const old = boundaries.find((boundary) => boundary.alias === alias);
|
||||
if (old && alias === old.alias) {
|
||||
boundary = old;
|
||||
} else {
|
||||
boundary.alias = alias;
|
||||
boundarys.push(boundary);
|
||||
boundaries.push(boundary);
|
||||
}
|
||||
|
||||
// Don't allow null labels, either
|
||||
|
|
@ -368,12 +368,12 @@ export const addContainerBoundary = function (alias, label, type, tags, link) {
|
|||
}
|
||||
|
||||
let boundary = {};
|
||||
const old = boundarys.find((boundary) => boundary.alias === alias);
|
||||
const old = boundaries.find((boundary) => boundary.alias === alias);
|
||||
if (old && alias === old.alias) {
|
||||
boundary = old;
|
||||
} else {
|
||||
boundary.alias = alias;
|
||||
boundarys.push(boundary);
|
||||
boundaries.push(boundary);
|
||||
}
|
||||
|
||||
// Don't allow null labels, either
|
||||
|
|
@ -433,12 +433,12 @@ export const addDeploymentNode = function (
|
|||
}
|
||||
|
||||
let boundary = {};
|
||||
const old = boundarys.find((boundary) => boundary.alias === alias);
|
||||
const old = boundaries.find((boundary) => boundary.alias === alias);
|
||||
if (old && alias === old.alias) {
|
||||
boundary = old;
|
||||
} else {
|
||||
boundary.alias = alias;
|
||||
boundarys.push(boundary);
|
||||
boundaries.push(boundary);
|
||||
}
|
||||
|
||||
// Don't allow null labels, either
|
||||
|
|
@ -514,7 +514,7 @@ export const updateElStyle = function (
|
|||
) {
|
||||
let old = c4ShapeArray.find((element) => element.alias === elementName);
|
||||
if (old === undefined) {
|
||||
old = boundarys.find((element) => element.alias === elementName);
|
||||
old = boundaries.find((element) => element.alias === elementName);
|
||||
if (old === undefined) {
|
||||
return;
|
||||
}
|
||||
|
|
@ -697,14 +697,19 @@ export const getC4ShapeKeys = function (parentBoundary) {
|
|||
return Object.keys(getC4ShapeArray(parentBoundary));
|
||||
};
|
||||
|
||||
export const getBoundarys = function (parentBoundary) {
|
||||
export const getBoundaries = function (parentBoundary) {
|
||||
if (parentBoundary === undefined || parentBoundary === null) {
|
||||
return boundarys;
|
||||
return boundaries;
|
||||
} else {
|
||||
return boundarys.filter((boundary) => boundary.parentBoundary === parentBoundary);
|
||||
return boundaries.filter((boundary) => boundary.parentBoundary === parentBoundary);
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* @deprecated Use getBoundaries instead
|
||||
*/
|
||||
export const getBoundarys = getBoundaries;
|
||||
|
||||
export const getRels = function () {
|
||||
return rels;
|
||||
};
|
||||
|
|
@ -723,7 +728,7 @@ export const autoWrap = function () {
|
|||
|
||||
export const clear = function () {
|
||||
c4ShapeArray = [];
|
||||
boundarys = [
|
||||
boundaries = [
|
||||
{
|
||||
alias: 'global',
|
||||
label: { text: 'global' },
|
||||
|
|
@ -804,6 +809,7 @@ export default {
|
|||
getC4ShapeArray,
|
||||
getC4Shape,
|
||||
getC4ShapeKeys,
|
||||
getBoundaries,
|
||||
getBoundarys,
|
||||
getCurrentBoundaryParse,
|
||||
getParentBoundaryParse,
|
||||
|
|
|
|||
|
|
@ -542,15 +542,15 @@ function drawInsideBoundary(
|
|||
);
|
||||
}
|
||||
parentBoundaryAlias = currentBoundary.alias;
|
||||
let nextCurrentBoundarys = diagObj.db.getBoundarys(parentBoundaryAlias);
|
||||
let nextCurrentBoundaries = diagObj.db.getBoundarys(parentBoundaryAlias);
|
||||
|
||||
if (nextCurrentBoundarys.length > 0) {
|
||||
if (nextCurrentBoundaries.length > 0) {
|
||||
// draw boundary inside currentBoundary
|
||||
drawInsideBoundary(
|
||||
diagram,
|
||||
parentBoundaryAlias,
|
||||
currentBounds,
|
||||
nextCurrentBoundarys,
|
||||
nextCurrentBoundaries,
|
||||
diagObj
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -687,3 +687,5 @@ export default {
|
|||
insertComputerIcon,
|
||||
insertClockIcon,
|
||||
};
|
||||
|
||||
// cspell:ignoreRegExp /'Mstartx.*/g
|
||||
|
|
|
|||
|
|
@ -193,6 +193,7 @@ export const draw = function (text, id, _version, diagObj) {
|
|||
const relations = diagObj.db.getRelations();
|
||||
relations.forEach(function (relation) {
|
||||
log.info(
|
||||
// cspell:ignore tjoho
|
||||
'tjoho' + getGraphId(relation.id1) + getGraphId(relation.id2) + JSON.stringify(relation)
|
||||
);
|
||||
g.setEdge(
|
||||
|
|
|
|||
|
|
@ -93,13 +93,13 @@ export const addVertices = async function (vert, svgId, root, doc, diagObj, pare
|
|||
},
|
||||
];
|
||||
|
||||
let radious = 0;
|
||||
let radius = 0;
|
||||
let _shape = '';
|
||||
let layoutOptions = {};
|
||||
// Set the shape based parameters
|
||||
switch (vertex.type) {
|
||||
case 'round':
|
||||
radious = 5;
|
||||
radius = 5;
|
||||
_shape = 'rect';
|
||||
break;
|
||||
case 'square':
|
||||
|
|
@ -163,8 +163,8 @@ export const addVertices = async function (vert, svgId, root, doc, diagObj, pare
|
|||
shape: _shape,
|
||||
labelText: vertexText,
|
||||
labelType: vertex.labelType,
|
||||
rx: radious,
|
||||
ry: radious,
|
||||
rx: radius,
|
||||
ry: radius,
|
||||
class: classStr,
|
||||
style: styles.style,
|
||||
id: vertex.id,
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@ let direction;
|
|||
let version; // As in graph
|
||||
|
||||
// Functions to be run after graph rendering
|
||||
let funs = [];
|
||||
let funs = []; // cspell:ignore funs
|
||||
|
||||
const sanitizeText = (txt) => common.sanitizeText(txt, config);
|
||||
|
||||
|
|
@ -40,10 +40,10 @@ const sanitizeText = (txt) => common.sanitizeText(txt, config);
|
|||
* @public
|
||||
*/
|
||||
export const lookUpDomId = function (id) {
|
||||
const veritceKeys = Object.keys(vertices);
|
||||
for (const veritceKey of veritceKeys) {
|
||||
if (vertices[veritceKey].id === id) {
|
||||
return vertices[veritceKey].domId;
|
||||
const vertexKeys = Object.keys(vertices);
|
||||
for (const vertexKey of vertexKeys) {
|
||||
if (vertices[vertexKey].id === id) {
|
||||
return vertices[vertexKey].domId;
|
||||
}
|
||||
}
|
||||
return id;
|
||||
|
|
@ -165,8 +165,8 @@ export const addSingleLink = function (_start, _end, type) {
|
|||
throw new Error(
|
||||
`Edge limit exceeded. ${edges.length} edges found, but the limit is ${config.maxEdges}.
|
||||
|
||||
Initialize mermaid with maxEdges set to a higher number to allow more edges.
|
||||
You cannot set this config via configuration inside the diagram as it is a secure config.
|
||||
Initialize mermaid with maxEdges set to a higher number to allow more edges.
|
||||
You cannot set this config via configuration inside the diagram as it is a secure config.
|
||||
You have to call mermaid.initialize.`
|
||||
);
|
||||
}
|
||||
|
|
@ -426,7 +426,7 @@ const setupToolTips = function (element) {
|
|||
const el = select(this);
|
||||
const title = el.attr('title');
|
||||
|
||||
// Dont try to draw a tooltip if no data is provided
|
||||
// Don't try to draw a tooltip if no data is provided
|
||||
if (title === null) {
|
||||
return;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -81,12 +81,12 @@ export const addVertices = async function (vert, g, svgId, root, doc, diagObj) {
|
|||
}
|
||||
}
|
||||
|
||||
let radious = 0;
|
||||
let radius = 0;
|
||||
let _shape = '';
|
||||
// Set the shape based parameters
|
||||
switch (vertex.type) {
|
||||
case 'round':
|
||||
radious = 5;
|
||||
radius = 5;
|
||||
_shape = 'rect';
|
||||
break;
|
||||
case 'square':
|
||||
|
|
@ -148,8 +148,8 @@ export const addVertices = async function (vert, g, svgId, root, doc, diagObj) {
|
|||
shape: _shape,
|
||||
labelText,
|
||||
labelType: vertex.labelType,
|
||||
rx: radious,
|
||||
ry: radious,
|
||||
rx: radius,
|
||||
ry: radius,
|
||||
class: classStr,
|
||||
style: styles.style,
|
||||
id: vertex.id,
|
||||
|
|
@ -170,8 +170,8 @@ export const addVertices = async function (vert, g, svgId, root, doc, diagObj) {
|
|||
labelType: vertex.labelType,
|
||||
shape: _shape,
|
||||
labelText,
|
||||
rx: radious,
|
||||
ry: radious,
|
||||
rx: radius,
|
||||
ry: radius,
|
||||
class: classStr,
|
||||
style: styles.style,
|
||||
id: vertex.id,
|
||||
|
|
|
|||
|
|
@ -59,7 +59,7 @@ export const addVertices = async function (vert, g, svgId, root, _doc, diagObj)
|
|||
const node = {
|
||||
label: await renderKatex(
|
||||
vertexText.replace(
|
||||
/fa[blrs]?:fa-[\w-]+/g,
|
||||
/fa[blrs]?:fa-[\w-]+/g, // cspell:disable-line
|
||||
(s) => `<i class='${s.replace(':', ' ')}'></i>`
|
||||
),
|
||||
getConfig()
|
||||
|
|
@ -84,12 +84,12 @@ export const addVertices = async function (vert, g, svgId, root, _doc, diagObj)
|
|||
vertexNode = svgLabel;
|
||||
}
|
||||
|
||||
let radious = 0;
|
||||
let radius = 0;
|
||||
let _shape = '';
|
||||
// Set the shape based parameters
|
||||
switch (vertex.type) {
|
||||
case 'round':
|
||||
radious = 5;
|
||||
radius = 5;
|
||||
_shape = 'rect';
|
||||
break;
|
||||
case 'square':
|
||||
|
|
@ -147,8 +147,8 @@ export const addVertices = async function (vert, g, svgId, root, _doc, diagObj)
|
|||
labelStyle: styles.labelStyle,
|
||||
shape: _shape,
|
||||
label: vertexNode,
|
||||
rx: radious,
|
||||
ry: radious,
|
||||
rx: radius,
|
||||
ry: radius,
|
||||
class: classStr,
|
||||
style: styles.style,
|
||||
id: diagObj.db.lookUpDomId(vertex.id),
|
||||
|
|
@ -244,7 +244,7 @@ export const addEdges = async function (edges, g, diagObj) {
|
|||
edgeData.labelStyle
|
||||
}">${await renderKatex(
|
||||
edge.text.replace(
|
||||
/fa[blrs]?:fa-[\w-]+/g,
|
||||
/fa[blrs]?:fa-[\w-]+/g, // cspell:disable-line
|
||||
(s) => `<i class='${s.replace(':', ' ')}'></i>`
|
||||
),
|
||||
getConfig()
|
||||
|
|
|
|||
|
|
@ -292,15 +292,15 @@ graphConfig
|
|||
| NEWLINE graphConfig
|
||||
| GRAPH NODIR
|
||||
{ yy.setDirection('TB');$$ = 'TB';}
|
||||
| GRAPH DIR FirstStmtSeperator
|
||||
| GRAPH DIR FirstStmtSeparator
|
||||
{ yy.setDirection($DIR);$$ = $DIR;}
|
||||
// | GRAPH SPACE TAGEND FirstStmtSeperator
|
||||
// | GRAPH SPACE TAGEND FirstStmtSeparator
|
||||
// { yy.setDirection("LR");$$ = $TAGEND;}
|
||||
// | GRAPH SPACE TAGSTART FirstStmtSeperator
|
||||
// | GRAPH SPACE TAGSTART FirstStmtSeparator
|
||||
// { yy.setDirection("RL");$$ = $TAGSTART;}
|
||||
// | GRAPH SPACE UP FirstStmtSeperator
|
||||
// | GRAPH SPACE UP FirstStmtSeparator
|
||||
// { yy.setDirection("BT");$$ = $UP;}
|
||||
// | GRAPH SPACE DOWN FirstStmtSeperator
|
||||
// | GRAPH SPACE DOWN FirstStmtSeparator
|
||||
// { yy.setDirection("TB");$$ = $DOWN;}
|
||||
;
|
||||
|
||||
|
|
@ -310,7 +310,7 @@ ending: endToken ending
|
|||
|
||||
endToken: NEWLINE | SPACE | EOF;
|
||||
|
||||
FirstStmtSeperator
|
||||
FirstStmtSeparator
|
||||
: SEMI | NEWLINE | spaceList NEWLINE ;
|
||||
|
||||
|
||||
|
|
@ -328,8 +328,8 @@ spaceList
|
|||
;
|
||||
|
||||
statement
|
||||
: verticeStatement separator
|
||||
{ /* console.warn('finat vs', $verticeStatement.nodes); */ $$=$verticeStatement.nodes}
|
||||
: vertexStatement separator
|
||||
{ /* console.warn('finat vs', $vertexStatement.nodes); */ $$=$vertexStatement.nodes}
|
||||
| styleStatement separator
|
||||
{$$=[];}
|
||||
| linkStyleStatement separator
|
||||
|
|
@ -357,10 +357,10 @@ statement
|
|||
separator: NEWLINE | SEMI | EOF ;
|
||||
|
||||
|
||||
verticeStatement: verticeStatement link node
|
||||
{ /* 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',$verticeStatement.stmt,$node); */ yy.addLink($verticeStatement.stmt,$node,$link); $$ = { stmt: $node, nodes: $node.concat($verticeStatement.nodes) } }
|
||||
vertexStatement: vertexStatement link node
|
||||
{ /* console.warn('vs',$vertexStatement.stmt,$node); */ yy.addLink($vertexStatement.stmt,$node,$link); $$ = { stmt: $node, nodes: $node.concat($vertexStatement.nodes) } }
|
||||
| vertexStatement link node spaceList
|
||||
{ /* console.warn('vs',$vertexStatement.stmt,$node); */ yy.addLink($vertexStatement.stmt,$node,$link); $$ = { stmt: $node, nodes: $node.concat($vertexStatement.nodes) } }
|
||||
|node spaceList {/*console.warn('noda', $node);*/ $$ = {stmt: $node, nodes:$node }}
|
||||
|node { /*console.warn('noda', $node);*/ $$ = {stmt: $node, nodes:$node }}
|
||||
;
|
||||
|
|
|
|||
|
|
@ -332,6 +332,7 @@ const getStartDate = function (prevTime, dateFormat, str) {
|
|||
* @returns {[value: number, unit: dayjs.ManipulateType]} Arguments to pass to `dayjs.add()`
|
||||
*/
|
||||
const parseDuration = function (str) {
|
||||
// cspell:disable-next-line
|
||||
const statement = /^(\d+(?:\.\d+)?)([Mdhmswy]|ms)$/.exec(str.trim());
|
||||
if (statement !== null) {
|
||||
return [Number.parseFloat(statement[1]), statement[2]];
|
||||
|
|
|
|||
|
|
@ -178,7 +178,7 @@ export const draw = function (text, id, version, diagObj) {
|
|||
// tasks are created based on their order of startTime
|
||||
taskArray.sort(taskCompare);
|
||||
|
||||
makeGant(taskArray, w, h);
|
||||
makeGantt(taskArray, w, h);
|
||||
|
||||
configureSvgSize(svg, h, w, conf.useMaxWidth);
|
||||
|
||||
|
|
@ -194,7 +194,7 @@ export const draw = function (text, id, version, diagObj) {
|
|||
* @param pageWidth
|
||||
* @param pageHeight
|
||||
*/
|
||||
function makeGant(tasks, pageWidth, pageHeight) {
|
||||
function makeGantt(tasks, pageWidth, pageHeight) {
|
||||
const barHeight = conf.barHeight;
|
||||
const gap = barHeight + conf.barGap;
|
||||
const topPadding = conf.topPadding;
|
||||
|
|
@ -695,12 +695,12 @@ export const draw = function (text, id, version, diagObj) {
|
|||
function vertLabels(theGap, theTopPad) {
|
||||
let prevGap = 0;
|
||||
|
||||
const numOccurances = Object.keys(categoryHeights).map((d) => [d, categoryHeights[d]]);
|
||||
const numOccurrences = Object.keys(categoryHeights).map((d) => [d, categoryHeights[d]]);
|
||||
|
||||
svg
|
||||
.append('g') // without doing this, impossible to put grid lines behind text
|
||||
.selectAll('text')
|
||||
.data(numOccurances)
|
||||
.data(numOccurrences)
|
||||
.enter()
|
||||
.append(function (d) {
|
||||
const rows = d[0].split(common.lineBreakRegex);
|
||||
|
|
@ -725,7 +725,7 @@ export const draw = function (text, id, version, diagObj) {
|
|||
.attr('y', function (d, i) {
|
||||
if (i > 0) {
|
||||
for (let j = 0; j < i; j++) {
|
||||
prevGap += numOccurances[i - 1][1];
|
||||
prevGap += numOccurrences[i - 1][1];
|
||||
return (d[1] * theGap) / 2 + prevGap * theGap + theTopPad;
|
||||
}
|
||||
} else {
|
||||
|
|
|
|||
|
|
@ -36,8 +36,8 @@ function getId() {
|
|||
// * @param otherCommit
|
||||
// */
|
||||
// eslint-disable-next-line @cspell/spellchecker
|
||||
// function isfastforwardable(currentCommit, otherCommit) {
|
||||
// log.debug('Entering isfastforwardable:', currentCommit.id, otherCommit.id);
|
||||
// function isFastForwardable(currentCommit, otherCommit) {
|
||||
// log.debug('Entering isFastForwardable:', currentCommit.id, otherCommit.id);
|
||||
// let cnt = 0;
|
||||
// while (currentCommit.seq <= otherCommit.seq && currentCommit !== otherCommit && cnt < 1000) {
|
||||
// cnt++;
|
||||
|
|
@ -46,8 +46,8 @@ function getId() {
|
|||
// if (Array.isArray(otherCommit.parent)) {
|
||||
// log.debug('In merge commit:', otherCommit.parent);
|
||||
// return (
|
||||
// isfastforwardable(currentCommit, commits[otherCommit.parent[0]]) ||
|
||||
// isfastforwardable(currentCommit, commits[otherCommit.parent[1]])
|
||||
// isFastForwardable(currentCommit, commits[otherCommit.parent[0]]) ||
|
||||
// isFastForwardable(currentCommit, commits[otherCommit.parent[1]])
|
||||
// );
|
||||
// } else {
|
||||
// otherCommit = commits[otherCommit.parent];
|
||||
|
|
@ -64,7 +64,7 @@ function getId() {
|
|||
// function isReachableFrom(currentCommit, otherCommit) {
|
||||
// const currentSeq = currentCommit.seq;
|
||||
// const otherSeq = otherCommit.seq;
|
||||
// if (currentSeq > otherSeq) return isfastforwardable(otherCommit, currentCommit);
|
||||
// if (currentSeq > otherSeq) return isFastForwardable(otherCommit, currentCommit);
|
||||
// return false;
|
||||
// }
|
||||
|
||||
|
|
@ -231,7 +231,7 @@ export const merge = function (otherBranch, custom_id, override_type, custom_tag
|
|||
// log.debug('Already merged');
|
||||
// return;
|
||||
// }
|
||||
// if (isfastforwardable(currentCommit, otherCommit)) {
|
||||
// if (isFastForwardable(currentCommit, otherCommit)) {
|
||||
// branches[curBranch] = branches[otherBranch];
|
||||
// head = commits[branches[curBranch]];
|
||||
// } else {
|
||||
|
|
|
|||
|
|
@ -295,7 +295,7 @@ function renderCommitHistory(svg, commitId, branches, direction) {
|
|||
}
|
||||
|
||||
if (Array.isArray(commitId)) {
|
||||
logger.debug('found merge commmit', commitId);
|
||||
logger.debug('found merge commit', commitId);
|
||||
renderCommitHistory(svg, commitId[0], branches, direction);
|
||||
branchNum++;
|
||||
renderCommitHistory(svg, commitId[1], branches, direction);
|
||||
|
|
|
|||
|
|
@ -84,7 +84,7 @@ options
|
|||
| NL
|
||||
;
|
||||
body
|
||||
: /*emmpty*/ {$$ = []}
|
||||
: /*empty*/ {$$ = []}
|
||||
| body line {$1.push($2); $$=$1;}
|
||||
;
|
||||
line
|
||||
|
|
|
|||
|
|
@ -133,7 +133,7 @@ const type2Str = (type: number) => {
|
|||
case nodeType.BANG:
|
||||
return 'bang';
|
||||
case nodeType.HEXAGON:
|
||||
return 'hexgon';
|
||||
return 'hexgon'; // cspell: disable-line
|
||||
default:
|
||||
return 'no-border';
|
||||
}
|
||||
|
|
|
|||
|
|
@ -51,7 +51,7 @@ export interface PieDB extends DiagramDB {
|
|||
getDiagramTitle: () => string;
|
||||
setAccTitle: (title: string) => void;
|
||||
getAccTitle: () => string;
|
||||
setAccDescription: (describetion: string) => void;
|
||||
setAccDescription: (description: string) => void;
|
||||
getAccDescription: () => string;
|
||||
|
||||
// diagram db
|
||||
|
|
|
|||
|
|
@ -362,6 +362,8 @@ export const draw = (text, id, _version, diagObj) => {
|
|||
svg.attr('viewBox', `${svgBounds.x - padding} ${svgBounds.y - padding} ${width} ${height}`);
|
||||
};
|
||||
|
||||
// cspell:ignore txts
|
||||
|
||||
export default {
|
||||
draw,
|
||||
};
|
||||
|
|
|
|||
|
|
@ -11,14 +11,14 @@
|
|||
%lex
|
||||
|
||||
%options case-insensitive
|
||||
%options easy_keword_rules
|
||||
%options easy_keyword_rules
|
||||
|
||||
%x escaped_text
|
||||
%x csv
|
||||
|
||||
// as per section 6.1 of RFC 2234 [2]
|
||||
COMMA \u002C
|
||||
CR \u000D
|
||||
CR \u000D
|
||||
LF \u000A
|
||||
CRLF \u000D\u000A
|
||||
ESCAPED_QUOTE \u0022
|
||||
|
|
@ -32,7 +32,7 @@ TEXTDATA [\u0020-\u0021\u0023-\u002B\u002D-\u007E]
|
|||
<INITIAL,csv>({CRLF}|{LF}) { return 'NEWLINE' }
|
||||
<INITIAL,csv>{COMMA} { return 'COMMA' }
|
||||
<INITIAL,csv>{DQUOTE} { this.pushState('escaped_text'); return 'DQUOTE'; }
|
||||
<INITIAL,csv>{TEXTDATA}* { return 'NON_ESCAPED_TEXT' }
|
||||
<INITIAL,csv>{TEXTDATA}* { return 'NON_ESCAPED_TEXT' }
|
||||
<INITIAL,csv,escaped_text>{DQUOTE}(?!{DQUOTE}) {this.popState('escaped_text'); return 'DQUOTE'; } // unescaped DQUOTE closes string
|
||||
<INITIAL,csv,escaped_text>({TEXTDATA}|{COMMA}|{CR}|{LF}|{DQUOTE}{DQUOTE})* { return 'ESCAPED_TEXT'; }
|
||||
|
||||
|
|
@ -65,5 +65,3 @@ field
|
|||
escaped: DQUOTE ESCAPED_TEXT DQUOTE { $$=$ESCAPED_TEXT; };
|
||||
|
||||
non_escaped: NON_ESCAPED_TEXT { $$=$NON_ESCAPED_TEXT; };
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -76,10 +76,10 @@ export const drawPopup = function (elem, actor, minMenuWidth, textAttrs, forceMe
|
|||
return { height: rectData.height + linkY, width: menuWidth };
|
||||
};
|
||||
|
||||
const popupMenuToggle = function (popid) {
|
||||
const popupMenuToggle = function (popId) {
|
||||
return (
|
||||
"var pu = document.getElementById('" +
|
||||
popid +
|
||||
popId +
|
||||
"'); if (pu != null) { pu.style.display = pu.style.display == 'block' ? 'none' : 'block'; }"
|
||||
);
|
||||
};
|
||||
|
|
@ -329,8 +329,8 @@ const drawActorTypeParticipant = async function (elem, actor, conf, isFooter) {
|
|||
const center = actor.x + actor.width / 2;
|
||||
const centerY = actorY + 5;
|
||||
|
||||
const boxpluslineGroup = elem.append('g').lower();
|
||||
var g = boxpluslineGroup;
|
||||
const boxplusLineGroup = elem.append('g').lower();
|
||||
var g = boxplusLineGroup;
|
||||
|
||||
if (!isFooter) {
|
||||
actorCnt++;
|
||||
|
|
@ -348,7 +348,7 @@ const drawActorTypeParticipant = async function (elem, actor, conf, isFooter) {
|
|||
.attr('stroke-width', '0.5px')
|
||||
.attr('stroke', '#999');
|
||||
|
||||
g = boxpluslineGroup.append('g');
|
||||
g = boxplusLineGroup.append('g');
|
||||
actor.actorCnt = actorCnt;
|
||||
|
||||
if (actor.links != null) {
|
||||
|
|
@ -512,8 +512,8 @@ export const drawActor = async function (elem, actor, conf, isFooter) {
|
|||
};
|
||||
|
||||
export const drawBox = async function (elem, box, conf) {
|
||||
const boxplustextGroup = elem.append('g');
|
||||
const g = boxplustextGroup;
|
||||
const boxplusTextGroup = elem.append('g');
|
||||
const g = boxplusTextGroup;
|
||||
drawBackgroundRect(g, box);
|
||||
if (box.name) {
|
||||
await _drawTextCandidateFunc(conf)(
|
||||
|
|
|
|||
|
|
@ -206,7 +206,7 @@ export const addTitleAndBox = (g, stateDef, altBkg) => {
|
|||
g.insert('rect', ':first-child')
|
||||
.attr('x', startX)
|
||||
.attr('y', lineY)
|
||||
.attr('class', altBkg ? 'alt-composit' : 'composit')
|
||||
.attr('class', altBkg ? 'alt-composit' : 'composit') // cspell:disable-line
|
||||
.attr('width', width)
|
||||
.attr(
|
||||
'height',
|
||||
|
|
@ -482,11 +482,11 @@ export const drawEdge = function (elem, path, relation) {
|
|||
.attr('x', x)
|
||||
.attr('y', y + titleHeight);
|
||||
|
||||
const boundstmp = title.node().getBBox();
|
||||
maxWidth = Math.max(maxWidth, boundstmp.width);
|
||||
minX = Math.min(minX, boundstmp.x);
|
||||
const boundsTmp = title.node().getBBox();
|
||||
maxWidth = Math.max(maxWidth, boundsTmp.width);
|
||||
minX = Math.min(minX, boundsTmp.x);
|
||||
|
||||
log.info(boundstmp.x, x, y + titleHeight);
|
||||
log.info(boundsTmp.x, x, y + titleHeight);
|
||||
|
||||
if (titleHeight === 0) {
|
||||
const titleBox = title.node().getBBox();
|
||||
|
|
|
|||
|
|
@ -260,7 +260,7 @@ export const addState = function (
|
|||
if (classes) {
|
||||
log.info('Setting state classes', trimmedId, classes);
|
||||
const classesList = typeof classes === 'string' ? [classes] : classes;
|
||||
classesList.forEach((klass) => setCssClass(trimmedId, klass.trim()));
|
||||
classesList.forEach((cssClass) => setCssClass(trimmedId, cssClass.trim()));
|
||||
}
|
||||
|
||||
if (styles) {
|
||||
|
|
|
|||
|
|
@ -202,4 +202,7 @@ g.stateGroup line {
|
|||
}
|
||||
`;
|
||||
|
||||
// todo: change composit to composite
|
||||
// cspell:ignore composit
|
||||
|
||||
export default getStyles;
|
||||
|
|
|
|||
|
|
@ -53,7 +53,7 @@ export const addTask = function (period, length, event) {
|
|||
};
|
||||
|
||||
export const addEvent = function (event) {
|
||||
// fetch current task with currnetTaskId
|
||||
// fetch current task with currentTaskId
|
||||
const currentTask = rawTasks.find((task) => task.id === currentTaskId - 1);
|
||||
//add event to the events array
|
||||
currentTask.events.push(event);
|
||||
|
|
|
|||
|
|
@ -27,14 +27,14 @@ export function getAxis(
|
|||
axisThemeConfig: XYChartAxisThemeConfig,
|
||||
tmpSVGGroup: Group
|
||||
): Axis {
|
||||
const textDimansionCalculator = new TextDimensionCalculatorWithFont(tmpSVGGroup);
|
||||
const textDimensionCalculator = new TextDimensionCalculatorWithFont(tmpSVGGroup);
|
||||
if (isBandAxisData(data)) {
|
||||
return new BandAxis(
|
||||
axisConfig,
|
||||
axisThemeConfig,
|
||||
data.categories,
|
||||
data.title,
|
||||
textDimansionCalculator
|
||||
textDimensionCalculator
|
||||
);
|
||||
}
|
||||
return new LinearAxis(
|
||||
|
|
@ -42,6 +42,6 @@ export function getAxis(
|
|||
axisThemeConfig,
|
||||
[data.min, data.max],
|
||||
data.title,
|
||||
textDimansionCalculator
|
||||
textDimensionCalculator
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -112,7 +112,7 @@ export class Orchestrator {
|
|||
}
|
||||
}
|
||||
|
||||
private calculateHorizonatalSpace() {
|
||||
private calculateHorizontalSpace() {
|
||||
let availableWidth = this.chartConfig.width;
|
||||
let availableHeight = this.chartConfig.height;
|
||||
let titleYEnd = 0;
|
||||
|
|
@ -174,7 +174,7 @@ export class Orchestrator {
|
|||
|
||||
private calculateSpace() {
|
||||
if (this.chartConfig.chartOrientation === 'horizontal') {
|
||||
this.calculateHorizonatalSpace();
|
||||
this.calculateHorizontalSpace();
|
||||
} else {
|
||||
this.calculateVerticalSpace();
|
||||
}
|
||||
|
|
|
|||
|
|
@ -130,7 +130,7 @@ You might see _lint_ or _formatting_ warnings. Those are ok during this step.
|
|||
|
||||
## Workflow
|
||||
|
||||
Contributing process is very simple and strightforward:
|
||||
Contributing process is very simple and straightforward:
|
||||
|
||||
```mermaid-nocode
|
||||
flowchart LR
|
||||
|
|
@ -377,7 +377,7 @@ eg: `# Feature Name (v<MERMAID_RELEASE_VERSION>+)`
|
|||
|
||||
We know it can sometimes be hard to code _and_ write user documentation.
|
||||
|
||||
Create another issue specifically for the documentation.
|
||||
Create another issue specifically for the documentation.
|
||||
You will need to help with the PR, but definitely ask for help if you feel stuck.
|
||||
When it feels hard to write stuff out, explaining it to someone and having that person ask you clarifying questions can often be 80% of the work!
|
||||
|
||||
|
|
@ -403,7 +403,7 @@ The contents of [mermaid.js.org](https://mermaid.js.org/) are based on the docs
|
|||
flowchart LR
|
||||
classDef default fill:#fff,color:black,stroke:black
|
||||
|
||||
source["Edit /packages/mermaid/src/docs"] -- automatic processing--> published["View /docs which will be publised on Official Website"]
|
||||
source["Edit /packages/mermaid/src/docs"] -- automatic processing--> published["View /docs which will be published on Official Website"]
|
||||
```
|
||||
|
||||
### Running the Documentation Website Locally
|
||||
|
|
@ -521,3 +521,5 @@ You have successfully submitted your improvements! What is next?
|
|||
- When a release is ready, the `release/x.x.x` branch will be created, extensively tested and knsv will be in charge of the release process.
|
||||
|
||||
Thanks for you help!
|
||||
|
||||
<!--- cspell:ignore florbs --->
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ Mermaid will automatically insert the [aria-roledescription](#aria-roledescripti
|
|||
|
||||
The [aria-roledescription](https://www.w3.org/TR/wai-aria-1.1/#aria-roledescription) for the SVG HTML element is set to the diagram type key. (Note this may be slightly different than the keyword used for the diagram in the diagram text.)
|
||||
|
||||
For example: The diagram type key for a state diagram is "stateDiagram". Here (a part of) the HTML of the SVG tag that shows the automatically inserted aria-roledscription set to "stateDiagram". _(Note that some of the SVG attributes and the SVG contents are omitted for clarity.):_
|
||||
For example: The diagram type key for a state diagram is "stateDiagram". Here (a part of) the HTML of the SVG tag that shows the automatically inserted aria-roledescription set to "stateDiagram". _(Note that some of the SVG attributes and the SVG contents are omitted for clarity.):_
|
||||
|
||||
```html
|
||||
<svg
|
||||
|
|
|
|||
|
|
@ -47,7 +47,7 @@ Example of `init` directive setting the `theme` to `forest`:
|
|||
a --> b
|
||||
```
|
||||
|
||||
> **Reminder**: the only theme that can be customed is the `base` theme. The following section covers how to use `themeVariables` for customizations.
|
||||
> **Reminder**: the only theme that can be customized is the `base` theme. The following section covers how to use `themeVariables` for customizations.
|
||||
|
||||
## Customizing Themes with `themeVariables`
|
||||
|
||||
|
|
|
|||
|
|
@ -437,3 +437,8 @@ mermaid_config.startOnLoad = true;
|
|||
```warning
|
||||
This way of setting the configuration is deprecated. Instead the preferred way is to use the initialize method. This functionality is only kept for backwards compatibility.
|
||||
```
|
||||
|
||||
<!---
|
||||
cspell:locale en,en-gb
|
||||
cspell:ignore pumbaa
|
||||
--->
|
||||
|
|
|
|||
|
|
@ -74,3 +74,5 @@ graph LR;
|
|||
**Output**
|
||||
|
||||
|
||||
|
||||
<!--- cspell:ignore Elle Jaoude Neurodiverse graphbytes --->
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@ sequenceDiagram
|
|||
participant Alice
|
||||
participant Bob
|
||||
Alice->>John: Hello John, how are you?
|
||||
loop Healthcheck
|
||||
loop HealthCheck
|
||||
John->>John: Fight against hypochondria
|
||||
end
|
||||
Note right of John: Rational thoughts <br/>prevail!
|
||||
|
|
|
|||
|
|
@ -291,7 +291,7 @@ block-beta
|
|||
ida space:3 idb idc
|
||||
```
|
||||
|
||||
Note that you can set how many columns the spece block occupied using the number notaion `space:num` where num is a number indicating the num columns width. You can alsio use `space` which defaults to one column.
|
||||
Note that you can set how many columns the space block occupied using the number notation `space:num` where num is a number indicating the num columns width. You can also use `space` which defaults to one column.
|
||||
|
||||
The variety of shapes and special blocks in Mermaid enhances the expressive power of block diagrams, allowing for more accurate and context-specific representations. These options give users the flexibility to create diagrams that are both informative and visually appealing. In the next sections, we will explore the ways to connect these blocks and customize their appearance.
|
||||
|
||||
|
|
@ -445,7 +445,7 @@ block-beta
|
|||
```
|
||||
|
||||
**Correction**:
|
||||
Ensure that links between blocks are correctly specified with arrows (--> or ---) to define the direction and type of connection. Also rememeber that one of the fundaments for block diagram is to give the author full control of where the boxes are positioned so in the example you need to add a space between the boxes:
|
||||
Ensure that links between blocks are correctly specified with arrows (--> or ---) to define the direction and type of connection. Also remember that one of the fundaments for block diagram is to give the author full control of where the boxes are positioned so in the example you need to add a space between the boxes:
|
||||
|
||||
```mermaid-example
|
||||
block-beta
|
||||
|
|
|
|||
|
|
@ -135,7 +135,7 @@ The following unfinished features are not supported in the short term.
|
|||
- [x] Rel_L, Rel_Left
|
||||
- [x] Rel_R, Rel_Right
|
||||
- [x] Rel_Back
|
||||
- [x] RelIndex \* Compatible with C4-Plantuml syntax, but ignores the index parameter. The sequence number is determined by the order in which the rel statements are written.
|
||||
- [x] RelIndex \* Compatible with C4-PlantUML syntax, but ignores the index parameter. The sequence number is determined by the order in which the rel statements are written.
|
||||
|
||||
- [ ] Custom tags/stereotypes support and skin param updates
|
||||
- [ ] AddElementTag(tagStereo, ?bgColor, ?fontColor, ?borderColor, ?shadowing, ?shape, ?sprite, ?techn, ?legendText, ?legendSprite): Introduces a new element tag. The styles of the tagged elements are updated and the tag is displayed in the calculated legend.
|
||||
|
|
@ -367,3 +367,5 @@ UpdateRelStyle(customerA, bankA, $offsetY="60")
|
|||
UpdateRelStyle(db, db2, $offsetY="-10")
|
||||
|
||||
```
|
||||
|
||||
<!--- cspell:ignore bigbank bigbankdb techn mbsfacade --->
|
||||
|
|
|
|||
|
|
@ -143,7 +143,7 @@ class BankAccount{
|
|||
|
||||
#### Generic Types
|
||||
|
||||
Generics can be representated as part of a class definition, and for class members/return types. In order to denote an item as generic, you enclose that type within `~` (**tilde**). **Nested** type declarations such as `List<List<int>>` are supported, though generics that include a comma are currently not supported. (such as `List<List<K, V>>`)
|
||||
Generics can be represented as part of a class definition, and for class members/return types. In order to denote an item as generic, you enclose that type within `~` (**tilde**). **Nested** type declarations such as `List<List<int>>` are supported, though generics that include a comma are currently not supported. (such as `List<List<K, V>>`)
|
||||
|
||||
> _note_ when a generic is used within a class definition, the generic type is NOT considered part of the class name. i.e.: for any syntax which required you to reference the class name, you need to drop the type part of the definition. This also means that mermaid does not currently support having two classes with the same name, but different generic types.
|
||||
|
||||
|
|
|
|||
|
|
@ -217,3 +217,5 @@ The following CSS class selectors are available for richer styling:
|
|||
| `.er.relationshipLabel` | The label for a relationship |
|
||||
| `.er.relationshipLabelBox` | The box surrounding a relationship label |
|
||||
| `.er.relationshipLine` | The line representing a relationship between entities |
|
||||
|
||||
<!--- cspell:locale en,en-gb --->
|
||||
|
|
|
|||
|
|
@ -96,7 +96,7 @@ sequenceDiagram
|
|||
participant Alice
|
||||
participant Bob
|
||||
Alice->>John: Hello John, how are you?
|
||||
loop Healthcheck
|
||||
loop HealthCheck
|
||||
John->>John: Fight against hypochondria
|
||||
end
|
||||
Note right of John: Rational thoughts<br/>prevail...
|
||||
|
|
@ -156,3 +156,5 @@ gitGraph:
|
|||
branch b2
|
||||
commit
|
||||
```
|
||||
|
||||
<!--- cspell:ignore Ashish newbranch --->
|
||||
|
|
|
|||
|
|
@ -836,3 +836,5 @@ mermaid.flowchartConfig = {
|
|||
width: 100%
|
||||
}
|
||||
```
|
||||
|
||||
<!--- cspell:ignore lagom --->
|
||||
|
|
|
|||
|
|
@ -226,7 +226,7 @@ gantt
|
|||
|
||||
## Output in compact mode
|
||||
|
||||
The compact mode allows you to display multiple tasks in the same row. Compact mode can be enabled for a gantt chart by setting the display mode of the graph via preceeding YAML settings.
|
||||
The compact mode allows you to display multiple tasks in the same row. Compact mode can be enabled for a gantt chart by setting the display mode of the graph via preceding YAML settings.
|
||||
|
||||
```mermaid
|
||||
---
|
||||
|
|
|
|||
|
|
@ -959,7 +959,7 @@ See how the commit label color and background color are changed to the values sp
|
|||
|
||||
### Customizing Commit Label Font Size
|
||||
|
||||
You can customize commit using the `commitLabelFontSize` theme variables for changing in the font soze of the commit label .
|
||||
You can customize commit using the `commitLabelFontSize` theme variables for changing in the font size of the commit label .
|
||||
|
||||
Example:
|
||||
Now let's override the default values for the `commitLabelFontSize` variable:
|
||||
|
|
@ -989,7 +989,7 @@ See how the commit label font size changed.
|
|||
|
||||
### Customizing Tag Label Font Size
|
||||
|
||||
You can customize commit using the `tagLabelFontSize` theme variables for changing in the font soze of the tag label .
|
||||
You can customize commit using the `tagLabelFontSize` theme variables for changing in the font size of the tag label .
|
||||
|
||||
Example:
|
||||
Now let's override the default values for the `tagLabelFontSize` variable:
|
||||
|
|
|
|||
|
|
@ -204,3 +204,8 @@ From version 9.4.0 you can simplify this code to:
|
|||
```
|
||||
|
||||
You can also refer the implementation in the live editor [here](https://github.com/mermaid-js/mermaid-live-editor/blob/develop/src/lib/util/mermaid.ts) to see how the async loading is done.
|
||||
|
||||
<!---
|
||||
cspell:locale en,en-gb
|
||||
cspell:ignore Buzan
|
||||
--->
|
||||
|
|
|
|||
|
|
@ -156,3 +156,5 @@ This example uses all features of the diagram.
|
|||
test_entity3 - verifies -> test_req5
|
||||
test_req <- copies - test_entity2
|
||||
```
|
||||
|
||||
<!--- cspell:ignore reqs --->
|
||||
|
|
|
|||
|
|
@ -185,3 +185,5 @@ Graph layout can be changed by setting `nodeAlignment` to:
|
|||
- `center`
|
||||
- `left`
|
||||
- `right`
|
||||
|
||||
<!--- cspell:ignore Ngas bioenergy biofuel --->
|
||||
|
|
|
|||
|
|
@ -129,8 +129,8 @@ end
|
|||
end
|
||||
A->>J: Hello John, how are you?
|
||||
J->>A: Great!
|
||||
A->>B: Hello Bob, how is Charly?
|
||||
B->>C: Hello Charly, how are you?
|
||||
A->>B: Hello Bob, how is Charley?
|
||||
B->>C: Hello Charley, how are you?
|
||||
```
|
||||
|
||||
## Messages
|
||||
|
|
@ -457,7 +457,7 @@ It can also be turned on via the diagram code as in the diagram:
|
|||
sequenceDiagram
|
||||
autonumber
|
||||
Alice->>John: Hello John, how are you?
|
||||
loop Healthcheck
|
||||
loop HealthCheck
|
||||
John->>John: Fight against hypochondria
|
||||
end
|
||||
Note right of John: Rational thoughts!
|
||||
|
|
|
|||
|
|
@ -396,7 +396,7 @@ Spaces can be added to a state by first defining the state with an id and then r
|
|||
|
||||
In the following example there is a state with the id **yswsii** and description **Your state with spaces in it**.
|
||||
After it has been defined, **yswsii** is used in the diagram in the first transition (`[*] --> yswsii`)
|
||||
and also in the transition to **YetAnotherState** (`yswsii --> YetAnotherState`).
|
||||
and also in the transition to **YetAnotherState** (`yswsii --> YetAnotherState`).
|
||||
(**yswsii** has been styled so that it is different from the other states.)
|
||||
|
||||
```mermaid-example
|
||||
|
|
@ -410,3 +410,5 @@ stateDiagram
|
|||
yswsii --> YetAnotherState
|
||||
YetAnotherState --> [*]
|
||||
```
|
||||
|
||||
<!--- cspell:ignore yswsii --->
|
||||
|
|
|
|||
|
|
@ -127,7 +127,7 @@ As explained earlier, each section has a color scheme, and each time period and
|
|||
|
||||
However, if there is no section defined, then we have two possibilities:
|
||||
|
||||
1. Style time periods individually, i.e. each time period(and its coressponding events) will have its own color scheme. This is the DEFAULT behavior.
|
||||
1. Style time periods individually, i.e. each time period(and its corresponding events) will have its own color scheme. This is the DEFAULT behavior.
|
||||
|
||||
```mermaid-example
|
||||
timeline
|
||||
|
|
|
|||
|
|
@ -134,11 +134,11 @@ Themes for xychart resides inside xychart attribute so to set the variables use
|
|||
| ---------------- | --------------------------------------------------------- |
|
||||
| backgroundColor | Background color of the whole chart |
|
||||
| titleColor | Color of the Title text |
|
||||
| xAxisLableColor | Color of the x-axis labels |
|
||||
| xAxisLabelColor | Color of the x-axis labels |
|
||||
| xAxisTitleColor | Color of the x-axis title |
|
||||
| xAxisTickColor | Color of the x-axis tick |
|
||||
| xAxisLineColor | Color of the x-axis line |
|
||||
| yAxisLableColor | Color of the y-axis labels |
|
||||
| yAxisLabelColor | Color of the y-axis labels |
|
||||
| yAxisTitleColor | Color of the y-axis title |
|
||||
| yAxisTickColor | Color of the y-axis tick |
|
||||
| yAxisLineColor | Color of the y-axis line |
|
||||
|
|
|
|||
|
|
@ -163,6 +163,7 @@ describe('mermaidAPI', () => {
|
|||
});
|
||||
|
||||
it('decodesEntities', () => {
|
||||
// cspell:ignore brrrr
|
||||
const result = cleanUpSvgCode('¶ß brrrr', true, true);
|
||||
expect(result).toEqual('; brrrr');
|
||||
});
|
||||
|
|
@ -232,6 +233,8 @@ describe('mermaidAPI', () => {
|
|||
// @ts-ignore @todo TODO why is this getting a type error?
|
||||
const svg_attr_spy = vi.spyOn(fauxSvgNode, 'attr').mockReturnValue(fauxSvgNode);
|
||||
|
||||
// cspell:ignore dthe
|
||||
|
||||
it('appends a div node', () => {
|
||||
appendDivSvgG(fauxParentNode, 'theId', 'dtheId');
|
||||
expect(parent_append_spy).toHaveBeenCalledWith('div');
|
||||
|
|
@ -731,7 +734,7 @@ describe('mermaidAPI', () => {
|
|||
const diagramText = `${diagramType}\n accTitle: ${a11yTitle}\n accDescr: ${a11yDescr}\n`;
|
||||
const expectedDiagramType = testedDiagram.expectedType;
|
||||
|
||||
it('should set aria-roledscription to the diagram type AND should call addSVGa11yTitleDescription', async () => {
|
||||
it('should set aria-roledescription to the diagram type AND should call addSVGa11yTitleDescription', async () => {
|
||||
const a11yDiagramInfo_spy = vi.spyOn(accessibility, 'setA11yDiagramInfo');
|
||||
const a11yTitleDesc_spy = vi.spyOn(accessibility, 'addSVGa11yTitleDescription');
|
||||
await mermaidAPI.render(id, diagramText);
|
||||
|
|
|
|||
|
|
@ -188,11 +188,11 @@ export const createText = (
|
|||
// TODO: addHtmlLabel accepts a labelStyle. Do we possibly have that?
|
||||
// text = text.replace(/\\n|\n/g, '<br />');
|
||||
const htmlText = markdownToHTML(text);
|
||||
// log.info('markdo wnToHTML' + text, markdownToHTML(text));
|
||||
// log.info('markdownToHTML' + text, markdownToHTML(text));
|
||||
const node = {
|
||||
isNode,
|
||||
label: decodeEntities(htmlText).replace(
|
||||
/fa[blrs]?:fa-[\w-]+/g,
|
||||
/fa[blrs]?:fa-[\w-]+/g, // cspell: disable-line
|
||||
(s) => `<i class='${s.replace(':', ' ')}'></i>`
|
||||
),
|
||||
labelStyle: style.replace('fill:', 'color:'),
|
||||
|
|
|
|||
|
|
@ -145,3 +145,5 @@ const createCheckFn = (width: number): CheckFitFunction => {
|
|||
return characters.length <= width;
|
||||
};
|
||||
};
|
||||
|
||||
// cspell:ignore worl
|
||||
|
|
|
|||
811
pnpm-lock.yaml
811
pnpm-lock.yaml
File diff suppressed because it is too large
Load Diff
2
run
2
run
|
|
@ -72,7 +72,7 @@ $(bold ./$name pnpm) # Run any 'pnpm' command
|
|||
$(bold ./$name sh) # Open 'sh' inside docker container for development
|
||||
__________________________________________________________________________________________
|
||||
|
||||
Examples of frequiently used commands:
|
||||
Examples of frequently used commands:
|
||||
|
||||
$(bold ./$name pnpm add --filter mermaid) $(underline package)
|
||||
Add package to mermaid
|
||||
|
|
|
|||
Loading…
Reference in New Issue