Compare commits

..

135 Commits

Author SHA1 Message Date
renovate[bot]
c25a76720f fix(deps): update all patch dependencies 2025-10-22 17:42:38 +00:00
Knut Sveidqvist
fed8a523a4 Merge pull request #7076 from mermaid-js/6919-fix-incorrect-viewBox-casing
6919: correct viewBox casing in Radar & Packet
2025-10-21 12:20:04 +00:00
Knut Sveidqvist
33b4946e21 Merge branch 'develop' into 6919-fix-incorrect-viewBox-casing 2025-10-21 10:33:21 +02:00
Justin Greywolf
3d768f3adf Merge pull request #6975 from ilovelinux/fix/6974-ilovelinux-fix-classdiagram-example
Fix classDiagram example
2025-10-17 02:56:34 +00:00
darshanr0107
76e17ffd20 fix: add validation to ensure correct casing of 'viewBox' in all rendering tests
on-behalf-of: @Mermaid-Chart <hello@mermaidchart.com>
2025-10-15 18:56:49 +05:30
darshanr0107
60f633101c chore: added changeset
on-behalf-of: @Mermaid-Chart <hello@mermaidchart.com>
2025-10-13 19:14:22 +05:30
Shubham P
18f51eb14e Merge pull request #6843 from saurabhg772244/saurabh/fix-edge-animation-for-hand-dranw-shapes
Fixed edge animation for hand drawn shapes
2025-10-13 13:14:24 +00:00
Shubham P
2bb57bf7d2 Merge pull request #6989 from mermaid-js/subgraph-td-direction
6338: allow direction TD inside subgraphs
2025-10-13 13:13:46 +00:00
Shubham P
a6276daffd Merge pull request #7055 from mermaid-js/sequence-diagram-participant-name-parsing
6853:  prevent browser freeze caused by invalid participant name in sequenceDiagram
2025-10-13 13:12:08 +00:00
darshanr0107
7def6eecbf fix: correct viewBox casing in radar and packet diagram
on-behalf-of: @Mermaid-Chart <hello@mermaidchart.com>
2025-10-13 18:15:38 +05:30
Antonio Spadaro
ac411a7d7e Fix class diagram example 2025-10-11 22:56:37 +02:00
Justin Greywolf
d80a638e55 Merge pull request #6023 from yari-dewalt/fix_lollipop_stroke
Fix: Delete 'stroke: black' from lollipop marker so it matches themes and edge paths
2025-10-11 20:43:08 +00:00
Justin Greywolf
7a869c08a2 Merge pull request #6026 from yari-dewalt/bug/5669_class-diagram-fix-namespace-themes
Fix: Class diagram namespaces black lines, not responding to theme variables
2025-10-11 20:42:53 +00:00
Justin Greywolf
44e8cbb1de Merge branch 'develop' into bug/5669_class-diagram-fix-namespace-themes 2025-10-11 13:27:47 -07:00
Justin Greywolf
efe38b8425 Merge branch 'develop' into fix_lollipop_stroke 2025-10-11 13:26:59 -07:00
darshanr0107
6fecb985e8 fix: failing argos
on-behalf-of: @Mermaid-Chart <hello@mermaidchart.com>
2025-10-09 11:50:44 +05:30
darshanr0107
69b338d8af fix: formatting issues
Co-authored-by: omkarht <omkar@mermaidchart.com>
2025-10-09 11:37:05 +05:30
darshanr0107
fa15ce8502 chore: added changeset
on-behalf-of: @Mermaid-Chart <hello@mermaidchart.com>
2025-10-08 13:23:28 +05:30
darshanr0107
6d0650918f fix: handle participant names with spaces correctly in sequenceDiagram
on-behalf-of: @Mermaid-Chart <hello@mermaidchart.com>
2025-10-08 13:09:30 +05:30
Shubham P
c728d864c8 Merge pull request #7054 from mermaid-js/fix/update-argos-ci-version
fix: update @argos-ci/cypress to version 6.1.3
2025-10-07 08:34:58 +00:00
shubhamparikh2704
99f17bea3a fix: update @argos-ci/cypress to version 6.1.3 2025-10-07 13:39:28 +05:30
Ashish Jain
c1c14e401a Merge pull request #7019 from mermaid-js/tmp-mindmap-elk
mindmap breaking issue in ELK layout
2025-09-30 09:02:40 +00:00
darshanr0107
8b3057f27c fix: guard nodeDb[node.id] against undefined
on-behalf-of: @Mermaid-Chart <hello@mermaidchart.com>
2025-09-30 12:27:53 +05:30
Shubham P
717d3b3bb2 Merge pull request #6984 from mermaid-js/fix/er-diagram-syntax-error-special-chars
fix(er-diagram): handle syntax errors for special characters in node names
2025-09-29 08:37:03 +00:00
Shubham P
2f8d9ba958 Merge pull request #6789 from mermaid-js/6638-sequence-diagram-additional-messages
6638:sequence diagram additional messages
2025-09-29 08:08:33 +00:00
darshanr0107
ace0367afd chore: add changeset
on-behalf-of: @Mermaid-Chart <hello@mermaidchart.com>
2025-09-29 13:37:10 +05:30
Knut Sveidqvist
b983626587 Fix for reference issue affecting mindmaps 2025-09-26 15:24:20 +02:00
Shubham P
7effdc147b Merge pull request #6997 from mermaid-js/ci/enable-codeql-for-github-actions
ci(codeql): enable CodeQL for GitHub Actions
2025-09-25 08:47:48 +00:00
Alois Klink
6e67515f41 ci(codeql): enable CodeQL for GitHub Actions
Support for scanning GitHub Actions was added in 2024-12-17, see
https://github.blog/changelog/2024-12-17-find-and-fix-actions-workflows-vulnerabilities-with-codeql-public-preview/
2025-09-25 17:17:12 +09:00
darshanr0107
1a9d45abf0 fix: allow direction TD inside subgraphs
on-behalf-of: @Mermaid-Chart <hello@mermaidchart.com>
2025-09-24 12:22:31 +05:30
omkarht
09b74f1c29 chore: added changeset
on-behalf-of: @Mermaid-Chart <hello@mermaidchart.com>
2025-09-23 13:39:45 +05:30
omkarht
880da21908 test: add tests for handling special characters and numeric entity names
on-behalf-of: @Mermaid-Chart <hello@mermaidchart.com>
2025-09-23 13:29:19 +05:30
omkarht
38191243be Merge branch 'develop' into fix/er-diagram-syntax-error-special-chars 2025-09-23 12:41:42 +05:30
omkarht
b75dcb8a82 Merge branch 'develop' into 6638-sequence-diagram-additional-messages 2025-09-23 12:40:39 +05:30
omkarht
4c1e170f4a fix(er-diagram): handle syntax errors for special characters in node names 2025-09-23 12:39:29 +05:30
Shubham P
d5c4eff251 Merge pull request #6972 from mermaid-js/renovate/patch-all-patch
fix(deps): update all patch dependencies (patch)
2025-09-22 13:49:30 +00:00
renovate[bot]
5324fd8dfd fix(deps): update all patch dependencies 2025-09-22 13:35:45 +00:00
omkarht
bd25b88a01 Merge branch 'develop' into 6638-sequence-diagram-additional-messages 2025-09-22 13:36:01 +05:30
Sidharth Vinod
37e3a6951b Merge pull request #6956 from mermaid-js/develop
Pre Release
2025-09-17 23:15:32 +05:30
Sidharth Vinod
0de0b063e4 Merge pull request #6958 from dijitali/fix/arch-icon-docs
fix(docs) correct phrasing for architecture icon installation
2025-09-17 23:06:48 +05:30
Shubham P
619515e5a9 Merge pull request #6925 from mermaid-js/renovate/patch-all-patch
fix(deps): update all patch dependencies (patch)
2025-09-17 14:16:47 +00:00
shubhamparikh2704
59c8b07509 Merge branch 'develop' of https://github.com/mermaid-js/mermaid into renovate/patch-all-patch 2025-09-17 19:34:56 +05:30
Sidharth Vinod
9e72bbf62d Merge pull request #6955 from mermaid-js/sidv/updateArgos
chore: Update argos to 6.1.0
2025-09-17 18:48:40 +05:30
Sidharth Vinod
2a2c46f1e2 chore: Update argos to 6.1.1 2025-09-17 18:14:03 +05:30
Shubham P
f25df353d4 Merge pull request #6959 from mermaid-js/remove-changeset
chore: remove duplicate changeset file
2025-09-17 10:50:09 +00:00
shubhamparikh2704
398345a8bc chore: remove duplicate changeset file 2025-09-17 16:07:45 +05:30
autofix-ci[bot]
7fd2d94ef7 [autofix.ci] apply automated fixes 2025-09-17 08:47:15 +00:00
Ieuan Jenkins
bcc1472b9d fix(docs) correct phrasing for architecture icon installation
docs gave the incorrect impression that iconify.design icons came preinstalled
2025-09-17 09:21:42 +01:00
shubhamparikh2704
ddc1cfe6c8 Revert "fix: downgrade @argos-ci/cypress to version 5.0.2"
This reverts commit 18e9c1174d.
2025-09-17 13:07:43 +05:30
omkarht
d3de3ecbbb Merge branch 'develop' into 6638-sequence-diagram-additional-messages 2025-09-17 12:41:51 +05:30
shubhamparikh2704
18e9c1174d fix: downgrade @argos-ci/cypress to version 5.0.2 2025-09-17 12:14:29 +05:30
Sidharth Vinod
789018abf6 chore: Update argos to 6.1.0 2025-09-17 11:38:57 +05:30
Shubham P
16569b295b Merge pull request #6942 from mermaid-js/renovate/peter-evans-create-pull-request-digest
chore(deps): update peter-evans/create-pull-request digest to 915d841
2025-09-16 17:28:34 +00:00
renovate[bot]
11a35c11ee chore(deps): update peter-evans/create-pull-request digest to 915d841 2025-09-16 16:02:14 +00:00
Shubham P
216be22801 Merge pull request #6945 from mermaid-js/fix/gantt-crash-obsidian-browser
6920: Fix Gantt chart crashes in Obsidian and browser
2025-09-16 15:49:49 +00:00
Ashish Jain
e87f77a865 Merge pull request #6950 from mermaid-js/patch/mindmap-fix
Pre Release
2025-09-16 12:48:55 +02:00
shubhamparikh2704
a9579083bf chore: add changeset for fixing mindmap rendering and applying tidytree layout 2025-09-16 13:33:31 +05:30
Knut Sveidqvist
6fd78d0856 Merge pull request #6944 from mermaid-js/docs/fix-mindmap-rendering
6932:Fix mindmap rendering in docs and apply tidytree layout
2025-09-16 13:27:23 +05:30
Sidharth Vinod
994f7df29a Merge pull request #6949 from tklever/examples-license
docs: add MIT license to `examples` metadata
2025-09-16 12:40:40 +05:30
Sidharth Vinod
531f5e9380 Merge pull request #6948 from mermaid-js/add-newest-blog-posts
DOCS: add newest blog posts
2025-09-16 11:45:06 +05:30
Tim Klever
dc11b8645c docs: add MIT license to examples metadata
Adding the MIT license documentation so the published package metadata accurately reflects the license. The MIT license is currently included in the package distribution https://www.npmjs.com/package/@mermaid-js/examples?activeTab=code, but not documented in the metadata. This causes npmjs.com to display the license as "none"
2025-09-15 17:35:44 -07:00
Steph
ad4c227477 add newest blog posts 2025-09-15 13:24:39 -07:00
omkarht
3964ce0a0f Merge branch 'develop' into 6638-sequence-diagram-additional-messages 2025-09-15 18:15:59 +05:30
Shubham P
181af8167b Merge pull request #6934 from fulldecent/patch-2
Specify score range for task syntax
2025-09-15 09:18:39 +00:00
Shubham P
799d2ed547 Merge branch 'develop' into patch-2 2025-09-15 14:38:57 +05:30
shubhamparikh2704
a44e3e992c refactor: remove unused dependencies from pnpm-lock.yaml 2025-09-15 14:37:50 +05:30
shubhamparikh2704
ca5b370ffb Merge branch 'develop' of https://github.com/mermaid-js/mermaid into renovate/patch-all-patch 2025-09-15 14:32:02 +05:30
Shubham P
08160a74b4 Merge pull request #6931 from mermaid-js/renovate/npm-vite-vulnerability
chore(deps): update dependency vite to v7.0.7 [security]
2025-09-15 08:22:27 +00:00
Knut Sveidqvist
6d221fb3ca Merge pull request #6944 from mermaid-js/docs/fix-mindmap-rendering
6932:Fix mindmap rendering in docs and apply tidytree layout
2025-09-15 08:06:41 +00:00
Shubham P
8b20907141 Merge branch 'develop' into renovate/npm-vite-vulnerability 2025-09-15 13:13:40 +05:30
omkarht
4dbabba8e8 Merge branch 'develop' into 6638-sequence-diagram-additional-messages 2025-09-15 12:50:11 +05:30
darshanr0107
d318f1a13c chore: add changeset
on-behalf-of: @Mermaid-Chart <hello@mermaidchart.com>
2025-09-15 12:42:25 +05:30
darshanr0107
525a7de8ae fix:gant chart crashing in browser
on-behalf-of: @Mermaid-Chart <hello@mermaidchart.com>
2025-09-15 12:42:24 +05:30
darshanr0107
a459c436c9 docs: fix rendering and ensure tidytree layout is applied
on-behalf-of: @Mermaid-Chart <hello@mermaidchart.com>
2025-09-15 12:00:46 +05:30
Saurabh Gore
bbb93b263d Merge branch 'develop' into saurabh/fix-edge-animation-for-hand-dranw-shapes 2025-09-13 11:37:21 +05:30
Sidharth Vinod
1c2a0020bd Merge pull request #6939 from aloisklink/build/fix-netlify-mermaid-live-preview
build: change mermaid live preview to use pnpm
2025-09-12 21:18:29 +05:30
Alois Klink
141c6b3808 build: change mermaid live preview to use pnpm
Right now, the netlify build seems to be failing since we're ignoring
the `mermaid-live-editor` lockfile.

This is causing errors with broken dependencies.

Switching to `pnpm`, which the `mermaid-live-editor` uses, fixes these
issues!
2025-09-13 00:35:29 +09:00
renovate[bot]
8d4ffdf808 chore(deps): update dependency vite to v7.0.7 [security] 2025-09-12 20:14:12 +09:00
Alois Klink
32106e259c build(docs): set build.target = 'modules'
Explicility set the `build.target` to `modules`, as Vite v7 changes this
and drops support for older browsers.

We probably should do this eventually too, but maybe as part of a
Mermaid v12 release.
2025-09-12 20:14:12 +09:00
Sidharth Vinod
450754221e Merge pull request #6930 from mermaid-js/rajat-ht/chore-editor-selection-update
Chore: Simplify editor selection to single version
2025-09-11 19:57:08 +05:30
rajat-ht
7a4f5b62c9 chore: update variable name 2025-09-11 19:54:14 +05:30
omkarht
e3ef5e4208 fix: fixed central connection for bidirectional dotted arrow
on-behalf-of: @Mermaid-Chart <hello@mermaidchart.com>
2025-09-11 13:03:06 +05:30
omkarht
daeb85bac2 Merge branch 'develop' into 6638-sequence-diagram-additional-messages 2025-09-11 12:40:55 +05:30
saurabhg772244
4240340a18 Merge branch 'develop' of github.com:mermaid-js/mermaid into saurabh/fix-edge-animation-for-hand-dranw-shapes 2025-09-11 11:36:26 +05:30
autofix-ci[bot]
47c0d2d040 [autofix.ci] apply automated fixes 2025-09-10 18:00:00 +00:00
William Entriken
ac3b777bf6 Specify score range for task syntax 2025-09-10 13:54:31 -04:00
Shubham P
cf08ba0ef8 Merge branch 'develop' into renovate/patch-all-patch 2025-09-10 21:03:45 +05:30
rajat-ht
4829dfa8c5 Chore: Simplify editor selection to single version 2025-09-09 22:16:52 +05:30
autofix-ci[bot]
e7811886c3 [autofix.ci] apply automated fixes 2025-09-08 01:00:25 +00:00
renovate[bot]
32eda8565c fix(deps): update all patch dependencies 2025-09-08 00:54:41 +00:00
omkarht
ca10a259fa Merge branch 'develop' into saurabh/fix-edge-animation-for-hand-dranw-shapes 2025-09-05 16:28:39 +05:30
Saurabh Gore
0ed9c65572 Merge branch 'develop' into saurabh/fix-edge-animation-for-hand-dranw-shapes 2025-09-05 12:56:27 +05:30
saurabhg772244
56cc12690f Added option to skip screenshot for cypress tests 2025-09-05 12:47:07 +05:30
omkarht
2cdaf03ada Merge branch 'develop' into 6638-sequence-diagram-additional-messages 2025-09-05 12:12:01 +05:30
Sidharth Vinod
9c85521e16 Merge pull request #6914 from mermaid-js/changeset-release/master
Version Packages
2025-09-04 20:36:52 +05:30
github-actions[bot]
8a565bce92 Version Packages 2025-09-04 14:12:57 +00:00
Sidharth Vinod
baf510b935 Merge pull request #6912 from mermaid-js/develop
Pre Release
2025-09-04 19:39:17 +05:30
omkarht
f6fa0260e7 Merge branch 'develop' into 6638-sequence-diagram-additional-messages 2025-09-04 12:56:49 +05:30
omkarht
29aad6d23c Merge branch 'develop' into 6638-sequence-diagram-additional-messages 2025-09-04 12:12:03 +05:30
omkarht
82ef7b5fdb docs: add version placeholders for new features 2025-09-02 19:02:02 +05:30
omkarht
11cd3f1262 feat: add central connection rendering and parsing tests 2025-09-02 18:52:18 +05:30
omkarht
ac4aa94e78 Merge branch 'develop' into 6638-sequence-diagram-additional-messages 2025-09-02 15:13:07 +05:30
omkarht
c40faac80d Merge branch 'develop' into 6638-sequence-diagram-additional-messages 2025-08-29 13:26:48 +05:30
omkarht
c530baed3f Merge branch 'develop' into 6638-sequence-diagram-additional-messages 2025-08-28 13:07:57 +05:30
omkarht
045699de10 Merge branch 'develop' of https://github.com/mermaid-js/mermaid into 6638-sequence-diagram-additional-messages 2025-08-25 15:14:50 +05:30
omkarht
1988d24227 fix: fixed reverse arrows placing for autonumber
on-behalf-of: @Mermaid-Chart <hello@mermaidchart.com>
2025-08-22 16:46:49 +05:30
omkarht
39f90debe7 Merge branch 'develop' into 6638-sequence-diagram-additional-messages 2025-08-22 13:03:01 +05:30
omkarht
73e9849f99 chore: added changeset
on-behalf-of: @Mermaid-Chart <hello@mermaidchart.com>
2025-08-21 16:12:25 +05:30
omkarht
5a05540a5f Merge branch 'develop' of https://github.com/mermaid-js/mermaid into 6638-sequence-diagram-additional-messages 2025-08-21 16:09:18 +05:30
omkarht
2b58df9665 fix: refactored documentation
on-behalf-of: @Mermaid-Chart <hello@mermaidchart.com>
2025-08-19 14:53:08 +05:30
saurabhg772244
e6fb4a84da code refactor 2025-08-11 16:32:03 +05:30
saurabhg772244
32723b2de1 Added change set 2025-08-11 15:59:07 +05:30
saurabhg772244
18703782ee Fixed edge animation for hand drawn shapes 2025-08-11 15:52:49 +05:30
omkarht
0b42bdba07 Merge branch 'develop' into 6638-sequence-diagram-additional-messages 2025-08-11 15:28:48 +05:30
omkarht
74c96db3e2 docs: document new syntax for half-arrow message and central connection
on-behalf-of: @Mermaid-Chart <hello@mermaidchart.com>
2025-08-07 12:47:31 +05:30
omkarht
bd47c57eaf chore: refactored code
on-behalf-of: @Mermaid-Chart <hello@mermaidchart.com>
2025-08-06 18:56:58 +05:30
omkarht
3e5d2db514 Merge branch 'develop' into 6638-sequence-diagram-additional-messages 2025-08-06 18:56:18 +05:30
omkarht
40990bb096 Merge branch 'develop' into 6638-sequence-diagram-additional-messages 2025-07-29 18:17:34 +05:30
omkarht
7ca0665764 fix: fixed failing test case
on-behalf-of: @Mermaid-Chart <hello@mermaidchart.com>
2025-07-28 19:13:51 +05:30
omkarht
81a6a361ab Merge branch 'develop' into 6638-sequence-diagram-additional-messages 2025-07-28 16:51:38 +05:30
omkarht
62faacdeeb fix: fixed failing test cases
on-behalf-of: @Mermaid-Chart <hello@mermaidchart.com>
2025-07-28 16:01:43 +05:30
omkarht
0e40d8e8a8 fix: fixed failing test cases
on-behalf-of: @Mermaid-Chart <hello@mermaidchart.com>
2025-07-28 15:55:07 +05:30
omkarht
e8d6daf4f6 add support for central connection circle after arrow in lifeline direction
on-behalf-of: @Mermaid-Chart <hello@mermaidchart.com>
2025-07-28 15:37:33 +05:30
omkarht
cb4ed605b2 chore: added rendering test cases for arrow head type
on-behalf-of: @Mermaid-Chart <hello@mermaidchart.com>
2025-07-23 16:59:04 +05:30
omkarht
ba9db26bfa Lexing : Added Support for new arrow types through lexing
on-behalf-of: @Mermaid-Chart <hello@mermaidchart.com>
2025-07-22 19:25:27 +05:30
omkarht
252b1837f7 added arrowhead types for dotted line type
on-behalf-of: @Mermaid-Chart <hello@mermaidchart.com>
2025-07-22 19:20:06 +05:30
omkarht
6b9c15d7f0 added reverse arrow head types
on-behalf-of: @Mermaid-Chart <hello@mermaidchart.com>
2025-07-22 16:30:21 +05:30
omkarht
fda640c90c fix: adjusted arrowhead design
on-behalf-of: @Mermaid-Chart <hello@mermaidchart.com>
2025-07-21 19:03:29 +05:30
omkarht
584a789183 6638: add support for additional message types for sequence diagram
on-behalf-of: @Mermaid-Chart <hello@mermaidchart.com>
2025-07-21 13:33:52 +05:30
autofix-ci[bot]
47297f7c26 [autofix.ci] apply automated fixes 2025-02-26 17:49:51 +00:00
Yari DeWalt
967aa0629e Merge branch 'develop' into bug/5669_class-diagram-fix-namespace-themes 2025-02-26 09:45:14 -08:00
Yari DeWalt
04b20a79b9 Merge branch 'develop' into fix_lollipop_stroke 2025-02-26 09:20:16 -08:00
yari-dewalt
4ff2ae9f4e Add styles for clusters and remove hard-coded styling for namespace nodes 2024-11-06 09:00:21 -08:00
Yari DeWalt
7a729e8f16 Merge branch 'develop' into fix_lollipop_stroke 2024-11-04 10:21:00 -08:00
yari-dewalt
3c7fd95617 Remove black stroke from lollipops so it matches edge paths 2024-11-04 10:15:51 -08:00
119 changed files with 6832 additions and 13848 deletions

View File

@@ -0,0 +1,5 @@
---
'mermaid': patch
---
fix: Support edge animation in hand drawn look

View File

@@ -0,0 +1,5 @@
---
'mermaid': patch
---
fix: Resolved parsing error where direction TD was not recognized within subgraphs

View File

@@ -0,0 +1,5 @@
---
'mermaid': patch
---
fix: Correct viewBox casing and make SVGs responsive

View File

@@ -1,5 +0,0 @@
---
'mermaid': patch
---
fix: Render newlines as spaces in class diagrams

View File

@@ -1,5 +0,0 @@
---
'mermaid': patch
---
fix: Handle arrows correctly when auto number is enabled

View File

@@ -0,0 +1,5 @@
---
'mermaid': patch
---
fix: Improve participant parsing and prevent recursive loops on invalid syntax

View File

@@ -0,0 +1,5 @@
---
'mermaid': patch
---
chore: Fix mindmap rendering in docs and apply tidytree layout

View File

@@ -1,5 +0,0 @@
---
'mermaid': minor
---
Add IDs in architecture diagrams

View File

@@ -1,5 +0,0 @@
---
'mermaid': minor
---
feat: Added support for new participant types (`actor`, `boundary`, `control`, `entity`, `database`, `collections`, `queue`) in `sequenceDiagram`.

View File

@@ -1,7 +0,0 @@
---
'mermaid': minor
'@mermaid-js/layout-tidy-tree': minor
'@mermaid-js/layout-elk': minor
---
feat: Update mindmap rendering to support multiple layouts, improved edge intersections, and new shapes

View File

@@ -0,0 +1,5 @@
---
'mermaid': minor
---
feat: Add half-arrowheads (solid & stick) and central connection support

View File

@@ -0,0 +1,5 @@
---
'mermaid': patch
---
fix: Resolve gantt chart crash due to invalid array length

View File

@@ -0,0 +1,5 @@
---
'@mermaid': patch
---
fix: Mindmap breaking in ELK layout

View File

@@ -0,0 +1,5 @@
---
'mermaid': patch
---
fix(er-diagram): prevent syntax error when using 'u', numbers, and decimals in node names

View File

@@ -26,8 +26,8 @@ jobs:
strategy:
fail-fast: false
matrix:
language: ['javascript']
# CodeQL supports [ 'cpp', 'csharp', 'go', 'java', 'javascript', 'python', 'ruby' ]
language: ['javascript', 'actions']
# CodeQL supports [ 'actions', 'cpp', 'csharp', 'go', 'java', 'javascript', 'python', 'ruby' ]
# Learn more about CodeQL language support at https://aka.ms/codeql-docs/language-support
steps:
@@ -36,7 +36,7 @@ jobs:
# Initializes the CodeQL tools for scanning.
- name: Initialize CodeQL
uses: github/codeql-action/init@b56ba49b26e50535fa1e7f7db0f4f7b4bf65d80d # v3.28.10
uses: github/codeql-action/init@5378192d256ef1302a6980fffe5ca04426d43091 # v3.28.21
with:
config-file: ./.github/codeql/codeql-config.yml
languages: ${{ matrix.language }}
@@ -48,7 +48,7 @@ jobs:
# Autobuild attempts to build any compiled languages (C/C++, C#, or Java).
# If this step fails, then you should remove it and run the build manually (see below)
- name: Autobuild
uses: github/codeql-action/autobuild@b56ba49b26e50535fa1e7f7db0f4f7b4bf65d80d # v3.28.10
uses: github/codeql-action/autobuild@5378192d256ef1302a6980fffe5ca04426d43091 # v3.28.21
# Command-line programs to run using the OS shell.
# 📚 See https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#jobsjob_idstepsrun
@@ -62,4 +62,4 @@ jobs:
# make release
- name: Perform CodeQL Analysis
uses: github/codeql-action/analyze@b56ba49b26e50535fa1e7f7db0f4f7b4bf65d80d # v3.28.10
uses: github/codeql-action/analyze@5378192d256ef1302a6980fffe5ca04426d43091 # v3.28.21

View File

@@ -53,7 +53,7 @@ jobs:
args: -X POST "$APPLITOOLS_SERVER_URL/api/externals/github/push?apiKey=$APPLITOOLS_API_KEY&CommitSha=$GITHUB_SHA&BranchName=${APPLITOOLS_BRANCH}$&ParentBranchName=$APPLITOOLS_PARENT_BRANCH"
- name: Cypress run
uses: cypress-io/github-action@18a6541367f4580a515371905f499a27a44e8dbe # v6.7.12
uses: cypress-io/github-action@108b8684ae52e735ff7891524cbffbcd4be5b19f # v6.7.16
id: cypress
with:
start: pnpm run dev

View File

@@ -27,12 +27,12 @@ jobs:
with:
node-version-file: '.node-version'
- name: Install dependencies
uses: cypress-io/github-action@18a6541367f4580a515371905f499a27a44e8dbe # v6.7.12
uses: cypress-io/github-action@108b8684ae52e735ff7891524cbffbcd4be5b19f # v6.7.16
with:
runTests: false
- name: Cypress run
uses: cypress-io/github-action@18a6541367f4580a515371905f499a27a44e8dbe # v6.7.12
uses: cypress-io/github-action@108b8684ae52e735ff7891524cbffbcd4be5b19f # v6.7.16
id: cypress
with:
install: false
@@ -58,7 +58,7 @@ jobs:
echo "EOF" >> $GITHUB_OUTPUT
- name: Commit and create pull request
uses: peter-evans/create-pull-request@18e469570b1cf0dfc11d60ec121099f8ff3e617a
uses: peter-evans/create-pull-request@915d841dae6a4f191bb78faf61a257411d7be4d2
with:
add-paths: |
cypress/timings.json

View File

@@ -45,7 +45,7 @@ jobs:
node-version-file: '.node-version'
- name: Cache snapshots
id: cache-snapshot
uses: actions/cache@0c907a75c2c80ebcb7f088228285e798b750cf8f # v4.2.1
uses: actions/cache@0400d5f644dc74513175e3cd8d07132dd4860809 # v4.2.4
with:
path: ./cypress/snapshots
key: ${{ runner.os }}-snapshots-${{ env.targetHash }}
@@ -59,7 +59,7 @@ jobs:
- name: Install dependencies
if: ${{ steps.cache-snapshot.outputs.cache-hit != 'true' }}
uses: cypress-io/github-action@18a6541367f4580a515371905f499a27a44e8dbe # v6.7.12
uses: cypress-io/github-action@108b8684ae52e735ff7891524cbffbcd4be5b19f # v6.7.16
with:
# just perform install
runTests: false
@@ -95,13 +95,13 @@ jobs:
# These cached snapshots are downloaded, providing the reference snapshots.
- name: Cache snapshots
id: cache-snapshot
uses: actions/cache/restore@0c907a75c2c80ebcb7f088228285e798b750cf8f # v4.2.1
uses: actions/cache/restore@0400d5f644dc74513175e3cd8d07132dd4860809 # v4.2.4
with:
path: ./cypress/snapshots
key: ${{ runner.os }}-snapshots-${{ env.targetHash }}
- name: Install dependencies
uses: cypress-io/github-action@18a6541367f4580a515371905f499a27a44e8dbe # v6.7.12
uses: cypress-io/github-action@108b8684ae52e735ff7891524cbffbcd4be5b19f # v6.7.16
with:
runTests: false
@@ -117,7 +117,7 @@ jobs:
# Install NPM dependencies, cache them correctly
# and run all Cypress tests
- name: Cypress run
uses: cypress-io/github-action@18a6541367f4580a515371905f499a27a44e8dbe # v6.7.12
uses: cypress-io/github-action@108b8684ae52e735ff7891524cbffbcd4be5b19f # v6.7.16
id: cypress
with:
install: false

View File

@@ -32,7 +32,7 @@ jobs:
- uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
- name: Restore lychee cache
uses: actions/cache@0c907a75c2c80ebcb7f088228285e798b750cf8f # v4.2.1
uses: actions/cache@0400d5f644dc74513175e3cd8d07132dd4860809 # v4.2.4
with:
path: .lycheecache
key: cache-lychee-${{ github.sha }}

View File

@@ -36,7 +36,7 @@ jobs:
- name: Create Release Pull Request or Publish to npm
id: changesets
uses: changesets/action@c8bada60c408975afd1a20b3db81d6eee6789308 # v1.4.9
uses: changesets/action@06245a4e0a36c064a573d4150030f5ec548e4fcc # v1.4.10
with:
version: pnpm changeset:version
publish: pnpm changeset:publish

View File

@@ -20,18 +20,18 @@ jobs:
with:
persist-credentials: false
- name: Run analysis
uses: ossf/scorecard-action@f49aabe0b5af0936a0987cfb85d86b75731b0186 # v2.4.1
uses: ossf/scorecard-action@4eaacf0543bb3f2c246792bd56e8cdeffafb205a # v2.4.3
with:
results_file: results.sarif
results_format: sarif
publish_results: true
- name: Upload artifact
uses: actions/upload-artifact@4cec3d8aa04e39d1a68397de0c4cd6fb9dce8ec1 # v4.6.1
uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4.6.2
with:
name: SARIF file
path: results.sarif
retention-days: 5
- name: Upload to code-scanning
uses: github/codeql-action/upload-sarif@b56ba49b26e50535fa1e7f7db0f4f7b4bf65d80d # v3.28.10
uses: github/codeql-action/upload-sarif@5378192d256ef1302a6980fffe5ca04426d43091 # v3.28.21
with:
sarif_file: results.sarif

View File

@@ -19,7 +19,7 @@ jobs:
message: 'chore: update browsers list'
push: false
- name: Create Pull Request
uses: peter-evans/create-pull-request@67ccf781d68cd99b580ae25a5c18a1cc84ffff1f # v7.0.6
uses: peter-evans/create-pull-request@271a8d0340265f705b14b6d32b9829c1cb33d45e # v7.0.8
with:
branch: update-browserslist
title: Update Browserslist

Binary file not shown.

Binary file not shown.

View File

@@ -6,6 +6,7 @@ interface CypressConfig {
listUrl?: boolean;
listId?: string;
name?: string;
screenshot?: boolean;
}
type CypressMermaidConfig = MermaidConfig & CypressConfig;
@@ -90,7 +91,7 @@ export const renderGraph = (
export const openURLAndVerifyRendering = (
url: string,
options: CypressMermaidConfig,
{ screenshot = true, ...options }: CypressMermaidConfig,
validation?: any
): void => {
const name: string = (options.name ?? cy.state('runnable').fullTitle()).replace(/\s+/g, '-');
@@ -98,12 +99,15 @@ export const openURLAndVerifyRendering = (
cy.visit(url);
cy.window().should('have.property', 'rendered', true);
cy.get('svg').should('be.visible');
cy.get('svg').should('not.have.attr', 'viewbox');
if (validation) {
cy.get('svg').should(validation);
}
verifyScreenshot(name);
if (screenshot) {
verifyScreenshot(name);
}
};
export const verifyScreenshot = (name: string): void => {

View File

@@ -369,4 +369,92 @@ ORDER ||--|{ LINE-ITEM : contains
);
});
});
describe('Special characters and numbers syntax', () => {
it('should render ER diagram with numeric entity names', () => {
imgSnapshotTest(
`
erDiagram
1 ||--|| ORDER : places
ORDER ||--|{ 2 : contains
2 ||--o{ 3.5 : references
`,
{ logLevel: 1 }
);
});
it('should render ER diagram with "u" character in entity names and cardinality', () => {
imgSnapshotTest(
`
erDiagram
CUSTOMER ||--|| u : has
u ||--|| ORDER : places
PROJECT u--o{ TEAM_MEMBER : "parent"
`,
{ logLevel: 1 }
);
});
it('should render ER diagram with decimal numbers in relationships', () => {
imgSnapshotTest(
`
erDiagram
2.5 ||--|| 1.5 : has
CUSTOMER ||--o{ 3.14 : references
1.0 ||--|{ ORDER : contains
`,
{ logLevel: 1 }
);
});
it('should render ER diagram with numeric entity names and attributes', () => {
imgSnapshotTest(
`
erDiagram
1 {
string name
int value
}
1 ||--|| ORDER : places
ORDER {
float price
string description
}
`,
{ logLevel: 1 }
);
});
it('should render complex ER diagram with mixed special entity names', () => {
imgSnapshotTest(
`
erDiagram
CUSTOMER ||--o{ 1 : places
1 ||--|{ u : contains
1.5
u ||--|| 2.5 : processes
2.5 {
string id
float value
}
u {
varchar(50) name
int count
}
`,
{ logLevel: 1 }
);
});
it('should render ER diagram with numeric entity names and attributes', () => {
imgSnapshotTest(
`erDiagram
PRODUCT ||--o{ ORDER-ITEM : has
1.5
u
1
`,
{ logLevel: 1 }
);
});
});
});

View File

@@ -1029,4 +1029,19 @@ graph TD
}
);
});
it('FDH49: should add edge animation', () => {
renderGraph(
`
flowchart TD
A(["Start"]) L_A_B_0@--> B{"Decision"}
B --> C["Option A"] & D["Option B"]
style C stroke-width:4px,stroke-dasharray: 5
L_A_B_0@{ animation: slow }
L_B_D_0@{ animation: fast }`,
{ look: 'handDrawn', screenshot: false }
);
cy.get('path#L_A_B_0').should('have.class', 'edge-animation-slow');
cy.get('path#L_B_D_0').should('have.class', 'edge-animation-fast');
});
});

View File

@@ -774,6 +774,21 @@ describe('Graph', () => {
expect(svg).to.not.have.attr('style');
});
});
it('40: should add edge animation', () => {
renderGraph(
`
flowchart TD
A(["Start"]) L_A_B_0@--> B{"Decision"}
B --> C["Option A"] & D["Option B"]
style C stroke-width:4px,stroke-dasharray: 5
L_A_B_0@{ animation: slow }
L_B_D_0@{ animation: fast }`,
{ screenshot: false }
);
// Verify animation classes are applied to both edges
cy.get('path#L_A_B_0').should('have.class', 'edge-animation-slow');
cy.get('path#L_B_D_0').should('have.class', 'edge-animation-fast');
});
it('58: handle styling with style expressions', () => {
imgSnapshotTest(
`
@@ -973,4 +988,19 @@ graph TD
}
);
});
it('70: should render a subgraph with direction TD', () => {
imgSnapshotTest(
`
flowchart LR
subgraph A
direction TD
a --> b
end
`,
{
fontFamily: 'courier',
}
);
});
});

View File

@@ -803,4 +803,34 @@ describe('Gantt diagram', () => {
{}
);
});
it('should handle numeric timestamps with dateFormat x', () => {
imgSnapshotTest(
`
gantt
title Process time profile (ms)
dateFormat x
axisFormat %L
tickInterval 250millisecond
section Pipeline
Parse JSON p1: 000, 120
`,
{}
);
});
it('should handle numeric timestamps with dateFormat X', () => {
imgSnapshotTest(
`
gantt
title Process time profile (ms)
dateFormat X
axisFormat %L
tickInterval 250millisecond
section Pipeline
Parse JSON p1: 000, 120
`,
{}
);
});
});

View File

@@ -655,5 +655,126 @@ describe('Sequence Diagram Special Cases', () => {
expect(svg).to.not.have.attr('style');
});
});
describe('Central Connection Rendering Tests', () => {
it('should render central connection circles on actor vertical lines', () => {
imgSnapshotTest(
`sequenceDiagram
participant Alice
participant Bob
participant Charlie
Alice ()->>() Bob: Central connection
Bob ()-->> Charlie: Reverse central connection
Charlie ()<<-->>() Alice: Dual central connection`,
{ look: 'classic', sequence: { diagramMarginX: 50, diagramMarginY: 10 } }
);
});
it('should render central connections with different arrow types', () => {
imgSnapshotTest(
`sequenceDiagram
participant Alice
participant Bob
Alice ()->>() Bob: Solid open arrow
Alice ()-->>() Bob: Dotted open arrow
Alice ()-x() Bob: Solid cross
Alice ()--x() Bob: Dotted cross
Alice ()->() Bob: Solid arrow`,
{ look: 'classic', sequence: { diagramMarginX: 50, diagramMarginY: 10 } }
);
});
it('should render central connections with bidirectional arrows', () => {
imgSnapshotTest(
`sequenceDiagram
participant Alice
participant Bob
Alice ()<<->>() Bob: Bidirectional solid
Alice ()<<-->>() Bob: Bidirectional dotted`,
{ look: 'classic', sequence: { diagramMarginX: 50, diagramMarginY: 10 } }
);
});
it('should render central connections with activations', () => {
imgSnapshotTest(
`sequenceDiagram
participant Alice
participant Bob
participant Charlie
Alice ()->>() Bob: Activate Bob
activate Bob
Bob ()-->> Charlie: Message to Charlie
Bob ()->>() Alice: Response to Alice
deactivate Bob`,
{ look: 'classic', sequence: { diagramMarginX: 50, diagramMarginY: 10 } }
);
});
it('should render central connections mixed with normal messages', () => {
imgSnapshotTest(
`sequenceDiagram
participant Alice
participant Bob
participant Charlie
Alice ->> Bob: Normal message
Bob ()->>() Charlie: Central connection
Charlie -->> Alice: Normal dotted message
Alice ()<<-->>() Bob: Dual central connection
Bob -x Charlie: Normal cross message`,
{ look: 'classic', sequence: { diagramMarginX: 50, diagramMarginY: 10 } }
);
});
it('should render central connections with notes', () => {
imgSnapshotTest(
`sequenceDiagram
participant Alice
participant Bob
participant Charlie
Alice ()->>() Bob: Central connection
Note over Alice,Bob: Central connection note
Bob ()-->> Charlie: Reverse central connection
Note right of Charlie: Response note
Charlie ()<<-->>() Alice: Dual central connection`,
{ look: 'classic', sequence: { diagramMarginX: 50, diagramMarginY: 10 } }
);
});
it('should render central connections with loops and alternatives', () => {
imgSnapshotTest(
`sequenceDiagram
participant Alice
participant Bob
participant Charlie
loop Every minute
Alice ()->>() Bob: Central heartbeat
Bob ()-->> Charlie: Forward heartbeat
end
alt Success
Charlie ()<<-->>() Alice: Success response
else Failure
Charlie ()-x() Alice: Failure response
end`,
{ look: 'classic', sequence: { diagramMarginX: 50, diagramMarginY: 10 } }
);
});
it('should render central connections with different participant types', () => {
imgSnapshotTest(
`sequenceDiagram
participant Alice
actor Bob
participant Charlie@{"type":"boundary"}
participant David@{"type":"control"}
participant Eve@{"type":"entity"}
Alice ()->>() Bob: To actor
Bob ()-->> Charlie: To boundary
Charlie ()->>() David: To control
David ()<<-->>() Eve: To entity
Eve ()-x() Alice: Back to participant`,
{ look: 'classic', sequence: { diagramMarginX: 50, diagramMarginY: 10 } }
);
});
});
});
});

View File

@@ -1053,4 +1053,167 @@ describe('Sequence diagram', () => {
]);
});
});
describe('render new arrow type', () => {
it('should render Solid half arrow top', () => {
imgSnapshotTest(
`
sequenceDiagram
Alice -|\\ John: Hello John, how are you?
Alice-|\\ John: Hi Alice, I can hear you!
Alice -|\\ John: Test
`
);
});
it('should render Solid half arrow bottom', () => {
imgSnapshotTest(
`
sequenceDiagram
Alice-|/John: Hello John, how are you?
Alice-|/John: Hi Alice, I can hear you!
Alice-|/John: Test
`
);
});
it('should render Stick half arrow top ', () => {
imgSnapshotTest(
`
sequenceDiagram
Alice-\\\\John: Hello John, how are you?
Alice-\\\\John: Hi Alice, I can hear you!
Alice-\\\\John: Test
`
);
});
it('should render Stick half arrow bottom ', () => {
imgSnapshotTest(
`
sequenceDiagram
Alice-//John: Hello John, how are you?
Alice-//John: Hi Alice, I can hear you!
Alice-//John: Test
`
);
});
it('should render Solid half arrow top reverse ', () => {
imgSnapshotTest(
`
sequenceDiagram
Alice/|-John: Hello Alice, how are you?
Alice/|-John: Hi Alice, I can hear you!
Alice/|-John: Test
`
);
});
it('should render Solid half arrow bottom reverse ', () => {
imgSnapshotTest(
`sequenceDiagram
Alice \\|- John: Hello Alice, how are you?
Alice \\|- John: Hi Alice, I can hear you!
Alice \\|- John: Test`
);
});
it('should render Stick half arrow top reverse ', () => {
imgSnapshotTest(
`
sequenceDiagram
Alice //-John: Hello Alice, how are you?
Alice //-John: Hi Alice, I can hear you!
Alice //-John: Test`
);
});
it('should render Stick half arrow bottom reverse ', () => {
imgSnapshotTest(
`
sequenceDiagram
Alice \\\\-John: Hello Alice, how are you?
Alice \\\\-John: Hi Alice, I can hear you!
Alice \\\\-John: Test`
);
});
it('should render Solid half arrow top dotted', () => {
imgSnapshotTest(
`
sequenceDiagram
Alice --|\\John: Hello John, how are you?
Alice --|\\John: Hi Alice, I can hear you!
Alice --|\\John: Test`
);
});
it('should render Solid half arrow bottom dotted', () => {
imgSnapshotTest(
`
sequenceDiagram
Alice --|/John: Hello John, how are you?
Alice --|/John: Hi Alice, I can hear you!
Alice --|/John: Test`
);
});
it('should render Stick half arrow top dotted', () => {
imgSnapshotTest(
`
sequenceDiagram
Alice--\\\\John: Hello John, how are you?
Alice--\\\\John: Hi Alice, I can hear you!
Alice--\\\\John: Test`
);
});
it('should render Stick half arrow bottom dotted', () => {
imgSnapshotTest(
`
sequenceDiagram
Alice--//John: Hello John, how are you?
Alice--//John: Hi Alice, I can hear you!
Alice--//John: Test`
);
});
it('should render Solid half arrow top reverse dotted', () => {
imgSnapshotTest(
`
sequenceDiagram
Alice/|--John: Hello Alice, how are you?
Alice/|--John: Hi Alice, I can hear you!
Alice/|--John: Test`
);
});
it('should render Solid half arrow bottom reverse dotted', () => {
imgSnapshotTest(
`
sequenceDiagram
Alice\\|--John: Hello Alice, how are you?
Alice\\|--John: Hi Alice, I can hear you!
Alice\\|--John: Test`
);
});
it('should render Stick half arrow top reverse dotted ', () => {
imgSnapshotTest(
`
sequenceDiagram
Alice//--John: Hello Alice, how are you?
Alice//--John: Hi Alice, I can hear you!
Alice//--John: Test`
);
});
it('should render Stick half arrow bottom reverse dotted ', () => {
imgSnapshotTest(
`
sequenceDiagram
Alice\\\\--John: Hello Alice, how are you?
Alice\\\\--John: Hi Alice, I can hear you!
Alice\\\\--John: Test`
);
});
});
});

View File

@@ -110,6 +110,48 @@
config:
layout: elk
---
mindmap
root((mindmap))
Origins
Long history
::icon(fa fa-book)
Popularisation
British popular psychology author Tony Buzan
Research
On effectiveness&lt;br/>and features
On Automatic creation
Uses
Creative techniques
Strategic planning
Argument mapping
Tools
id)I am a cloud(
id))I am a bang((
Tools
</pre>
<pre id="diagram4" class="mermaid">
---
config:
layout: elk
---
flowchart
aid0
</pre
>
<pre id="diagram4" class="mermaid">
---
config:
layout: elk
---
mindmap
aid0
</pre>
<pre id="diagram4" class="mermaid">
---
config:
layout: ogdc
---
flowchart-elk TB
c1-->a2
subgraph one

View File

@@ -603,6 +603,10 @@
</div>
<div class="test">
<pre class="mermaid">
---
config:
theme: dark
---
classDiagram
test ()--() test2
</pre>

View File

@@ -2,7 +2,7 @@
"compilerOptions": {
"target": "es2020",
"lib": ["es2020", "dom"],
"types": ["cypress", "node", "@argos-ci/cypress/dist/support.d.ts"],
"types": ["cypress", "node", "@argos-ci/cypress/support"],
"allowImportingTsExtensions": true,
"noEmit": true
},

View File

@@ -11,7 +11,7 @@
rel="stylesheet"
/>
<link
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"
rel="stylesheet"
/>
<link

View File

@@ -29,7 +29,8 @@ In GitHub, you first [**fork a mermaid repository**](https://github.com/mermaid-
Then you **clone** a copy to your local development machine (e.g. where you code) to make a copy with all the files to work with.
> **💡 Tip** > [Here is a GitHub document that gives an overview of the process](https://docs.github.com/en/get-started/quickstart/fork-a-repo).
> **💡 Tip**
> [Here is a GitHub document that gives an overview of the process](https://docs.github.com/en/get-started/quickstart/fork-a-repo).
```bash
git clone git@github.com/your-fork/mermaid

View File

@@ -33,7 +33,8 @@ mindmap
## Join the Development
> **💡 Tip** > **Check out our** [**detailed contribution guide**](./contributing.md).
> **💡 Tip**
> **Check out our** [**detailed contribution guide**](./contributing.md).
Where to start:
@@ -47,7 +48,8 @@ Where to start:
## A Question Or a Suggestion?
> **💡 Tip** > **Have a look at** [**how to open an issue**](./questions-and-suggestions.md).
> **💡 Tip**
> **Have a look at** [**how to open an issue**](./questions-and-suggestions.md).
If you have faced a vulnerability [report it to us](./security.md).

View File

@@ -22,7 +22,6 @@ While directives allow you to change most of the default configuration settings,
Mermaid basically supports two types of configuration options to be overridden by directives.
1. _General/Top Level configurations_ : These are the configurations that are available and applied to all the diagram. **Some of the most important top-level** configurations are:
- theme
- fontFamily
- logLevel

View File

@@ -29,7 +29,6 @@ Try the Ultimate AI, Mermaid, and Visual Diagramming Suite by creating an accoun
- **Plugins** - A plugin system for extending the functionality of Mermaid.
Official Mermaid Chart plugins:
- [Mermaid Chart GPT](https://chatgpt.com/g/g-684cc36f30208191b21383b88650a45d-mermaid-chart-diagrams-and-charts)
- [Confluence](https://marketplace.atlassian.com/apps/1234056/mermaid-chart-for-confluence?hosting=cloud&tab=overview)
- [Jira](https://marketplace.atlassian.com/apps/1234810/mermaid-chart-for-jira?tab=overview&hosting=cloud)

View File

@@ -35,13 +35,11 @@ The Mermaid Chart team is excited to introduce a new Visual Editor for Flowchart
Learn more:
- Visual Editor For Flowcharts
- [Blog post](https://www.mermaidchart.com/blog/posts/mermaid-chart-releases-new-visual-editor-for-flowcharts)
- [Demo video](https://www.youtube.com/watch?v=5aja0gijoO0)
- Visual Editor For Sequence diagrams
- [Blog post](https://www.mermaidchart.com/blog/posts/mermaid-chart-unveils-visual-editor-for-sequence-diagrams)
- [Demo video](https://youtu.be/imc2u5_N6Dc)

View File

@@ -6,6 +6,18 @@
# Blog
## [The Essential Guide to Mermaid Chart Plugin for VS Code \[08/2025\]](https://docs.mermaidchart.com/blog/posts/the-essential-guide-to-mermaid-chart-plugin-for-vs-code-08-2025)
9/9/2025 • 5 mins
Creating diagrams in VS Code has never been easier—the Mermaid VS Code plugin transforms text-based syntax into clear, professional visuals right inside your editor. With live previews, smart editing, and AI-powered diagram generation, it removes the friction from visualization so you can focus on coding.
## [How to Create Perfect Flowcharts Using AI in 2025 Step-by-Step Guide](https://docs.mermaidchart.com/blog/posts/how-to-create-perfect-flowcharts-using-ai-in-2025-step-by-step-guide)
7/22/2025 • 8 mins
In 2025, AI tools make creating flowcharts faster and easier than ever. With Mermaids AI flowchart generator, you can turn plain text into clear, accurate diagrams in seconds. This guide walks through how it works and how to get the most out of it for technical and business workflows alike.
## [Mermaid introduces the Visual Editor for Entity Relationship diagrams](https://docs.mermaidchart.com/blog/posts/mermaid-introduces-the-visual-editor-for-entity-relationship-diagrams)
7/15/2025 • 7 mins

View File

@@ -194,7 +194,7 @@ architecture-beta
## Icons
By default, architecture diagram supports the following icons: `cloud`, `database`, `disk`, `internet`, `server`.
Users can use any of the 200,000+ icons available in iconify.design, or [add custom icons](../config/icons.md).
Users can use any of the 200,000+ icons available in iconify.design, or add other custom icons, by [registering an icon pack](../config/icons.md).
After the icons are installed, they can be used in the architecture diagram by using the format "name:icon-name", where name is the value used when registering the icon pack.

View File

@@ -139,7 +139,6 @@ The following unfinished features are not supported in the short term.
- [ ] Legend
- [x] System Context
- [x] Person(alias, label, ?descr, ?sprite, ?tags, $link)
- [x] Person_Ext
- [x] System(alias, label, ?descr, ?sprite, ?tags, $link)
@@ -153,7 +152,6 @@ The following unfinished features are not supported in the short term.
- [x] System_Boundary
- [x] Container diagram
- [x] Container(alias, label, ?techn, ?descr, ?sprite, ?tags, $link)
- [x] ContainerDb
- [x] ContainerQueue
@@ -163,7 +161,6 @@ The following unfinished features are not supported in the short term.
- [x] Container_Boundary(alias, label, ?tags, $link)
- [x] Component diagram
- [x] Component(alias, label, ?techn, ?descr, ?sprite, ?tags, $link)
- [x] ComponentDb
- [x] ComponentQueue
@@ -172,18 +169,15 @@ The following unfinished features are not supported in the short term.
- [x] ComponentQueue_Ext
- [x] Dynamic diagram
- [x] RelIndex(index, from, to, label, ?tags, $link)
- [x] Deployment diagram
- [x] Deployment_Node(alias, label, ?type, ?descr, ?sprite, ?tags, $link)
- [x] Node(alias, label, ?type, ?descr, ?sprite, ?tags, $link): short name of Deployment_Node()
- [x] Node_L(alias, label, ?type, ?descr, ?sprite, ?tags, $link): left aligned Node()
- [x] Node_R(alias, label, ?type, ?descr, ?sprite, ?tags, $link): right aligned Node()
- [x] Relationship Types
- [x] Rel(from, to, label, ?techn, ?descr, ?sprite, ?tags, $link)
- [x] BiRel (bidirectional relationship)
- [x] Rel_U, Rel_Up

View File

@@ -21,7 +21,7 @@ title: Animal example
classDiagram
note "From Duck till Zebra"
Animal <|-- Duck
note for Duck "can fly\ncan swim\ncan dive\ncan help in debugging"
note for Duck "can fly<br>can swim<br>can dive<br>can help in debugging"
Animal <|-- Fish
Animal <|-- Zebra
Animal : +int age
@@ -50,7 +50,7 @@ title: Animal example
classDiagram
note "From Duck till Zebra"
Animal <|-- Duck
note for Duck "can fly\ncan swim\ncan dive\ncan help in debugging"
note for Duck "can fly<br>can swim<br>can dive<br>can help in debugging"
Animal <|-- Fish
Animal <|-- Zebra
Animal : +int age

View File

@@ -360,7 +360,8 @@ gantt
weekday monday
```
> **Warning** > `millisecond` and `second` support was added in v10.3.0
> **Warning**
> `millisecond` and `second` support was added in v10.3.0
## Output in compact mode

View File

@@ -329,7 +329,11 @@ Messages can be of two displayed either solid or with a dotted line.
[Actor][Arrow][Actor]:Message text
```
There are ten types of arrows currently supported:
Lines can be solid or dotted, and can end with various types of arrowheads, crosses, or open arrows.
#### Supported Arrow Types
**Standard Arrow Types**
| Type | Description |
| -------- | ---------------------------------------------------- |
@@ -344,6 +348,58 @@ There are ten types of arrows currently supported:
| `-)` | Solid line with an open arrow at the end (async) |
| `--)` | Dotted line with a open arrow at the end (async) |
**Half-Arrows (v\<MERMAID_RELEASE_VERSION>+)**
The following half-arrow types are supported for more expressive sequence diagrams. Both solid and dotted variants are available by increasing the number of dashes (`-` → `--`).
---
| Type | Description |
| ------- | ---------------------------------------------------- |
| `-\|\` | Solid line with top half arrowhead |
| `--\|\` | Dotted line with top half arrowhead |
| `-\|/` | Solid line with bottom half arrowhead |
| `--\|/` | Dotted line with bottom half arrowhead |
| `/\|-` | Solid line with reverse top half arrowhead |
| `/\|--` | Dotted line with reverse top half arrowhead |
| `\\-` | Solid line with reverse bottom half arrowhead |
| `\\--` | Dotted line with reverse bottom half arrowhead |
| `-\\` | Solid line with top stick half arrowhead |
| `--\\` | Dotted line with top stick half arrowhead |
| `-//` | Solid line with bottom stick half arrowhead |
| `--//` | Dotted line with bottom stick half arrowhead |
| `//-` | Solid line with reverse top stick half arrowhead |
| `//--` | Dotted line with reverse top stick half arrowhead |
| `\\-` | Solid line with reverse bottom stick half arrowhead |
| `\\--` | Dotted line with reverse bottom stick half arrowhead |
## Central Connections (v\<MERMAID_RELEASE_VERSION>+)
Mermaid sequence diagrams support **central lifeline connections** using a `()`.
This is useful to represent messages or signals that connect to a central point, rather than from one actor directly to another.
To indicate a central connection, append `()` to the arrow syntax.
#### Basic Syntax
```mermaid-example
sequenceDiagram
participant Alice
participant John
Alice->>()John: Hello John
Alice()->>John: How are you?
John()->>()Alice: Great!
```
```mermaid
sequenceDiagram
participant Alice
participant John
Alice->>()John: Hello John
Alice()->>John: How are you?
John()->>()Alice: Great!
```
## Activations
It is possible to activate and deactivate an actor. (de)activation can be dedicated declarations:

View File

@@ -38,3 +38,5 @@ Each user journey is split into sections, these describe the part of the task
the user is trying to complete.
Tasks syntax is `Task name: <score>: <comma separated list of actors>`
Score is a number between 1 and 5, inclusive.

View File

@@ -63,36 +63,36 @@
]
},
"devDependencies": {
"@applitools/eyes-cypress": "^3.44.9",
"@argos-ci/cypress": "^5.0.2",
"@applitools/eyes-cypress": "^3.55.4",
"@argos-ci/cypress": "^6.1.3",
"@changesets/changelog-github": "^0.5.1",
"@changesets/cli": "^2.27.12",
"@changesets/cli": "^2.29.7",
"@cspell/eslint-plugin": "^8.19.4",
"@cypress/code-coverage": "^3.12.49",
"@cypress/code-coverage": "^3.14.7",
"@eslint/js": "^9.26.0",
"@rollup/plugin-typescript": "^12.1.2",
"@types/cors": "^2.8.17",
"@types/express": "^5.0.0",
"@rollup/plugin-typescript": "^12.1.4",
"@types/cors": "^2.8.19",
"@types/express": "^5.0.3",
"@types/js-yaml": "^4.0.9",
"@types/jsdom": "^21.1.7",
"@types/lodash": "^4.17.15",
"@types/lodash": "^4.17.20",
"@types/mdast": "^4.0.4",
"@types/node": "^22.13.5",
"@types/node": "^22.18.12",
"@types/rollup-plugin-visualizer": "^5.0.3",
"@vitest/coverage-v8": "^3.0.6",
"@vitest/spy": "^3.0.6",
"@vitest/ui": "^3.0.6",
"@vitest/coverage-v8": "^3.2.4",
"@vitest/spy": "^3.2.4",
"@vitest/ui": "^3.2.4",
"ajv": "^8.17.1",
"chokidar": "3.6.0",
"concurrently": "^9.1.2",
"concurrently": "^9.2.1",
"cors": "^2.8.5",
"cpy-cli": "^5.0.0",
"cross-env": "^7.0.3",
"cspell": "^9.1.3",
"cypress": "^14.5.1",
"cspell": "^9.2.2",
"cypress": "^14.5.4",
"cypress-image-snapshot": "^4.0.1",
"cypress-split": "^1.24.14",
"esbuild": "^0.25.0",
"cypress-split": "^1.24.25",
"esbuild": "^0.25.11",
"eslint": "^9.26.0",
"eslint-config-prettier": "^10.1.8",
"eslint-plugin-cypress": "^4.3.0",
@@ -106,30 +106,30 @@
"eslint-plugin-tsdoc": "^0.4.0",
"eslint-plugin-unicorn": "^59.0.1",
"express": "^5.1.0",
"globals": "^16.0.0",
"globby": "^14.0.2",
"globals": "^16.4.0",
"globby": "^14.1.0",
"husky": "^9.1.7",
"jest": "^30.0.4",
"jest": "^30.1.3",
"jison": "^0.4.18",
"js-yaml": "^4.1.0",
"jsdom": "^26.1.0",
"langium-cli": "3.3.0",
"lint-staged": "^16.1.2",
"lint-staged": "^16.1.6",
"markdown-table": "^3.0.4",
"nyc": "^17.1.0",
"path-browserify": "^1.0.1",
"prettier": "^3.5.2",
"prettier-plugin-jsdoc": "^1.3.2",
"prettier": "^3.6.2",
"prettier-plugin-jsdoc": "^1.3.3",
"rimraf": "^6.0.1",
"rollup-plugin-visualizer": "^6.0.3",
"start-server-and-test": "^2.0.10",
"rollup-plugin-visualizer": "^6.0.5",
"start-server-and-test": "^2.1.2",
"tslib": "^2.8.1",
"tsx": "^4.7.3",
"tsx": "^4.20.6",
"typescript": "~5.7.3",
"typescript-eslint": "^8.38.0",
"vite": "^7.0.3",
"vite": "^7.0.7",
"vite-plugin-istanbul": "^7.0.0",
"vitest": "^3.0.6"
"vitest": "^3.2.4"
},
"nyc": {
"report-dir": "coverage/cypress"

View File

@@ -3,6 +3,7 @@
"version": "1.0.0",
"description": "Mermaid examples package",
"author": "Sidharth Vinod",
"license": "MIT",
"type": "module",
"module": "./dist/mermaid-examples.core.mjs",
"types": "./dist/mermaid.d.ts",

View File

@@ -37,12 +37,12 @@
]
},
"dependencies": {
"@braintree/sanitize-url": "^7.0.4",
"@braintree/sanitize-url": "^7.1.1",
"d3": "^7.9.0",
"khroma": "^2.1.0"
},
"devDependencies": {
"concurrently": "^9.1.2",
"concurrently": "^9.2.1",
"mermaid": "workspace:*",
"rimraf": "^6.0.1"
},

View File

@@ -1,5 +1,16 @@
# @mermaid-js/layout-elk
## 0.2.0
### Minor Changes
- [#6802](https://github.com/mermaid-js/mermaid/pull/6802) [`c8e5027`](https://github.com/mermaid-js/mermaid/commit/c8e50276e877c4de7593a09ec458c99353e65af8) Thanks [@darshanr0107](https://github.com/darshanr0107)! - feat: Update mindmap rendering to support multiple layouts, improved edge intersections, and new shapes
### Patch Changes
- Updated dependencies [[`33bc4a0`](https://github.com/mermaid-js/mermaid/commit/33bc4a0b4e2ca6d937bb0a8c4e2081b1362b2800), [`e0b45c2`](https://github.com/mermaid-js/mermaid/commit/e0b45c2d2b41c2a9038bf87646fa3ccd7560eb20), [`012530e`](https://github.com/mermaid-js/mermaid/commit/012530e98e9b8b80962ab270b6bb3b6d9f6ada05), [`c8e5027`](https://github.com/mermaid-js/mermaid/commit/c8e50276e877c4de7593a09ec458c99353e65af8)]:
- mermaid@11.11.0
## 0.1.9
### Patch Changes

View File

@@ -1,6 +1,6 @@
{
"name": "@mermaid-js/layout-elk",
"version": "0.1.9",
"version": "0.2.0",
"description": "ELK layout engine for mermaid",
"module": "dist/mermaid-layout-elk.core.mjs",
"types": "dist/layouts.d.ts",

View File

@@ -67,7 +67,22 @@ export const render = async (
// Add the element to the DOM
if (!node.isGroup) {
const child = node as NodeWithVertex;
// const child = node as NodeWithVertex;
const child: NodeWithVertex = {
id: node.id,
width: node.width,
height: node.height,
// Store the original node data for later use
label: node.label,
isGroup: node.isGroup,
shape: node.shape,
padding: node.padding,
cssClasses: node.cssClasses,
cssStyles: node.cssStyles,
look: node.look,
// Include parentId for subgraph processing
parentId: node.parentId,
};
graph.children.push(child);
nodeDb[node.id] = node;
@@ -150,7 +165,7 @@ export const render = async (
domId: { node: () => any; attr: (arg0: string, arg1: string) => void };
}) {
if (node) {
nodeDb[node.id] = node;
nodeDb[node.id] ??= {};
nodeDb[node.id].offset = {
posX: node.x + relX,
posY: node.y + relY,
@@ -860,11 +875,13 @@ export const render = async (
log.info('APA01 layout result:', JSON.stringify(g, null, 2));
} catch (error) {
log.error('APA01 ELK layout error:', error);
log.error('APA01 elkGraph that caused error:', JSON.stringify(elkGraph, null, 2));
throw error;
}
// debugger;
await drawNodes(0, 0, g.children, svg, subGraphsEl, 0);
g.edges?.map(
(edge: {
sources: (string | number)[];

View File

@@ -0,0 +1,12 @@
# @mermaid-js/layout-tidy-tree
## 0.2.0
### Minor Changes
- [#6802](https://github.com/mermaid-js/mermaid/pull/6802) [`c8e5027`](https://github.com/mermaid-js/mermaid/commit/c8e50276e877c4de7593a09ec458c99353e65af8) Thanks [@darshanr0107](https://github.com/darshanr0107)! - feat: Update mindmap rendering to support multiple layouts, improved edge intersections, and new shapes
### Patch Changes
- Updated dependencies [[`33bc4a0`](https://github.com/mermaid-js/mermaid/commit/33bc4a0b4e2ca6d937bb0a8c4e2081b1362b2800), [`e0b45c2`](https://github.com/mermaid-js/mermaid/commit/e0b45c2d2b41c2a9038bf87646fa3ccd7560eb20), [`012530e`](https://github.com/mermaid-js/mermaid/commit/012530e98e9b8b80962ab270b6bb3b6d9f6ada05), [`c8e5027`](https://github.com/mermaid-js/mermaid/commit/c8e50276e877c4de7593a09ec458c99353e65af8)]:
- mermaid@11.11.0

View File

@@ -1,6 +1,6 @@
{
"name": "@mermaid-js/layout-tidy-tree",
"version": "0.1.0",
"version": "0.2.0",
"description": "Tidy-tree layout engine for mermaid",
"module": "dist/mermaid-layout-tidy-tree.core.mjs",
"types": "dist/layouts.d.ts",

View File

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

View File

@@ -1,5 +1,19 @@
# mermaid
## 11.11.0
### Minor Changes
- [#6704](https://github.com/mermaid-js/mermaid/pull/6704) [`012530e`](https://github.com/mermaid-js/mermaid/commit/012530e98e9b8b80962ab270b6bb3b6d9f6ada05) Thanks [@omkarht](https://github.com/omkarht)! - feat: Added support for new participant types (`actor`, `boundary`, `control`, `entity`, `database`, `collections`, `queue`) in `sequenceDiagram`.
- [#6802](https://github.com/mermaid-js/mermaid/pull/6802) [`c8e5027`](https://github.com/mermaid-js/mermaid/commit/c8e50276e877c4de7593a09ec458c99353e65af8) Thanks [@darshanr0107](https://github.com/darshanr0107)! - feat: Update mindmap rendering to support multiple layouts, improved edge intersections, and new shapes
### Patch Changes
- [#6905](https://github.com/mermaid-js/mermaid/pull/6905) [`33bc4a0`](https://github.com/mermaid-js/mermaid/commit/33bc4a0b4e2ca6d937bb0a8c4e2081b1362b2800) Thanks [@darshanr0107](https://github.com/darshanr0107)! - fix: Render newlines as spaces in class diagrams
- [#6886](https://github.com/mermaid-js/mermaid/pull/6886) [`e0b45c2`](https://github.com/mermaid-js/mermaid/commit/e0b45c2d2b41c2a9038bf87646fa3ccd7560eb20) Thanks [@darshanr0107](https://github.com/darshanr0107)! - fix: Handle arrows correctly when auto number is enabled
## 11.10.0
### Minor Changes
@@ -154,7 +168,6 @@
### Minor Changes
- [#6408](https://github.com/mermaid-js/mermaid/pull/6408) [`ad65313`](https://github.com/mermaid-js/mermaid/commit/ad653138e16765d095613a6e5de86dc5e52ac8f0) Thanks [@ashishjain0512](https://github.com/ashishjain0512)! - fix: restore curve type configuration functionality for flowcharts. This fixes the issue where curve type settings were not being applied when configured through any of the following methods:
- Config
- Init directive (%%{ init: { 'flowchart': { 'curve': '...' } } }%%)
- LinkStyle command (linkStyle default interpolate ...)
@@ -173,14 +186,12 @@
### Minor Changes
- [#6187](https://github.com/mermaid-js/mermaid/pull/6187) [`7809b5a`](https://github.com/mermaid-js/mermaid/commit/7809b5a93fae127f45727071f5ff14325222c518) Thanks [@ashishjain0512](https://github.com/ashishjain0512)! - Flowchart new syntax for node metadata bugs
- Incorrect label mapping for nodes when using `&`
- Syntax error when `}` with trailing spaces before new line
- [#6136](https://github.com/mermaid-js/mermaid/pull/6136) [`ec0d9c3`](https://github.com/mermaid-js/mermaid/commit/ec0d9c389aa6018043187654044c1e0b5aa4f600) Thanks [@knsv](https://github.com/knsv)! - Adding support for animation of flowchart edges
- [#6373](https://github.com/mermaid-js/mermaid/pull/6373) [`05bdf0e`](https://github.com/mermaid-js/mermaid/commit/05bdf0e20e2629fe77513218fbd4e28e65f75882) Thanks [@ashishjain0512](https://github.com/ashishjain0512)! - Upgrade Requirement and ER diagram to use the common renderer flow
- Added support for directions
- Added support for hand drawn look

View File

@@ -1,6 +1,6 @@
{
"name": "mermaid",
"version": "11.10.0",
"version": "11.11.0",
"description": "Markdown-ish syntax for generating flowcharts, mindmaps, sequence diagrams, class diagrams, gantt charts, git graphs and more.",
"type": "module",
"module": "./dist/mermaid.core.mjs",
@@ -48,10 +48,6 @@
"types:build-config": "tsx scripts/create-types-from-json-schema.mts",
"types:verify-config": "tsx scripts/create-types-from-json-schema.mts --verify",
"checkCircle": "npx madge --circular ./src",
"antlr:sequence:clean": "rimraf src/diagrams/sequence/parser/antlr/generated",
"antlr:sequence": "pnpm run antlr:sequence:clean && antlr4ng -Dlanguage=TypeScript -Xexact-output-dir -o src/diagrams/sequence/parser/antlr/generated src/diagrams/sequence/parser/antlr/SequenceLexer.g4 src/diagrams/sequence/parser/antlr/SequenceParser.g4",
"antlr:class:clean": "rimraf src/diagrams/class/parser/antlr/generated",
"antlr:class": "pnpm run antlr:class:clean && antlr4ng -Dlanguage=TypeScript -Xexact-output-dir -o src/diagrams/class/parser/antlr/generated src/diagrams/class/parser/antlr/ClassLexer.g4 src/diagrams/class/parser/antlr/ClassParser.g4",
"prepublishOnly": "pnpm docs:verify-version"
},
"repository": {
@@ -71,34 +67,32 @@
]
},
"dependencies": {
"@braintree/sanitize-url": "^7.0.4",
"@iconify/utils": "^3.0.1",
"@braintree/sanitize-url": "^7.1.1",
"@iconify/utils": "^3.0.2",
"@mermaid-js/parser": "workspace:^",
"@types/d3": "^7.4.3",
"antlr-ng": "^1.0.10",
"antlr4ng": "^3.0.16",
"cytoscape": "^3.29.3",
"cytoscape": "^3.33.1",
"cytoscape-cose-bilkent": "^4.1.0",
"cytoscape-fcose": "^2.2.0",
"d3": "^7.9.0",
"d3-sankey": "^0.12.3",
"dagre-d3-es": "7.0.11",
"dayjs": "^1.11.13",
"dagre-d3-es": "7.0.12",
"dayjs": "^1.11.18",
"dompurify": "^3.2.5",
"katex": "^0.16.22",
"katex": "^0.16.25",
"khroma": "^2.1.0",
"lodash-es": "^4.17.21",
"marked": "^16.0.0",
"marked": "^16.3.0",
"roughjs": "^4.6.6",
"stylis": "^4.3.6",
"ts-dedent": "^2.2.0",
"uuid": "^11.1.0"
},
"devDependencies": {
"@adobe/jsonschema2md": "^8.0.2",
"@adobe/jsonschema2md": "^8.0.7",
"@iconify/types": "^2.0.0",
"@types/cytoscape": "^3.21.9",
"@types/cytoscape-fcose": "^2.2.4",
"@types/cytoscape-fcose": "^2.2.5",
"@types/d3-sankey": "^0.12.4",
"@types/d3-scale": "^4.0.9",
"@types/d3-scale-chromatic": "^3.1.0",
@@ -111,32 +105,31 @@
"@types/stylis": "^4.2.7",
"@types/uuid": "^10.0.0",
"ajv": "^8.17.1",
"canvas": "^3.1.0",
"canvas": "^3.2.0",
"chokidar": "3.6.0",
"concurrently": "^9.1.2",
"concurrently": "^9.2.1",
"csstree-validator": "^4.0.1",
"globby": "^14.0.2",
"globby": "^14.1.0",
"jison": "^0.4.18",
"js-base64": "^3.7.7",
"js-base64": "^3.7.8",
"jsdom": "^26.1.0",
"json-schema-to-typescript": "^15.0.4",
"micromatch": "^4.0.8",
"path-browserify": "^1.0.1",
"prettier": "^3.5.2",
"prettier": "^3.6.2",
"remark": "^15.0.1",
"remark-frontmatter": "^5.0.0",
"remark-gfm": "^4.0.1",
"rimraf": "^6.0.1",
"start-server-and-test": "^2.0.10",
"type-fest": "^4.35.0",
"typedoc": "^0.28.9",
"typedoc-plugin-markdown": "^4.8.0",
"start-server-and-test": "^2.1.2",
"type-fest": "^4.41.0",
"typedoc": "^0.28.14",
"typedoc-plugin-markdown": "^4.8.1",
"typescript": "~5.7.3",
"unist-util-flatmap": "^1.0.0",
"unist-util-visit": "^5.0.0",
"vitepress": "^1.0.2",
"vitepress-plugin-search": "1.0.4-alpha.22",
"antlr4ng-cli": "^2.0.0"
"vitepress": "^1.6.4",
"vitepress-plugin-search": "1.0.4-alpha.22"
},
"files": [
"dist/",

View File

@@ -1,147 +0,0 @@
## ANTLR migration plan for Class Diagrams (parity with Sequence)
This guide summarizes how to migrate the Class diagram parser from Jison to ANTLR (antlr4ng), following the approach used for Sequence diagrams. The goal is full feature parity and 100% test pass rate, while keeping the Jison implementation as the reference until the ANTLR path is green.
### Objectives
- Keep the existing Jison parser as the authoritative reference until parity is achieved
- Add an ANTLR parser behind a runtime flag (`USE_ANTLR_PARSER=true`), mirroring Sequence
- Achieve 100% test compatibility with the current Jison behavior, including error cases
- Keep the public DB and rendering contracts unchanged
---
## 1) Prep and references
- Use the Sequence migration as a template for structure, scripts, and patterns:
- antlr4ng grammar files: `SequenceLexer.g4`, `SequenceParser.g4`
- wrapper: `antlr-parser.ts` providing a Jison-compatible `parse()` and `yy`
- generation script: `pnpm --filter mermaid run antlr:sequence`
- For Class diagrams, identify analogous files:
- Jison grammar: `packages/mermaid/src/diagrams/class/parser/classDiagram.jison`
- DB: `packages/mermaid/src/diagrams/class/classDb.ts`
- Tests: `packages/mermaid/src/diagrams/class/classDiagram.spec.js`
- Confirm Class diagram features in the Jison grammar and tests: classes, interfaces, enums, relationships (e.g., `--`, `*--`, `o--`, `<|--`, `--|>`), visibility markers (`+`, `-`, `#`, `~`), generics (`<T>`, nested), static/abstract indicators, fields/properties, methods (with parameters and return types), stereotypes (`<< >>`), notes, direction, style/config lines, and titles/accessibility lines if supported.
---
## 2) Create ANTLR grammars
- Create `ClassLexer.g4` and `ClassParser.g4` under `packages/mermaid/src/diagrams/class/parser/antlr/`
- Lexer design guidelines (mirror Sequence approach):
- Implement stateful lexing with modes to replicate Jison behavior (e.g., default, line/rest-of-line, config/title/acc modes if used)
- Ensure token precedence resolves conflicts between relation arrows and generics (`<|--` vs `<T>`). Prefer longest-match arrow tokens and handle generics in parser context
- Accept identifiers that include special characters that Jison allowed (quotes, underscores, digits, unicode as applicable)
- Provide tokens for core keywords and symbols: `class`, `interface`, `enum`, relationship operators, visibility markers, `<< >>` stereotypes, `{ }` blocks, `:` type separators, `,` parameter separators, `[` `]` arrays, `<` `>` generics
- Reuse common tokens shared across diagrams where appropriate (e.g., `TITLE`, `ACC_...`) if Class supports them
- Parser design guidelines:
- Follow the Jison grammar structure closely to minimize semantic drift
- Allow the final statement in the file to omit a trailing newline (to avoid EOF vs NEWLINE mismatches)
- Keep non-ambiguous rules for:
- Class declarations and bodies (members split into fields/properties vs methods)
- Modifiers (visibility, static, abstract)
- Types (simple, namespaced, generic with nesting)
- Relationships with labels (left->right/right->left forms) and multiplicities
- Stereotypes and notes
- Optional global lines (title, accTitle, accDescr) if supported by class diagrams
---
## 3) Add the wrapper and flag switch
- Add `packages/mermaid/src/diagrams/class/parser/antlr/antlr-parser.ts`:
- Export an object `{ parse, parser, yy }` that mirrors the Jison parser shape
- `parse(input)` should:
- `this.yy.clear()` to reset DB (same as Sequence)
- Build ANTLR's lexer/parser, set `BailErrorStrategy` to fail-fast on syntax errors
- Walk the tree with a listener that calls classDb methods
- Implement no-op bodies for `visitTerminal`, `visitErrorNode`, `enterEveryRule`, `exitEveryRule` (required by ParseTreeWalker)
- Avoid `require()`; import from `antlr4ng`
- Use minimal `any`; when casting is unavoidable, add clear comments
- Add `packages/mermaid/src/diagrams/class/parser/classParser.ts` similar to Sequence `sequenceParser.ts`:
- Import both the Jison parser and the ANTLR wrapper
- Gate on `process.env.USE_ANTLR_PARSER === 'true'`
- Normalize whitespace if Jison relies on specific newlines (keep parity with Sequence patterns)
---
## 4) Implement the listener (semantic actions)
Map parsed constructs to classDb calls. Typical handlers include:
- Class-like declarations
- `db.addClass(id, { type: 'class'|'interface'|'enum', ... })`
- `db.addClassMember(id, member)` for fields/properties/methods (capture visibility, static/abstract, types, params)
- Stereotypes, annotations, notes: `db.addAnnotation(...)`, `db.addNote(...)` if applicable
- Relationships
- Parse arrow/operator to relation type; map to db constants (composition/aggregation/inheritance/realization/association)
- `db.addRelation(lhs, rhs, { type, label, multiplicity })`
- Title/Accessibility (if supported in Class diagrams)
- `db.setDiagramTitle(...)`, `db.setAccTitle(...)`, `db.setAccDescription(...)`
- Styles/Directives/Config lines as supported by the Jison grammar
Error handling:
- Use BailErrorStrategy; let invalid constructs throw where Jison tests expect failure
- For robustness parity, only swallow exceptions in places where Jison tolerated malformed content without aborting
---
## 5) Scripts and generation
- Add package scripts similar to Sequence in `packages/mermaid/package.json`:
- `antlr:class:clean`: remove generated TS
- `antlr:class`: run antlr4ng to generate TS into `parser/antlr/generated`
- Example command (once scripts exist):
- `pnpm --filter mermaid run antlr:class`
---
## 6) Tests (Vitest)
- Run existing Class tests with the ANTLR parser enabled:
- `USE_ANTLR_PARSER=true pnpm vitest packages/mermaid/src/diagrams/class/classDiagram.spec.js --run`
- Start by making a small focused subset pass, then expand to the full suite
- Add targeted tests for areas where the ANTLR grammar needs extra coverage (e.g., nested generics, tricky arrow/operator precedence, stereotypes, notes)
- Keep test expectations identical to Jisons behavior; only adjust if Jisons behavior was explicitly flaky and already tolerated in the repo
---
## 7) Linting and quality
- Satisfy ESLint rules enforced in the repo:
- Prefer imports over `require()`; no empty methods, avoid untyped `any` where reasonable
- If `@ts-ignore` is necessary, include a descriptive reason (≥10 chars)
- Provide minimal types for listener contexts where helpful; keep casts localized and commented
- Prefix diagnostic debug logs with the projects preferred prefix if temporary logging is needed (and clean up before commit)
---
## 8) Common pitfalls and tips
- NEWLINE vs EOF: allow the last statement without a trailing newline to prevent InputMismatch
- Token conflicts: order matters; ensure relationship operators (e.g., `<|--`, `--|>`, `*--`, `o--`) win over generic `<`/`>` in the right contexts
- Identifiers: match Jisons permissiveness (quoted names, digits where allowed) and avoid over-greedy tokens that eat operators
- Listener resilience: ensure classes and endpoints exist before adding relations (create implicitly if Jison did so)
- Error parity: do not swallow exceptions for cases where tests expect failure
---
## 9) Rollout checklist
- [ ] Grammar compiles and generated files are committed
- [ ] `USE_ANTLR_PARSER=true` passes all Class diagram tests
- [ ] Sequence and other diagram suites remain green
- [ ] No new ESLint errors; warnings minimized
- [ ] PR includes notes on parity and how to run the ANTLR tests
---
## 10) Quick command reference
- Generate ANTLR targets (after adding scripts):
- `pnpm --filter mermaid run antlr:class`
- Run Class tests with ANTLR parser:
- `USE_ANTLR_PARSER=true pnpm vitest packages/mermaid/src/diagrams/class/classDiagram.spec.js --run`
- Run a single test:
- `USE_ANTLR_PARSER=true pnpm vitest packages/mermaid/src/diagrams/class/classDiagram.spec.js -t "some test name" --run`

View File

@@ -627,7 +627,7 @@ export class ClassDB implements DiagramDB {
padding: config.class!.padding ?? 16,
// parent node must be one of [rect, roundedWithTitle, noteGroup, divider]
shape: 'rect',
cssStyles: ['fill: none', 'stroke: black'],
cssStyles: [],
look: config.look,
};
nodes.push(node);

View File

@@ -1,4 +1,4 @@
import { parser } from './parser/classParser.ts';
import { parser } from './parser/classDiagram.jison';
import { ClassDB } from './classDb.js';
describe('class diagram, ', function () {

View File

@@ -1,6 +1,6 @@
import type { DiagramDefinition } from '../../diagram-api/types.js';
// @ts-ignore: JISON doesn't support types
import parser from './parser/classParser.ts';
import parser from './parser/classDiagram.jison';
import { ClassDB } from './classDb.js';
import styles from './styles.js';
import renderer from './classRenderer-v3-unified.js';

View File

@@ -1,6 +1,6 @@
/* eslint-disable @typescript-eslint/unbound-method -- Broken for Vitest mocks, see https://github.com/vitest-dev/eslint-plugin-vitest/pull/286 */
// @ts-expect-error Parser exposes mutable yy property without typings
import { parser } from './parser/classParser.ts';
// @ts-expect-error Jison doesn't export types
import { parser } from './parser/classDiagram.jison';
import { ClassDB } from './classDb.js';
import { vi, describe, it, expect } from 'vitest';
import type { ClassMap, NamespaceNode } from './classTypes.js';

View File

@@ -1,6 +1,6 @@
import type { DiagramDefinition } from '../../diagram-api/types.js';
// @ts-ignore: JISON doesn't support types
import parser from './parser/classParser.ts';
import parser from './parser/classDiagram.jison';
import { ClassDB } from './classDb.js';
import styles from './styles.js';
import renderer from './classRenderer-v3-unified.js';

View File

@@ -1,229 +0,0 @@
lexer grammar ClassLexer;
tokens {
ACC_TITLE_VALUE,
ACC_DESCR_VALUE,
ACC_DESCR_MULTILINE_VALUE,
ACC_DESCR_MULTI_END,
OPEN_IN_STRUCT,
MEMBER
}
@members {
private pendingClassBody = false;
private pendingNamespaceBody = false;
private clearPendingScopes(): void {
this.pendingClassBody = false;
this.pendingNamespaceBody = false;
}
}
// Common fragments
fragment WS_INLINE: [ \t]+;
fragment DIGIT: [0-9];
fragment LETTER: [A-Za-z_];
fragment IDENT_PART: [A-Za-z0-9_\-];
fragment NOT_DQUOTE: ~[""];
// Comments and whitespace
COMMENT: '%%' ~[\r\n]* -> skip;
NEWLINE: ('\r'? '\n')+ { this.clearPendingScopes(); };
WS: [ \t]+ -> skip;
// Diagram title declaration
CLASS_DIAGRAM_V2: 'classDiagram-v2' -> type(CLASS_DIAGRAM);
CLASS_DIAGRAM: 'classDiagram';
// Directions
DIRECTION_TB: 'direction' WS_INLINE+ 'TB';
DIRECTION_BT: 'direction' WS_INLINE+ 'BT';
DIRECTION_LR: 'direction' WS_INLINE+ 'LR';
DIRECTION_RL: 'direction' WS_INLINE+ 'RL';
// Accessibility tokens
ACC_TITLE: 'accTitle' WS_INLINE* ':' WS_INLINE* -> pushMode(ACC_TITLE_MODE);
ACC_DESCR: 'accDescr' WS_INLINE* ':' WS_INLINE* -> pushMode(ACC_DESCR_MODE);
ACC_DESCR_MULTI: 'accDescr' WS_INLINE* '{' -> pushMode(ACC_DESCR_MULTILINE_MODE);
// Statements captured as raw lines for semantic handling in listener
STYLE_LINE: 'style' WS_INLINE+ ~[\r\n]*;
CLASSDEF_LINE: 'classDef' ~[\r\n]*;
CSSCLASS_LINE: 'cssClass' ~[\r\n]*;
CALLBACK_LINE: 'callback' ~[\r\n]*;
CLICK_LINE: 'click' ~[\r\n]*;
LINK_LINE: 'link' ~[\r\n]*;
CALL_LINE: 'call' ~[\r\n]*;
// Notes
NOTE_FOR: 'note' WS_INLINE+ 'for';
NOTE: 'note';
// Keywords that affect block handling
CLASS: 'class' { this.pendingClassBody = true; };
NAMESPACE: 'namespace' { this.pendingNamespaceBody = true; };
// Structural tokens
STYLE_SEPARATOR: ':::';
ANNOTATION_START: '<<';
ANNOTATION_END: '>>';
LBRACKET: '[';
RBRACKET: ']';
COMMA: ',';
DOT: '.';
EDGE_STATE: '[*]';
GENERIC: '~' (~[~\r\n])+ '~';
// Match strings without escape semantics to mirror Jison behavior
// Allow any chars except an unescaped closing double-quote; permit newlines
STRING: '"' NOT_DQUOTE* '"';
BACKTICK_ID: '`' (~[`])* '`';
LABEL: ':' (~[':\r\n;])*;
RELATION_ARROW
: (LEFT_HEAD)? LINE_BODY (RIGHT_HEAD)?
;
fragment LEFT_HEAD
: '<|'
| '<'
| 'o'
| '*'
| '()'
;
fragment RIGHT_HEAD
: '|>'
| '>'
| 'o'
| '*'
| '()'
;
fragment LINE_BODY
: '--'
| '..'
;
// Identifiers and numbers
IDENTIFIER
: (LETTER | DIGIT) IDENT_PART*
;
NUMBER: DIGIT+;
PLUS: '+';
MINUS: '-';
HASH: '#';
PERCENT: '%';
STAR: '*';
SLASH: '/';
LPAREN: '(';
RPAREN: ')';
// Structural braces with mode management
STRUCT_START
: '{'
{
if (this.pendingClassBody) {
this.pendingClassBody = false;
this.pushMode(ClassLexer.CLASS_BODY);
} else {
if (this.pendingNamespaceBody) {
this.pendingNamespaceBody = false;
}
this.pushMode(ClassLexer.BLOCK);
}
}
;
STRUCT_END: '}' { /* default mode only */ };
// Default fallback (should not normally trigger)
UNKNOWN: .;
// ===== Mode: ACC_TITLE =====
mode ACC_TITLE_MODE;
ACC_TITLE_MODE_WS: [ \t]+ -> skip;
ACC_TITLE_VALUE: ~[\r\n;#]+ -> type(ACC_TITLE_VALUE), popMode;
ACC_TITLE_MODE_NEWLINE: ('\r'? '\n')+ { this.popMode(); this.clearPendingScopes(); } -> type(NEWLINE);
// ===== Mode: ACC_DESCR =====
mode ACC_DESCR_MODE;
ACC_DESCR_MODE_WS: [ \t]+ -> skip;
ACC_DESCR_VALUE: ~[\r\n;#]+ -> type(ACC_DESCR_VALUE), popMode;
ACC_DESCR_MODE_NEWLINE: ('\r'? '\n')+ { this.popMode(); this.clearPendingScopes(); } -> type(NEWLINE);
// ===== Mode: ACC_DESCR_MULTILINE =====
mode ACC_DESCR_MULTILINE_MODE;
ACC_DESCR_MULTILINE_VALUE: (~[}])+ -> type(ACC_DESCR_MULTILINE_VALUE);
ACC_DESCR_MULTI_END: '}' -> popMode, type(ACC_DESCR_MULTI_END);
// ===== Mode: CLASS_BODY =====
mode CLASS_BODY;
CLASS_BODY_WS: [ \t]+ -> skip;
CLASS_BODY_COMMENT: '%%' ~[\r\n]* -> skip;
CLASS_BODY_NEWLINE: ('\r'? '\n')+ -> type(NEWLINE);
CLASS_BODY_STRUCT_END: '}' -> popMode, type(STRUCT_END);
CLASS_BODY_OPEN_BRACE: '{' -> type(OPEN_IN_STRUCT);
CLASS_BODY_EDGE_STATE: '[*]' -> type(EDGE_STATE);
CLASS_BODY_MEMBER: ~[{}\r\n]+ -> type(MEMBER);
// ===== Mode: BLOCK =====
mode BLOCK;
BLOCK_WS: [ \t]+ -> skip;
BLOCK_COMMENT: '%%' ~[\r\n]* -> skip;
BLOCK_NEWLINE: ('\r'? '\n')+ -> type(NEWLINE);
BLOCK_CLASS: 'class' { this.pendingClassBody = true; } -> type(CLASS);
BLOCK_NAMESPACE: 'namespace' { this.pendingNamespaceBody = true; } -> type(NAMESPACE);
BLOCK_STYLE_LINE: 'style' WS_INLINE+ ~[\r\n]* -> type(STYLE_LINE);
BLOCK_CLASSDEF_LINE: 'classDef' ~[\r\n]* -> type(CLASSDEF_LINE);
BLOCK_CSSCLASS_LINE: 'cssClass' ~[\r\n]* -> type(CSSCLASS_LINE);
BLOCK_CALLBACK_LINE: 'callback' ~[\r\n]* -> type(CALLBACK_LINE);
BLOCK_CLICK_LINE: 'click' ~[\r\n]* -> type(CLICK_LINE);
BLOCK_LINK_LINE: 'link' ~[\r\n]* -> type(LINK_LINE);
BLOCK_CALL_LINE: 'call' ~[\r\n]* -> type(CALL_LINE);
BLOCK_NOTE_FOR: 'note' WS_INLINE+ 'for' -> type(NOTE_FOR);
BLOCK_NOTE: 'note' -> type(NOTE);
BLOCK_ACC_TITLE: 'accTitle' WS_INLINE* ':' WS_INLINE* -> type(ACC_TITLE), pushMode(ACC_TITLE_MODE);
BLOCK_ACC_DESCR: 'accDescr' WS_INLINE* ':' WS_INLINE* -> type(ACC_DESCR), pushMode(ACC_DESCR_MODE);
BLOCK_ACC_DESCR_MULTI: 'accDescr' WS_INLINE* '{' -> type(ACC_DESCR_MULTI), pushMode(ACC_DESCR_MULTILINE_MODE);
BLOCK_STRUCT_START
: '{'
{
if (this.pendingClassBody) {
this.pendingClassBody = false;
this.pushMode(ClassLexer.CLASS_BODY);
} else {
if (this.pendingNamespaceBody) {
this.pendingNamespaceBody = false;
}
this.pushMode(ClassLexer.BLOCK);
}
}
-> type(STRUCT_START)
;
BLOCK_STRUCT_END: '}' -> popMode, type(STRUCT_END);
BLOCK_STYLE_SEPARATOR: ':::' -> type(STYLE_SEPARATOR);
BLOCK_ANNOTATION_START: '<<' -> type(ANNOTATION_START);
BLOCK_ANNOTATION_END: '>>' -> type(ANNOTATION_END);
BLOCK_LBRACKET: '[' -> type(LBRACKET);
BLOCK_RBRACKET: ']' -> type(RBRACKET);
BLOCK_COMMA: ',' -> type(COMMA);
BLOCK_DOT: '.' -> type(DOT);
BLOCK_EDGE_STATE: '[*]' -> type(EDGE_STATE);
BLOCK_GENERIC: '~' (~[~\r\n])+ '~' -> type(GENERIC);
// Mirror Jison: no escape semantics inside strings in BLOCK mode as well
BLOCK_STRING: '"' NOT_DQUOTE* '"' -> type(STRING);
BLOCK_BACKTICK_ID: '`' (~[`])* '`' -> type(BACKTICK_ID);
BLOCK_LABEL: ':' (~[':\r\n;])* -> type(LABEL);
BLOCK_RELATION_ARROW
: (LEFT_HEAD)? LINE_BODY (RIGHT_HEAD)?
-> type(RELATION_ARROW)
;
BLOCK_IDENTIFIER: (LETTER | DIGIT) IDENT_PART* -> type(IDENTIFIER);
BLOCK_NUMBER: DIGIT+ -> type(NUMBER);
BLOCK_PLUS: '+' -> type(PLUS);
BLOCK_MINUS: '-' -> type(MINUS);
BLOCK_HASH: '#' -> type(HASH);
BLOCK_PERCENT: '%' -> type(PERCENT);
BLOCK_STAR: '*' -> type(STAR);
BLOCK_SLASH: '/' -> type(SLASH);
BLOCK_LPAREN: '(' -> type(LPAREN);
BLOCK_RPAREN: ')' -> type(RPAREN);
BLOCK_UNKNOWN: . -> type(UNKNOWN);

View File

@@ -1,204 +0,0 @@
parser grammar ClassParser;
options {
tokenVocab = ClassLexer;
}
start
: (NEWLINE)* classDiagramSection EOF
;
classDiagramSection
: CLASS_DIAGRAM (NEWLINE)+ document
;
document
: (line)* statement?
;
line
: statement? NEWLINE
;
statement
: classStatement
| namespaceStatement
| relationStatement
| noteStatement
| annotationStatement
| memberStatement
| classDefStatement
| styleStatement
| cssClassStatement
| directionStatement
| accTitleStatement
| accDescrStatement
| accDescrMultilineStatement
| callbackStatement
| clickStatement
| linkStatement
| callStatement
;
classStatement
: classIdentifier classStatementTail?
;
classStatementTail
: STRUCT_START classMembers? STRUCT_END
| STYLE_SEPARATOR cssClassRef classStatementCssTail?
;
classStatementCssTail
: STRUCT_START classMembers? STRUCT_END
;
classIdentifier
: CLASS className classLabel?
;
classLabel
: LBRACKET stringLiteral RBRACKET
;
cssClassRef
: className
| IDENTIFIER
;
classMembers
: (NEWLINE | classMember)*
;
classMember
: MEMBER
| EDGE_STATE
;
namespaceStatement
: namespaceIdentifier namespaceBlock
;
namespaceIdentifier
: NAMESPACE namespaceName
;
namespaceName
: className
;
namespaceBlock
: STRUCT_START (NEWLINE)* namespaceBody? STRUCT_END
;
namespaceBody
: namespaceLine+
;
namespaceLine
: (classStatement | namespaceStatement)? NEWLINE
| classStatement
| namespaceStatement
;
relationStatement
: className relation className relationLabel?
| className stringLiteral relation className relationLabel?
| className relation stringLiteral className relationLabel?
| className stringLiteral relation stringLiteral className relationLabel?
;
relation
: RELATION_ARROW
;
relationLabel
: LABEL
;
noteStatement
: NOTE_FOR className noteBody
| NOTE noteBody
;
noteBody
: stringLiteral
;
annotationStatement
: ANNOTATION_START annotationName ANNOTATION_END className
;
annotationName
: IDENTIFIER
| stringLiteral
;
memberStatement
: className LABEL
;
classDefStatement
: CLASSDEF_LINE
;
styleStatement
: STYLE_LINE
;
cssClassStatement
: CSSCLASS_LINE
;
directionStatement
: DIRECTION_TB
| DIRECTION_BT
| DIRECTION_LR
| DIRECTION_RL
;
accTitleStatement
: ACC_TITLE ACC_TITLE_VALUE
;
accDescrStatement
: ACC_DESCR ACC_DESCR_VALUE
;
accDescrMultilineStatement
: ACC_DESCR_MULTI ACC_DESCR_MULTILINE_VALUE ACC_DESCR_MULTI_END
;
callbackStatement
: CALLBACK_LINE
;
clickStatement
: CLICK_LINE
;
linkStatement
: LINK_LINE
;
callStatement
: CALL_LINE
;
stringLiteral
: STRING
;
className
: classNameSegment (DOT classNameSegment)*
;
classNameSegment
: IDENTIFIER genericSuffix?
| BACKTICK_ID genericSuffix?
| EDGE_STATE
;
genericSuffix
: GENERIC
;

View File

@@ -1,729 +0,0 @@
import type { ParseTreeListener } from 'antlr4ng';
import {
BailErrorStrategy,
CharStream,
CommonTokenStream,
ParseCancellationException,
ParseTreeWalker,
RecognitionException,
type Token,
} from 'antlr4ng';
import {
ClassParser,
type ClassIdentifierContext,
type ClassMembersContext,
type ClassNameContext,
type ClassNameSegmentContext,
type ClassStatementContext,
type NamespaceIdentifierContext,
type RelationStatementContext,
type NoteStatementContext,
type AnnotationStatementContext,
type MemberStatementContext,
type ClassDefStatementContext,
type StyleStatementContext,
type CssClassStatementContext,
type DirectionStatementContext,
type AccTitleStatementContext,
type AccDescrStatementContext,
type AccDescrMultilineStatementContext,
type CallbackStatementContext,
type ClickStatementContext,
type LinkStatementContext,
type CallStatementContext,
type CssClassRefContext,
type StringLiteralContext,
} from './generated/ClassParser.js';
import { ClassParserListener } from './generated/ClassParserListener.js';
import { ClassLexer } from './generated/ClassLexer.js';
type ClassDbLike = Record<string, any>;
const stripQuotes = (value: string): string => {
const trimmed = value.trim();
if (trimmed.length >= 2 && trimmed.startsWith('"') && trimmed.endsWith('"')) {
try {
return JSON.parse(trimmed.replace(/\r?\n/g, '\\n')) as string;
} catch {
return trimmed.slice(1, -1).replace(/\\"/g, '"');
}
}
return trimmed;
};
const stripBackticks = (value: string): string => {
const trimmed = value.trim();
if (trimmed.length >= 2 && trimmed.startsWith('`') && trimmed.endsWith('`')) {
return trimmed.slice(1, -1);
}
return trimmed;
};
const splitCommaSeparated = (text: string): string[] =>
text
.split(',')
.map((part) => part.trim())
.filter((part) => part.length > 0);
const getStringFromLiteral = (ctx: StringLiteralContext | undefined | null): string | undefined => {
if (!ctx) {
return undefined;
}
return stripQuotes(ctx.getText());
};
const getClassNameText = (ctx: ClassNameContext): string => {
const segments = ctx.classNameSegment();
const parts: string[] = [];
for (const segment of segments) {
parts.push(getClassNameSegmentText(segment));
}
return parts.join('.');
};
const getClassNameSegmentText = (ctx: ClassNameSegmentContext): string => {
if (ctx.BACKTICK_ID()) {
return stripBackticks(ctx.BACKTICK_ID()!.getText());
}
if (ctx.EDGE_STATE()) {
return ctx.EDGE_STATE()!.getText();
}
return ctx.getText();
};
const parseRelationArrow = (arrow: string, db: ClassDbLike) => {
const relation = {
type1: 'none',
type2: 'none',
lineType: db.lineType?.LINE ?? 0,
};
const trimmed = arrow.trim();
if (trimmed.includes('..')) {
relation.lineType = db.lineType?.DOTTED_LINE ?? relation.lineType;
}
const leftHeads: [string, keyof typeof db.relationType][] = [
['<|', 'EXTENSION'],
['()', 'LOLLIPOP'],
['o', 'AGGREGATION'],
['*', 'COMPOSITION'],
['<', 'DEPENDENCY'],
];
for (const [prefix, key] of leftHeads) {
if (trimmed.startsWith(prefix)) {
relation.type1 = db.relationType?.[key] ?? relation.type1;
break;
}
}
const rightHeads: [string, keyof typeof db.relationType][] = [
['|>', 'EXTENSION'],
['()', 'LOLLIPOP'],
['o', 'AGGREGATION'],
['*', 'COMPOSITION'],
['>', 'DEPENDENCY'],
];
for (const [suffix, key] of rightHeads) {
if (trimmed.endsWith(suffix)) {
relation.type2 = db.relationType?.[key] ?? relation.type2;
break;
}
}
return relation;
};
const parseStyleLine = (db: ClassDbLike, line: string) => {
const trimmed = line.trim();
const body = trimmed.slice('style'.length).trim();
if (!body) {
return;
}
const match = /^(\S+)(\s+.+)?$/.exec(body);
if (!match) {
return;
}
const classId = match[1];
const styleBody = match[2]?.trim() ?? '';
if (!styleBody) {
return;
}
const styles = splitCommaSeparated(styleBody);
if (styles.length) {
db.setCssStyle?.(classId, styles);
}
};
const parseClassDefLine = (db: ClassDbLike, line: string) => {
const trimmed = line.trim();
const body = trimmed.slice('classDef'.length).trim();
if (!body) {
return;
}
const match = /^(\S+)(\s+.+)?$/.exec(body);
if (!match) {
return;
}
const idPart = match[1];
const stylePart = match[2]?.trim() ?? '';
const ids = splitCommaSeparated(idPart);
const styles = stylePart ? splitCommaSeparated(stylePart) : [];
db.defineClass?.(ids, styles);
};
const parseCssClassLine = (db: ClassDbLike, line: string) => {
const trimmed = line.trim();
const body = trimmed.slice('cssClass'.length).trim();
if (!body) {
return;
}
const match = /^("[^"]*"|\S+)\s+(\S+)/.exec(body);
if (!match) {
return;
}
const idsRaw = stripQuotes(match[1]);
const className = match[2];
db.setCssClass?.(idsRaw, className);
};
const parseCallbackLine = (db: ClassDbLike, line: string) => {
const trimmed = line.trim();
const match = /^callback\s+(\S+)\s+("[^"]*")(?:\s+("[^"]*"))?\s*$/.exec(trimmed);
if (!match) {
return;
}
const target = match[1];
const fn = stripQuotes(match[2]);
const tooltip = match[3] ? stripQuotes(match[3]) : undefined;
db.setClickEvent?.(target, fn);
if (tooltip) {
db.setTooltip?.(target, tooltip);
}
};
const parseClickLine = (db: ClassDbLike, line: string) => {
const trimmed = line.trim();
const callMatch = /^click\s+(\S+)\s+call\s+([^(]+)\(([^)]*)\)(?:\s+("[^"]*"))?\s*$/.exec(trimmed);
if (callMatch) {
const target = callMatch[1];
const fnName = callMatch[2].trim();
const args = callMatch[3].trim();
const tooltip = callMatch[4] ? stripQuotes(callMatch[4]) : undefined;
if (args.length > 0) {
db.setClickEvent?.(target, fnName, args);
} else {
db.setClickEvent?.(target, fnName);
}
if (tooltip) {
db.setTooltip?.(target, tooltip);
}
return target;
}
const hrefMatch = /^click\s+(\S+)\s+href\s+("[^"]*")(?:\s+("[^"]*"))?(?:\s+(\S+))?\s*$/.exec(
trimmed
);
if (hrefMatch) {
const target = hrefMatch[1];
const url = stripQuotes(hrefMatch[2]);
const tooltip = hrefMatch[3] ? stripQuotes(hrefMatch[3]) : undefined;
const targetWindow = hrefMatch[4];
if (targetWindow) {
db.setLink?.(target, url, targetWindow);
} else {
db.setLink?.(target, url);
}
if (tooltip) {
db.setTooltip?.(target, tooltip);
}
return target;
}
const genericMatch = /^click\s+(\S+)\s+("[^"]*")(?:\s+("[^"]*"))?\s*$/.exec(trimmed);
if (genericMatch) {
const target = genericMatch[1];
const link = stripQuotes(genericMatch[2]);
const tooltip = genericMatch[3] ? stripQuotes(genericMatch[3]) : undefined;
db.setLink?.(target, link);
if (tooltip) {
db.setTooltip?.(target, tooltip);
}
return target;
}
return undefined;
};
const parseLinkLine = (db: ClassDbLike, line: string) => {
const trimmed = line.trim();
const match = /^link\s+(\S+)\s+("[^"]*")(?:\s+("[^"]*"))?(?:\s+(\S+))?\s*$/.exec(trimmed);
if (!match) {
return;
}
const target = match[1];
const href = stripQuotes(match[2]);
const tooltip = match[3] ? stripQuotes(match[3]) : undefined;
const targetWindow = match[4];
if (targetWindow) {
db.setLink?.(target, href, targetWindow);
} else {
db.setLink?.(target, href);
}
if (tooltip) {
db.setTooltip?.(target, tooltip);
}
};
const parseCallLine = (db: ClassDbLike, lastTarget: string | undefined, line: string) => {
if (!lastTarget) {
return;
}
const trimmed = line.trim();
const match = /^call\s+([^(]+)\(([^)]*)\)\s*("[^"]*")?\s*$/.exec(trimmed);
if (!match) {
return;
}
const fnName = match[1].trim();
const args = match[2].trim();
const tooltip = match[3] ? stripQuotes(match[3]) : undefined;
if (args.length > 0) {
db.setClickEvent?.(lastTarget, fnName, args);
} else {
db.setClickEvent?.(lastTarget, fnName);
}
if (tooltip) {
db.setTooltip?.(lastTarget, tooltip);
}
};
interface NamespaceFrame {
name?: string;
classes: string[];
}
class ClassDiagramParseListener extends ClassParserListener implements ParseTreeListener {
private readonly classNames = new WeakMap<ClassIdentifierContext, string>();
private readonly memberLists = new WeakMap<ClassMembersContext, string[]>();
private readonly namespaceStack: NamespaceFrame[] = [];
private lastClickTarget?: string;
constructor(private readonly db: ClassDbLike) {
super();
}
private recordClassInCurrentNamespace(name: string) {
const current = this.namespaceStack[this.namespaceStack.length - 1];
if (current?.name) {
current.classes.push(name);
}
}
override enterNamespaceStatement = (): void => {
this.namespaceStack.push({ classes: [] });
};
override exitNamespaceIdentifier = (ctx: NamespaceIdentifierContext): void => {
const frame = this.namespaceStack[this.namespaceStack.length - 1];
if (!frame) {
return;
}
const classNameCtx = ctx.namespaceName()?.className();
if (!classNameCtx) {
return;
}
const name = getClassNameText(classNameCtx);
frame.name = name;
this.db.addNamespace?.(name);
};
override exitNamespaceStatement = (): void => {
const frame = this.namespaceStack.pop();
if (!frame?.name) {
return;
}
if (frame.classes.length) {
this.db.addClassesToNamespace?.(frame.name, frame.classes);
}
};
override exitClassIdentifier = (ctx: ClassIdentifierContext): void => {
const id = getClassNameText(ctx.className());
this.classNames.set(ctx, id);
this.db.addClass?.(id);
this.recordClassInCurrentNamespace(id);
const labelCtx = ctx.classLabel?.();
if (labelCtx) {
const label = getStringFromLiteral(labelCtx.stringLiteral());
if (label !== undefined) {
this.db.setClassLabel?.(id, label);
}
}
};
override exitClassMembers = (ctx: ClassMembersContext): void => {
const members: string[] = [];
for (const memberCtx of ctx.classMember() ?? []) {
if (memberCtx.MEMBER()) {
members.push(memberCtx.MEMBER()!.getText());
} else if (memberCtx.EDGE_STATE()) {
members.push(memberCtx.EDGE_STATE()!.getText());
}
}
members.reverse();
this.memberLists.set(ctx, members);
};
override exitClassStatement = (ctx: ClassStatementContext): void => {
const identifierCtx = ctx.classIdentifier();
if (!identifierCtx) {
return;
}
const classId = this.classNames.get(identifierCtx);
if (!classId) {
return;
}
const tailCtx = ctx.classStatementTail?.();
const cssRefCtx = tailCtx?.cssClassRef?.();
if (cssRefCtx) {
const cssTarget = this.resolveCssClassRef(cssRefCtx);
if (cssTarget) {
this.db.setCssClass?.(classId, cssTarget);
}
}
const memberContexts: ClassMembersContext[] = [];
const cm1 = tailCtx?.classMembers();
if (cm1) {
memberContexts.push(cm1);
}
const cssTailCtx = tailCtx?.classStatementCssTail?.();
const cm2 = cssTailCtx?.classMembers();
if (cm2) {
memberContexts.push(cm2);
}
for (const membersCtx of memberContexts) {
const members = this.memberLists.get(membersCtx) ?? [];
if (members.length) {
this.db.addMembers?.(classId, members);
}
}
};
private resolveCssClassRef(ctx: CssClassRefContext): string | undefined {
if (ctx.className()) {
return getClassNameText(ctx.className()!);
}
if (ctx.IDENTIFIER()) {
return ctx.IDENTIFIER()!.getText();
}
return undefined;
}
override exitRelationStatement = (ctx: RelationStatementContext): void => {
const classNames = ctx.className();
if (classNames.length < 2) {
return;
}
const id1 = getClassNameText(classNames[0]);
const id2 = getClassNameText(classNames[classNames.length - 1]);
const arrow = ctx.relation()?.getText() ?? '';
const relation = parseRelationArrow(arrow, this.db);
let relationTitle1 = 'none';
let relationTitle2 = 'none';
const stringLiterals = ctx.stringLiteral();
if (stringLiterals.length === 1 && ctx.children) {
const stringCtx = stringLiterals[0];
const children = ctx.children as unknown[];
const stringIndex = children.indexOf(stringCtx);
const relationCtx = ctx.relation();
const relationIndex = relationCtx ? children.indexOf(relationCtx) : -1;
if (relationIndex >= 0 && stringIndex >= 0 && stringIndex < relationIndex) {
relationTitle1 = getStringFromLiteral(stringCtx) ?? 'none';
} else {
relationTitle2 = getStringFromLiteral(stringCtx) ?? 'none';
}
} else if (stringLiterals.length >= 2) {
relationTitle1 = getStringFromLiteral(stringLiterals[0]) ?? 'none';
relationTitle2 = getStringFromLiteral(stringLiterals[1]) ?? 'none';
}
let title = 'none';
const labelCtx = ctx.relationLabel?.();
if (labelCtx?.LABEL()) {
title = this.db.cleanupLabel?.(labelCtx.LABEL().getText()) ?? 'none';
}
this.db.addRelation?.({
id1,
id2,
relation,
relationTitle1,
relationTitle2,
title,
});
};
override exitNoteStatement = (ctx: NoteStatementContext): void => {
const noteCtx = ctx.noteBody();
const literalText = noteCtx?.getText?.();
const text = literalText !== undefined ? stripQuotes(literalText) : undefined;
if (text === undefined) {
return;
}
if (ctx.NOTE_FOR()) {
const className = getClassNameText(ctx.className()!);
this.db.addNote?.(text, className);
} else {
this.db.addNote?.(text);
}
};
override exitAnnotationStatement = (ctx: AnnotationStatementContext): void => {
const className = getClassNameText(ctx.className());
const nameCtx = ctx.annotationName();
let annotation: string | undefined;
if (nameCtx.IDENTIFIER()) {
annotation = nameCtx.IDENTIFIER()!.getText();
} else {
annotation = getStringFromLiteral(nameCtx.stringLiteral());
}
if (annotation !== undefined) {
this.db.addAnnotation?.(className, annotation);
}
};
override exitMemberStatement = (ctx: MemberStatementContext): void => {
const className = getClassNameText(ctx.className());
const labelToken = ctx.LABEL();
if (!labelToken) {
return;
}
const cleaned = this.db.cleanupLabel?.(labelToken.getText()) ?? labelToken.getText();
this.db.addMember?.(className, cleaned);
};
override exitClassDefStatement = (ctx: ClassDefStatementContext): void => {
const token = ctx.CLASSDEF_LINE()?.getSymbol()?.text;
if (token) {
parseClassDefLine(this.db, token);
}
};
override exitStyleStatement = (ctx: StyleStatementContext): void => {
const token = ctx.STYLE_LINE()?.getSymbol()?.text;
if (token) {
parseStyleLine(this.db, token);
}
};
override exitCssClassStatement = (ctx: CssClassStatementContext): void => {
const token = ctx.CSSCLASS_LINE()?.getSymbol()?.text;
if (token) {
parseCssClassLine(this.db, token);
}
};
override exitDirectionStatement = (ctx: DirectionStatementContext): void => {
if (ctx.DIRECTION_TB()) {
this.db.setDirection?.('TB');
} else if (ctx.DIRECTION_BT()) {
this.db.setDirection?.('BT');
} else if (ctx.DIRECTION_LR()) {
this.db.setDirection?.('LR');
} else if (ctx.DIRECTION_RL()) {
this.db.setDirection?.('RL');
}
};
override exitAccTitleStatement = (ctx: AccTitleStatementContext): void => {
const value = ctx.ACC_TITLE_VALUE()?.getText();
if (value !== undefined) {
this.db.setAccTitle?.(value.trim());
}
};
override exitAccDescrStatement = (ctx: AccDescrStatementContext): void => {
const value = ctx.ACC_DESCR_VALUE()?.getText();
if (value !== undefined) {
this.db.setAccDescription?.(value.trim());
}
};
override exitAccDescrMultilineStatement = (ctx: AccDescrMultilineStatementContext): void => {
const value = ctx.ACC_DESCR_MULTILINE_VALUE()?.getText();
if (value !== undefined) {
this.db.setAccDescription?.(value.trim());
}
};
override exitCallbackStatement = (ctx: CallbackStatementContext): void => {
const token = ctx.CALLBACK_LINE()?.getSymbol()?.text;
if (token) {
parseCallbackLine(this.db, token);
}
};
override exitClickStatement = (ctx: ClickStatementContext): void => {
const token = ctx.CLICK_LINE()?.getSymbol()?.text;
if (!token) {
return;
}
const target = parseClickLine(this.db, token);
if (target) {
this.lastClickTarget = target;
}
};
override exitLinkStatement = (ctx: LinkStatementContext): void => {
const token = ctx.LINK_LINE()?.getSymbol()?.text;
if (token) {
parseLinkLine(this.db, token);
}
};
override exitCallStatement = (ctx: CallStatementContext): void => {
const token = ctx.CALL_LINE()?.getSymbol()?.text;
if (token) {
parseCallLine(this.db, this.lastClickTarget, token);
}
};
}
class ANTLRClassParser {
yy: ClassDbLike | null = null;
parse(input: string): unknown {
if (!this.yy) {
throw new Error('Class ANTLR parser missing yy (database).');
}
this.yy.clear?.();
const inputStream = CharStream.fromString(input);
const lexer = new ClassLexer(inputStream);
const tokenStream = new CommonTokenStream(lexer);
const parser = new ClassParser(tokenStream);
const anyParser = parser as unknown as {
getErrorHandler?: () => unknown;
setErrorHandler?: (handler: unknown) => void;
errorHandler?: unknown;
};
const currentHandler = anyParser.getErrorHandler?.() ?? anyParser.errorHandler;
const handlerName = (currentHandler as { constructor?: { name?: string } } | undefined)
?.constructor?.name;
if (!currentHandler || handlerName !== 'BailErrorStrategy') {
if (typeof anyParser.setErrorHandler === 'function') {
anyParser.setErrorHandler(new BailErrorStrategy());
} else {
(parser as unknown as { errorHandler: unknown }).errorHandler = new BailErrorStrategy();
}
}
try {
const tree = parser.start();
const listener = new ClassDiagramParseListener(this.yy);
ParseTreeWalker.DEFAULT.walk(listener, tree);
return tree;
} catch (error) {
throw this.transformParseError(error, parser);
}
}
private transformParseError(error: unknown, parser: ClassParser): Error {
const recognitionError = this.unwrapRecognitionError(error);
const offendingToken = this.resolveOffendingToken(recognitionError, parser);
const line = offendingToken?.line ?? 0;
const column = offendingToken?.column ?? 0;
const message = `Parse error on line ${line}: Expecting 'STR'`;
const cause = error instanceof Error ? error : undefined;
const formatted = cause ? new Error(message, { cause }) : new Error(message);
Object.assign(formatted, {
hash: {
line,
loc: {
first_line: line,
last_line: line,
first_column: column,
last_column: column,
},
text: offendingToken?.text ?? '',
},
});
return formatted;
}
private unwrapRecognitionError(error: unknown): RecognitionException | undefined {
if (!error) {
return undefined;
}
if (error instanceof RecognitionException) {
return error;
}
if (error instanceof ParseCancellationException) {
const cause = (error as { cause?: unknown }).cause;
if (cause instanceof RecognitionException) {
return cause;
}
}
if (typeof error === 'object' && error !== null && 'cause' in error) {
const cause = (error as { cause?: unknown }).cause;
if (cause instanceof RecognitionException) {
return cause;
}
}
return undefined;
}
private resolveOffendingToken(
error: RecognitionException | undefined,
parser: ClassParser
): Token | undefined {
const candidate = (error as { offendingToken?: Token })?.offendingToken;
if (candidate) {
return candidate;
}
const current = (
parser as unknown as { getCurrentToken?: () => Token | undefined }
).getCurrentToken?.();
if (current) {
return current;
}
const stream = (
parser as unknown as { _input?: { LT?: (offset: number) => Token | undefined } }
)._input;
return stream?.LT?.(1);
}
}
const parserInstance = new ANTLRClassParser();
const exportedParser = {
parse: (text: string) => parserInstance.parse(text),
parser: parserInstance,
yy: null as ClassDbLike | null,
};
Object.defineProperty(exportedParser, 'yy', {
get() {
return parserInstance.yy;
},
set(value: ClassDbLike | null) {
parserInstance.yy = value;
},
});
export default exportedParser;

View File

@@ -1,31 +0,0 @@
// @ts-ignore: JISON parser lacks type definitions
import jisonParser from './classDiagram.jison';
import antlrParser from './antlr/antlr-parser.js';
const USE_ANTLR_PARSER = process.env.USE_ANTLR_PARSER === 'true';
const baseParser: any = USE_ANTLR_PARSER ? antlrParser : jisonParser;
const selectedParser: any = Object.create(baseParser);
selectedParser.parse = (source: string): unknown => {
const normalized = source.replace(/\r\n/g, '\n');
if (USE_ANTLR_PARSER) {
return antlrParser.parse(normalized);
}
return jisonParser.parse(normalized);
};
Object.defineProperty(selectedParser, 'yy', {
get() {
return baseParser.yy;
},
set(value) {
baseParser.yy = value;
},
enumerable: true,
configurable: true,
});
export default selectedParser;
export const parser = selectedParser;

View File

@@ -13,6 +13,30 @@ const getStyles = (options) =>
}
.cluster-label text {
fill: ${options.titleColor};
}
.cluster-label span {
color: ${options.titleColor};
}
.cluster-label span p {
background-color: transparent;
}
.cluster rect {
fill: ${options.clusterBkg};
stroke: ${options.clusterBorder};
stroke-width: 1px;
}
.cluster text {
fill: ${options.titleColor};
}
.cluster span {
color: ${options.titleColor};
}
.nodeLabel, .edgeLabel {
color: ${options.classText};
}

View File

@@ -66,12 +66,15 @@ accDescr\s*"{"\s* { this.begin("acc_descr_multili
\}\| return 'ONE_OR_MORE';
"one" return 'ONLY_ONE';
"only one" return 'ONLY_ONE';
"1" return 'ONLY_ONE';
[0-9]+\.[0-9]+ return 'DECIMAL_NUM';
"1"(?=\s+[A-Za-z_"']) return 'ONLY_ONE';
"1" return 'ENTITY_ONE';
[0-9]+ return 'NUM';
\|\| return 'ONLY_ONE';
o\| return 'ZERO_OR_ONE';
o\{ return 'ZERO_OR_MORE';
\|\{ return 'ONE_OR_MORE';
\s*u return 'MD_PARENT';
u(?=[\.\-\|]) return 'MD_PARENT';
\.\. return 'NON_IDENTIFYING';
\-\- return 'IDENTIFYING';
"to" return 'IDENTIFYING';
@@ -80,13 +83,15 @@ o\{ return 'ZERO_OR_MORE';
\-\. return 'NON_IDENTIFYING';
<style>([^\x00-\x7F]|\w|\-|\*)+ return 'STYLE_TEXT';
<style>';' return 'SEMI';
([^\x00-\x7F]|\w|\-|\*)+ return 'UNICODE_TEXT';
[0-9] return 'NUM';
([^\x00-\x7F]|\w|\-|\*|\.)+ return 'UNICODE_TEXT';
. return yytext[0];
<<EOF>> return 'EOF';
/lex
%left 'ONLY_ONE'
%left 'ZERO_OR_ONE' 'ZERO_OR_MORE' 'ONE_OR_MORE' 'MD_PARENT'
%start start
%% /* language grammar */
@@ -228,6 +233,9 @@ styleComponent: STYLE_TEXT | NUM | COLON | BRKT;
entityName
: 'ENTITY_NAME' { $$ = $1.replace(/"/g, ''); }
| 'UNICODE_TEXT' { $$ = $1; }
| 'NUM' { $$ = $1; }
| 'DECIMAL_NUM' { $$ = $1; }
| 'ENTITY_ONE' { $$ = $1; }
;
attributes

View File

@@ -1001,4 +1001,90 @@ describe('when parsing ER diagram it...', function () {
}
);
});
describe('syntax fixes for special characters and numbers', function () {
describe('standalone entity names', function () {
it('should allow number "1" as standalone entity', function () {
erDiagram.parser.parse(`erDiagram\nCUSTOMER }|..|{ DELIVERY-ADDRESS : has\n1`);
});
it('should allow character "u" as standalone entity', function () {
erDiagram.parser.parse(`erDiagram\nCUSTOMER }|..|{ DELIVERY-ADDRESS : has\nu`);
});
it('should allow decimal numbers as standalone entities', function () {
erDiagram.parser.parse(`erDiagram\nCUSTOMER }|..|{ DELIVERY-ADDRESS : has\n2.5`);
erDiagram.parser.parse(`erDiagram\nCUSTOMER }|..|{ DELIVERY-ADDRESS : has\n1.5`);
erDiagram.parser.parse(`erDiagram\nCUSTOMER }|..|{ DELIVERY-ADDRESS : has\n0.1`);
erDiagram.parser.parse(`erDiagram\nCUSTOMER }|..|{ DELIVERY-ADDRESS : has\n99.99`);
});
});
describe('entity names with attributes', function () {
it('should allow "u" as entity name with attributes', function () {
erDiagram.parser.parse(`erDiagram\nu {\nstring name\nint id\n}`);
});
it('should allow number "1" as entity name with attributes', function () {
erDiagram.parser.parse(`erDiagram\n1 {\nstring name\nint id\n}`);
});
it('should allow decimal numbers as entity names with attributes', function () {
erDiagram.parser.parse(`erDiagram\n2.5 {\nstring name\nint id\n}`);
erDiagram.parser.parse(`erDiagram\n1.5 {\nstring value\n}`);
});
});
describe('entity names in relationships', function () {
it('should allow "u" in relationships', function () {
erDiagram.parser.parse(`erDiagram\nCUSTOMER ||--|| u : has`);
erDiagram.parser.parse(`erDiagram\nu ||--|| ORDER : places`);
erDiagram.parser.parse(`erDiagram\nu ||--|| v : connects`);
});
it('should allow numbers in relationships', function () {
erDiagram.parser.parse(`erDiagram\nCUSTOMER ||--|| 1 : has`);
erDiagram.parser.parse(`erDiagram\n1 ||--|| ORDER : places`);
erDiagram.parser.parse(`erDiagram\n1 ||--|| 2 : connects`);
});
it('should allow decimal numbers in relationships', function () {
erDiagram.parser.parse(`erDiagram\nCUSTOMER ||--|| 2.5 : has`);
erDiagram.parser.parse(`erDiagram\n1.5 ||--|| ORDER : places`);
erDiagram.parser.parse(`erDiagram\n2.5 ||--|| 5.5 : connects`);
});
});
describe('mixed scenarios', function () {
it('should handle complex diagram with special entity names', function () {
erDiagram.parser.parse(
`erDiagram
CUSTOMER ||--o{ 1 : places
1 ||--|{ u : contains
u {
string name
int quantity
}
"2.5" ||--|| ORDER : processes
ORDER {
int id
date created
}
`
);
});
it('should handle attributes with numbers in names (but not starting)', function () {
erDiagram.parser.parse(
`erDiagram
ENTITY {
string name1
int value2
float point3_5
}
`
);
});
});
});
});

View File

@@ -1,251 +0,0 @@
lexer grammar FlowLexer;
// Virtual tokens for parser
tokens {
NODIR, DIR, PIPE, PE, SQE, DIAMOND_STOP, STADIUMEND, SUBROUTINEEND, CYLINDEREND, DOUBLECIRCLEEND,
ELLIPSE_END_TOKEN, TRAPEND, INVTRAPEND, PS, SQS, TEXT, CIRCLEEND, STR
}
// Lexer modes to match Jison's state-based lexing
// Based on Jison: %x string, md_string, acc_title, acc_descr, acc_descr_multiline, dir, vertex, text, etc.
// Shape data tokens - MUST be defined FIRST for absolute precedence over LINK_ID
// Match exactly "@{" like Jison does (no whitespace allowed between @ and {)
SHAPE_DATA_START: '@{' -> pushMode(SHAPE_DATA_MODE);
// Accessibility tokens
ACC_TITLE: 'accTitle' WS* ':' WS* -> pushMode(ACC_TITLE_MODE);
ACC_DESCR: 'accDescr' WS* ':' WS* -> pushMode(ACC_DESCR_MODE);
ACC_DESCR_MULTI: 'accDescr' WS* '{' WS* -> pushMode(ACC_DESCR_MULTILINE_MODE);
// Interactivity tokens
CALL: 'call' WS+ -> pushMode(CALLBACKNAME_MODE);
HREF: 'href' WS;
// CLICK token - matches 'click' + whitespace + node ID (like Jison)
CLICK: 'click' WS+ [A-Za-z0-9_]+ -> pushMode(CLICK_MODE);
// Graph declaration tokens - these trigger direction mode
GRAPH: ('flowchart-elk' | 'graph' | 'flowchart') -> pushMode(DIR_MODE);
SUBGRAPH: 'subgraph';
END: 'end';
// Link targets
LINK_TARGET: ('_self' | '_blank' | '_parent' | '_top');
// Style and class tokens
STYLE: 'style';
DEFAULT: 'default';
LINKSTYLE: 'linkStyle';
INTERPOLATE: 'interpolate';
CLASSDEF: 'classDef';
CLASS: 'class';
// String tokens - must come early to avoid conflicts with QUOTE
MD_STRING_START: '"`' -> pushMode(MD_STRING_MODE);
// Direction tokens - matches Jison's direction_tb, direction_bt, etc.
// These handle "direction TB", "direction BT", etc. statements within subgraphs
DIRECTION_TB: 'direction' WS+ 'TB' ~[\n]*;
DIRECTION_BT: 'direction' WS+ 'BT' ~[\n]*;
DIRECTION_RL: 'direction' WS+ 'RL' ~[\n]*;
DIRECTION_LR: 'direction' WS+ 'LR' ~[\n]*;
// ELLIPSE_START must come very early to avoid conflicts with PAREN_START
ELLIPSE_START: '(-' -> pushMode(ELLIPSE_TEXT_MODE);
// Link ID token - matches edge IDs like "e1@" when followed by link patterns
// Uses a negative lookahead pattern to match the Jison lookahead (?=[^\{\"])
// This prevents LINK_ID from matching "e1@{" and allows SHAPE_DATA_START to match "@{" correctly
// The pattern matches any non-whitespace followed by @ but only when NOT followed by { or "
LINK_ID: ~[ \t\r\n"]+ '@' {this.inputStream.LA(1) != '{'.charCodeAt(0) && this.inputStream.LA(1) != '"'.charCodeAt(0)}?;
NUM: [0-9]+;
BRKT: '#';
STYLE_SEPARATOR: ':::';
COLON: ':';
AMP: '&';
SEMI: ';';
COMMA: ',';
MULT: '*';
// Edge patterns - these are complex in Jison, need careful translation
// Normal edges without text: A-->B (matches Jison: \s*[xo<]?\-\-+[-xo>]\s*) - must come first to avoid conflicts
LINK_NORMAL: WS* [xo<]? '--' '-'* [-xo>] WS*;
// Normal edges with text: A-- text ---B (matches Jison: <INITIAL>\s*[xo<]?\-\-\s* -> START_LINK)
START_LINK_NORMAL: WS* [xo<]? '--' WS+ -> pushMode(EDGE_TEXT_MODE);
// Normal edges with text (no space): A--text---B - match -- followed by any non-dash character
START_LINK_NORMAL_NOSPACE: WS* [xo<]? '--' -> pushMode(EDGE_TEXT_MODE);
// Pipe-delimited edge text: A--x| (linkStatement for arrowText) - matches Jison linkStatement pattern
LINK_STATEMENT_NORMAL: WS* [xo<]? '--' '-'* [xo<]?;
// Thick edges with text: A== text ===B (matches Jison: <INITIAL>\s*[xo<]?\=\=\s* -> START_LINK)
START_LINK_THICK: WS* [xo<]? '==' WS+ -> pushMode(THICK_EDGE_TEXT_MODE);
// Thick edges without text: A==>B (matches Jison: \s*[xo<]?\=\=+[=xo>]\s*)
LINK_THICK: WS* [xo<]? '==' '='* [=xo>] WS*;
LINK_STATEMENT_THICK: WS* [xo<]? '==' '='* [xo<]?;
// Dotted edges with text: A-. text .->B (matches Jison: <INITIAL>\s*[xo<]?\-\.\s* -> START_LINK)
START_LINK_DOTTED: WS* [xo<]? '-.' WS* -> pushMode(DOTTED_EDGE_TEXT_MODE);
// Dotted edges without text: A-.->B (matches Jison: \s*[xo<]?\-?\.+\-[xo>]?\s*)
LINK_DOTTED: WS* [xo<]? '-' '.'+ '-' [xo>]? WS*;
LINK_STATEMENT_DOTTED: WS* [xo<]? '-' '.'+ [xo<]?;
// Special link
LINK_INVISIBLE: WS* '~~' '~'+ WS*;
// PIPE handling: push to TEXT_MODE to handle content between pipes
// Put this AFTER link patterns to avoid interference with edge parsing
PIPE: '|' -> pushMode(TEXT_MODE);
// Vertex shape tokens - MUST come first (longer patterns before shorter ones)
DOUBLECIRCLE_START: '(((' -> pushMode(TEXT_MODE);
CIRCLE_START: '((' -> pushMode(TEXT_MODE);
// ELLIPSE_START moved to top of file for precedence
// Basic shape tokens - shorter patterns after longer ones
SQUARE_START: '[' -> pushMode(TEXT_MODE), type(SQS);
// PAREN_START must come AFTER ELLIPSE_START to avoid consuming '(' before '(-' can match
PAREN_START: '(' -> pushMode(TEXT_MODE), type(PS);
DIAMOND_START: '{' -> pushMode(TEXT_MODE);
// PIPE_START removed - conflicts with PIPE token. Context-sensitive pipe handling in TEXT_MODE
STADIUM_START: '([' -> pushMode(TEXT_MODE);
SUBROUTINE_START: '[[' -> pushMode(TEXT_MODE);
VERTEX_WITH_PROPS_START: '[|';
CYLINDER_START: '[(' -> pushMode(TEXT_MODE);
TRAP_START: '[/' -> pushMode(TRAP_TEXT_MODE);
INVTRAP_START: '[\\' -> pushMode(TRAP_TEXT_MODE);
// Other basic shape tokens
TAGSTART: '<';
TAGEND: '>' -> pushMode(TEXT_MODE);
UP: '^';
DOWN: 'v';
MINUS: '-';
// Node string - allow dashes with lookahead to prevent conflicts with links (matches Jison pattern)
// Pattern: ([A-Za-z0-9!"\#$%&'*+\.`?\\_\/]|\-(?=[^\>\-\.])|=(?!=))+
NODE_STRING: ([A-Za-z0-9!"#$%&'*+.`?\\/_] | '-' ~[>\-.] | '=' ~'=')+;
// Unicode text support (simplified from Jison's extensive Unicode ranges)
UNICODE_TEXT: [\u00AA\u00B5\u00BA\u00C0-\u00D6\u00D8-\u00F6\u00F8-\u02C1\u02C6-\u02D1\u02E0-\u02E4\u02EC\u02EE]+;
// String handling - matches Jison's <*>["] behavior (any mode can enter string mode)
QUOTE: '"' -> pushMode(STRING_MODE), skip;
NEWLINE: ('\r'? '\n')+;
WS: [ \t]+;
// Lexer modes
mode ACC_TITLE_MODE;
ACC_TITLE_VALUE: (~[\n;#])* -> popMode;
mode ACC_DESCR_MODE;
ACC_DESCR_VALUE: (~[\n;#])* -> popMode;
mode ACC_DESCR_MULTILINE_MODE;
ACC_DESCR_MULTILINE_END: '}' -> popMode;
ACC_DESCR_MULTILINE_VALUE: (~[}])*;
mode SHAPE_DATA_MODE;
SHAPE_DATA_STRING_START: '"' -> pushMode(SHAPE_DATA_STRING_MODE);
SHAPE_DATA_CONTENT: (~[}"]+);
SHAPE_DATA_END: '}' -> popMode;
mode SHAPE_DATA_STRING_MODE;
SHAPE_DATA_STRING_END: '"' -> popMode;
SHAPE_DATA_STRING_CONTENT: (~["]+);
mode CALLBACKNAME_MODE;
CALLBACKNAME_PAREN_EMPTY: '(' WS* ')' -> popMode, type(CALLBACKARGS);
CALLBACKNAME_PAREN_START: '(' -> popMode, pushMode(CALLBACKARGS_MODE);
CALLBACKNAME: (~[(])*;
mode CALLBACKARGS_MODE;
CALLBACKARGS_END: ')' -> popMode;
CALLBACKARGS: (~[)])*;
mode CLICK_MODE;
CLICK_NEWLINE: ('\r'? '\n')+ -> popMode, type(NEWLINE);
CLICK_WS: WS -> skip;
CLICK_CALL: 'call' WS+ -> type(CALL), pushMode(CALLBACKNAME_MODE);
CLICK_HREF: 'href' -> type(HREF);
CLICK_STR: '"' (~["])* '"' -> type(STR);
CLICK_LINK_TARGET: ('_self' | '_blank' | '_parent' | '_top') -> type(LINK_TARGET);
CLICK_CALLBACKNAME: [A-Za-z0-9_]+ -> type(CALLBACKNAME);
mode DIR_MODE;
DIR_NEWLINE: ('\r'? '\n')* WS* '\n' -> popMode, type(NODIR);
DIR_LR: WS* 'LR' -> popMode, type(DIR);
DIR_RL: WS* 'RL' -> popMode, type(DIR);
DIR_TB: WS* 'TB' -> popMode, type(DIR);
DIR_BT: WS* 'BT' -> popMode, type(DIR);
DIR_TD: WS* 'TD' -> popMode, type(DIR);
DIR_BR: WS* 'BR' -> popMode, type(DIR);
DIR_LEFT: WS* '<' -> popMode, type(DIR);
DIR_RIGHT: WS* '>' -> popMode, type(DIR);
DIR_UP: WS* '^' -> popMode, type(DIR);
DIR_DOWN: WS* 'v' -> popMode, type(DIR);
mode STRING_MODE;
STRING_END: '"' -> popMode, skip;
STR: (~["]+);
mode MD_STRING_MODE;
MD_STRING_END: '`"' -> popMode;
MD_STR: (~[`"])+;
mode TEXT_MODE;
// Allow nested diamond starts (for hexagon nodes)
TEXT_DIAMOND_START: '{' -> pushMode(TEXT_MODE), type(DIAMOND_START);
// Handle nested parentheses and brackets like Jison
TEXT_PAREN_START: '(' -> pushMode(TEXT_MODE), type(PS);
TEXT_SQUARE_START: '[' -> pushMode(TEXT_MODE), type(SQS);
// Handle quoted strings in text mode - matches Jison's <*>["] behavior
// Skip the opening quote token, just push to STRING_MODE like Jison does
TEXT_STRING_START: '"' -> pushMode(STRING_MODE), skip;
// Handle closing pipe in text mode - pop back to default mode
TEXT_PIPE_END: '|' -> popMode, type(PIPE);
TEXT_PAREN_END: ')' -> popMode, type(PE);
TEXT_SQUARE_END: ']' -> popMode, type(SQE);
TEXT_DIAMOND_END: '}' -> popMode, type(DIAMOND_STOP);
TEXT_STADIUM_END: '])' -> popMode, type(STADIUMEND);
TEXT_SUBROUTINE_END: ']]' -> popMode, type(SUBROUTINEEND);
TEXT_CYLINDER_END: ')]' -> popMode, type(CYLINDEREND);
TEXT_DOUBLECIRCLE_END: ')))' -> popMode, type(DOUBLECIRCLEEND);
TEXT_CIRCLE_END: '))' -> popMode, type(CIRCLEEND);
// Now allow all characters except the specific end tokens for this mode
TEXT_CONTENT: (~[(){}|\]"])+;
mode ELLIPSE_TEXT_MODE;
ELLIPSE_END: '-)' -> popMode, type(ELLIPSE_END_TOKEN);
ELLIPSE_TEXT: (~[-)])+;
mode TRAP_TEXT_MODE;
TRAP_END_BRACKET: '\\]' -> popMode, type(TRAPEND);
INVTRAP_END_BRACKET: '/]' -> popMode, type(INVTRAPEND);
TRAP_TEXT: (~[\\/\]])+;
mode EDGE_TEXT_MODE;
// Handle space-delimited pattern: A-- text ----B or A-- text -->B (matches Jison: [^-]|\-(?!\-)+)
// Must handle both cases: extra dashes without arrow (----) and dashes with arrow (-->)
EDGE_TEXT_LINK_END: WS* '--' '-'* [-xo>]? WS* -> popMode, type(LINK_NORMAL);
// Match any character including spaces and single dashes, but not double dashes
EDGE_TEXT: (~[-] | '-' ~[-])+;
mode THICK_EDGE_TEXT_MODE;
// Handle thick edge patterns: A== text ====B or A== text ==>B
THICK_EDGE_TEXT_LINK_END: WS* '==' '='* [=xo>]? WS* -> popMode, type(LINK_THICK);
THICK_EDGE_TEXT: (~[=] | '=' ~[=])+;
mode DOTTED_EDGE_TEXT_MODE;
// Handle dotted edge patterns: A-. text ...-B or A-. text .->B
DOTTED_EDGE_TEXT_LINK_END: WS* '.'+ '-' [xo>]? WS* -> popMode, type(LINK_DOTTED);
DOTTED_EDGE_TEXT: ~[.]+;

View File

@@ -1,286 +0,0 @@
parser grammar FlowParser;
options {
tokenVocab = FlowLexer;
}
// Entry point - matches Jison's "start: graphConfig document"
start: graphConfig document;
// Document structure - matches Jison's document rule
document:
line*
;
// Line structure - matches Jison's line rule
line:
statement
| SEMI
| NEWLINE
| WS
;
// Graph configuration - matches Jison's graphConfig rule
graphConfig:
WS graphConfig
| NEWLINE graphConfig
| GRAPH NODIR // Default TB direction
| GRAPH DIR firstStmtSeparator // Explicit direction
;
// Statement types - matches Jison's statement rule
statement:
vertexStatement separator
| standaloneVertex separator // For edge property statements like e1@{curve: basis}
| styleStatement separator
| linkStyleStatement separator
| classDefStatement separator
| classStatement separator
| clickStatement separator
| subgraphStatement separator
| direction
| accTitle
| accDescr
;
// Separators
separator: NEWLINE | SEMI | EOF;
firstStmtSeparator: SEMI | NEWLINE | spaceList NEWLINE;
spaceList: WS spaceList | WS;
// Vertex statement - matches Jison's vertexStatement rule
vertexStatement:
vertexStatement link node shapeData // Chain with shape data
| vertexStatement link node // Chain without shape data
| vertexStatement link node spaceList // Chain with trailing space
| node spaceList // Single node with space
| node shapeData // Single node with shape data
| node // Single node
;
// Standalone vertex - for edge property statements like e1@{curve: basis}
standaloneVertex:
NODE_STRING shapeData
| LINK_ID shapeData // For edge IDs like e1@{curve: basis}
;
// Node definition - matches Jison's node rule
node:
styledVertex
| node shapeData spaceList AMP spaceList styledVertex
| node spaceList AMP spaceList styledVertex
;
// Styled vertex - matches Jison's styledVertex rule
styledVertex:
vertex
| vertex STYLE_SEPARATOR idString
;
// Vertex shapes - matches Jison's vertex rule
vertex:
idString SQS text SQE // Square: [text]
| idString DOUBLECIRCLE_START text DOUBLECIRCLEEND // Double circle: (((text)))
| idString CIRCLE_START text CIRCLEEND // Circle: ((text))
| idString ELLIPSE_START text ELLIPSE_END_TOKEN // Ellipse: (-text-)
| idString STADIUM_START text STADIUMEND // Stadium: ([text])
| idString SUBROUTINE_START text SUBROUTINEEND // Subroutine: [[text]]
| idString VERTEX_WITH_PROPS_START NODE_STRING COLON NODE_STRING PIPE text SQE // Props: [|field:value|text]
| idString CYLINDER_START text CYLINDEREND // Cylinder: [(text)]
| idString PS text PE // Round: (text)
| idString DIAMOND_START text DIAMOND_STOP // Diamond: {text}
| idString DIAMOND_START DIAMOND_START text DIAMOND_STOP DIAMOND_STOP // Hexagon: {{text}}
| idString TAGEND text SQE // Odd: >text]
| idString TRAP_START text TRAPEND // Trapezoid: [/text\]
| idString INVTRAP_START text INVTRAPEND // Inv trapezoid: [\text/]
| idString TRAP_START text INVTRAPEND // Lean right: [/text/]
| idString INVTRAP_START text TRAPEND // Lean left: [\text\]
| idString // Plain node
;
// Link definition - matches Jison's link rule
link:
linkStatement arrowText spaceList?
| linkStatement
| START_LINK_NORMAL edgeText LINK_NORMAL
| START_LINK_NORMAL_NOSPACE edgeText LINK_NORMAL
| START_LINK_THICK edgeText LINK_THICK
| START_LINK_DOTTED edgeText LINK_DOTTED
| LINK_ID START_LINK_NORMAL edgeText LINK_NORMAL
| LINK_ID START_LINK_NORMAL_NOSPACE edgeText LINK_NORMAL
| LINK_ID START_LINK_THICK edgeText LINK_THICK
| LINK_ID START_LINK_DOTTED edgeText LINK_DOTTED
;
// Link statement - matches Jison's linkStatement rule
linkStatement:
LINK_NORMAL
| LINK_THICK
| LINK_DOTTED
| LINK_INVISIBLE
| LINK_STATEMENT_NORMAL
| LINK_STATEMENT_DOTTED
| LINK_ID LINK_NORMAL
| LINK_ID LINK_THICK
| LINK_ID LINK_DOTTED
| LINK_ID LINK_INVISIBLE
| LINK_ID LINK_STATEMENT_NORMAL
| LINK_ID LINK_STATEMENT_THICK
;
// Edge text - matches Jison's edgeText rule
edgeText:
edgeTextToken
| edgeText edgeTextToken
| stringLiteral
| MD_STR
;
// Arrow text - matches Jison's arrowText rule
arrowText:
PIPE text PIPE
;
// Text definition - matches Jison's text rule
text:
textToken
| text textToken
| stringLiteral
| MD_STR
| NODE_STRING
| TEXT_CONTENT
| ELLIPSE_TEXT
| TRAP_TEXT
;
// Shape data - matches Jison's shapeData rule
shapeData:
SHAPE_DATA_START shapeDataContent SHAPE_DATA_END
;
shapeDataContent:
shapeDataContent SHAPE_DATA_CONTENT
| shapeDataContent SHAPE_DATA_STRING_START SHAPE_DATA_STRING_CONTENT SHAPE_DATA_STRING_END
| SHAPE_DATA_CONTENT
| SHAPE_DATA_STRING_START SHAPE_DATA_STRING_CONTENT SHAPE_DATA_STRING_END
|
;
// Style statement - matches Jison's styleStatement rule
styleStatement:
STYLE WS idString WS stylesOpt
;
// Link style statement - matches Jison's linkStyleStatement rule
linkStyleStatement:
LINKSTYLE WS DEFAULT WS stylesOpt
| LINKSTYLE WS numList WS stylesOpt
| LINKSTYLE WS DEFAULT WS INTERPOLATE WS alphaNum WS stylesOpt
| LINKSTYLE WS numList WS INTERPOLATE WS alphaNum WS stylesOpt
| LINKSTYLE WS DEFAULT WS INTERPOLATE WS alphaNum
| LINKSTYLE WS numList WS INTERPOLATE WS alphaNum
;
// Class definition statement - matches Jison's classDefStatement rule
classDefStatement:
CLASSDEF WS idString WS stylesOpt
;
// Class statement - matches Jison's classStatement rule
classStatement:
CLASS WS idString WS idString
;
// String rule to handle STR patterns
stringLiteral:
STR
;
// Click statement - matches Jison's clickStatement rule
// CLICK token now contains both 'click' and node ID (like Jison)
clickStatement:
CLICK CALLBACKNAME
| CLICK CALLBACKNAME stringLiteral
| CLICK CALLBACKNAME CALLBACKARGS
| CLICK CALLBACKNAME CALLBACKARGS stringLiteral
| CLICK CALL CALLBACKNAME
| CLICK CALL CALLBACKNAME stringLiteral
| CLICK CALL CALLBACKNAME CALLBACKARGS
| CLICK CALL CALLBACKNAME CALLBACKARGS stringLiteral
| CLICK HREF stringLiteral
| CLICK HREF stringLiteral stringLiteral
| CLICK HREF stringLiteral LINK_TARGET
| CLICK HREF stringLiteral stringLiteral LINK_TARGET
| CLICK stringLiteral // CLICK STR - direct click with URL
| CLICK stringLiteral stringLiteral // CLICK STR STR - click with URL and tooltip
| CLICK stringLiteral LINK_TARGET // CLICK STR LINK_TARGET - click with URL and target
| CLICK stringLiteral stringLiteral LINK_TARGET // CLICK STR STR LINK_TARGET - click with URL, tooltip, and target
;
// Subgraph statement - matches Jison's subgraph rules
subgraphStatement:
SUBGRAPH WS textNoTags SQS text SQE separator document END
| SUBGRAPH WS textNoTags separator document END
| SUBGRAPH separator document END
;
// Direction statement - matches Jison's direction rule
direction:
DIRECTION_TB
| DIRECTION_BT
| DIRECTION_RL
| DIRECTION_LR
;
// Accessibility statements
accTitle: ACC_TITLE ACC_TITLE_VALUE;
accDescr: ACC_DESCR ACC_DESCR_VALUE | ACC_DESCR_MULTI ACC_DESCR_MULTILINE_VALUE ACC_DESCR_MULTILINE_END;
// Number list - matches Jison's numList rule
numList:
NUM
| numList COMMA NUM
;
// Styles - matches Jison's stylesOpt rule
stylesOpt:
style
| stylesOpt COMMA style
;
// Style components - matches Jison's style rule
style:
styleComponent
| style styleComponent
;
// Style component - matches Jison's styleComponent rule
styleComponent: NUM | NODE_STRING | COLON | WS | BRKT | STYLE | MULT | MINUS;
// Token definitions - matches Jison's token lists
idString:
idStringToken
| idString idStringToken
;
alphaNum:
alphaNumToken
| alphaNum alphaNumToken
;
textNoTags:
textNoTagsToken
| textNoTags textNoTagsToken
| stringLiteral
| MD_STR
;
// Token types - matches Jison's token definitions
idStringToken: NUM | NODE_STRING | DOWN | MINUS | DEFAULT | COMMA | COLON | AMP | BRKT | MULT | UNICODE_TEXT;
textToken: TEXT_CONTENT | TAGSTART | TAGEND | UNICODE_TEXT | NODE_STRING | WS;
textNoTagsToken: NUM | NODE_STRING | WS | MINUS | AMP | UNICODE_TEXT | COLON | MULT | BRKT | keywords | START_LINK_NORMAL;
edgeTextToken: EDGE_TEXT | THICK_EDGE_TEXT | DOTTED_EDGE_TEXT | UNICODE_TEXT;
alphaNumToken: NUM | UNICODE_TEXT | NODE_STRING | DIR | DOWN | MINUS | COMMA | COLON | AMP | BRKT | MULT;
// Keywords - matches Jison's keywords rule
keywords: STYLE | LINKSTYLE | CLASSDEF | CLASS | CLICK | GRAPH | DIR | SUBGRAPH | END | DOWN | UP;

View File

@@ -1,15 +0,0 @@
const { CharStream } = require('antlr4ng');
const { FlowLexer } = require('./generated/FlowLexer.ts');
const input = 'D@{ shape: rounded }';
console.log('Input:', input);
const chars = CharStream.fromString(input);
const lexer = new FlowLexer(chars);
const tokens = lexer.getAllTokens();
console.log('Tokens:');
for (let i = 0; i < tokens.length; i++) {
const token = tokens[i];
console.log(` [${i}] Type: ${token.type}, Text: '${token.text}', Channel: ${token.channel}`);
}

View File

@@ -140,6 +140,7 @@ that id.
.*direction\s+BT[^\n]* return 'direction_bt';
.*direction\s+RL[^\n]* return 'direction_rl';
.*direction\s+LR[^\n]* return 'direction_lr';
.*direction\s+TD[^\n]* return 'direction_td';
[^\s\"]+\@(?=[^\{\"]) { return 'LINK_ID'; }
[0-9]+ return 'NUM';
@@ -626,6 +627,8 @@ direction
{ $$={stmt:'dir', value:'RL'};}
| direction_lr
{ $$={stmt:'dir', value:'LR'};}
| direction_td
{ $$={stmt:'dir', value:'TD'};}
;
%%

View File

@@ -1,22 +1,12 @@
// @ts-ignore: JISON doesn't support types
import flowJisonParser from './flow.jison';
import antlrParser from './antlr/antlr-parser.js';
// Configuration flag to switch between parsers
// Set to true to test ANTLR parser, false to use original Jison parser
const USE_ANTLR_PARSER = process.env.USE_ANTLR_PARSER === 'true';
const newParser = Object.assign({}, USE_ANTLR_PARSER ? antlrParser : flowJisonParser);
const newParser = Object.assign({}, flowJisonParser);
newParser.parse = (src: string): unknown => {
// remove the trailing whitespace after closing curly braces when ending a line break
const newSrc = src.replace(/}\s*\n/g, '}\n');
if (USE_ANTLR_PARSER) {
return antlrParser.parse(newSrc);
} else {
return flowJisonParser.parse(newSrc);
}
return flowJisonParser.parse(newSrc);
};
export default newParser;

View File

@@ -309,4 +309,21 @@ describe('when parsing subgraphs', function () {
expect(subgraphA.nodes).toContain('a');
expect(subgraphA.nodes).not.toContain('c');
});
it('should correctly parse direction TD inside a subgraph', function () {
const res = flow.parser.parse(`
graph LR
subgraph WithTD
direction TD
A1 --> A2
end
`);
const subgraphs = flow.parser.yy.getSubGraphs();
expect(subgraphs.length).toBe(1);
const subgraph = subgraphs[0];
expect(subgraph.dir).toBe('TD');
expect(subgraph.nodes).toContain('A1');
expect(subgraph.nodes).toContain('A2');
});
});

View File

@@ -268,7 +268,9 @@ const fixTaskDates = function (startTime, endTime, dateFormat, excludes, include
const getStartDate = function (prevTime, dateFormat, str) {
str = str.trim();
if ((dateFormat.trim() === 'x' || dateFormat.trim() === 'X') && /^\d+$/.test(str)) {
return new Date(Number(str));
}
// Test for after
const afterRePattern = /^after\s+(?<ids>[\d\w- ]+)/;
const afterStatement = afterRePattern.exec(str);

View File

@@ -37,6 +37,7 @@ export class MindmapDB {
private nodes: MindmapNode[] = [];
private count = 0;
private elements: Record<number, D3Element> = {};
private baseLevel?: number;
public readonly nodeType: typeof nodeType;
constructor() {
@@ -54,6 +55,7 @@ export class MindmapDB {
this.nodes = [];
this.count = 0;
this.elements = {};
this.baseLevel = undefined;
}
public getParent(level: number): MindmapNode | null {
@@ -72,6 +74,17 @@ export class MindmapDB {
public addNode(level: number, id: string, descr: string, type: number): void {
log.info('addNode', level, id, descr, type);
let isRoot = false;
if (this.nodes.length === 0) {
this.baseLevel = level;
level = 0;
isRoot = true;
} else if (this.baseLevel !== undefined) {
level = level - this.baseLevel;
isRoot = false;
}
const conf = getConfig();
let padding = conf.mindmap?.padding ?? defaultConfig.mindmap.padding;
@@ -92,6 +105,7 @@ export class MindmapDB {
children: [],
width: conf.mindmap?.maxNodeWidth ?? defaultConfig.mindmap.maxNodeWidth,
padding,
isRoot,
};
const parent = this.getParent(level);
@@ -99,7 +113,7 @@ export class MindmapDB {
parent.children.push(node);
this.nodes.push(node);
} else {
if (this.nodes.length === 0) {
if (isRoot) {
this.nodes.push(node);
} else {
throw new Error(
@@ -204,8 +218,7 @@ export class MindmapDB {
// Build CSS classes for the node
const cssClasses = ['mindmap-node'];
// Add section-specific classes
if (node.level === 0) {
if (node.isRoot === true) {
// Root node gets special classes
cssClasses.push('section-root', 'section--1');
} else if (node.section !== undefined) {

View File

@@ -15,6 +15,7 @@ export interface MindmapNode {
icon?: string;
x?: number;
y?: number;
isRoot?: boolean;
}
export type FilledMindMapNode = RequiredDeep<MindmapNode>;

View File

@@ -16,7 +16,7 @@ const draw: DrawDefinition = (_text, id, _version, diagram: Diagram) => {
const svgWidth = bitWidth * bitsPerRow + 2;
const svg: SVG = selectSvgElement(id);
svg.attr('viewbox', `0 0 ${svgWidth} ${svgHeight}`);
svg.attr('viewBox', `0 0 ${svgWidth} ${svgHeight}`);
configureSvgSize(svg, svgHeight, svgWidth, config.useMaxWidth);
for (const [word, packet] of words.entries()) {

View File

@@ -2,6 +2,7 @@ import type { Diagram } from '../../Diagram.js';
import type { RadarDiagramConfig } from '../../config.type.js';
import type { DiagramRenderer, DrawDefinition, SVG, SVGGroup } from '../../diagram-api/types.js';
import { selectSvgElement } from '../../rendering-util/selectSvgElement.js';
import { configureSvgSize } from '../../setupGraphViewbox.js';
import type { RadarDB, RadarAxis, RadarCurve } from './types.js';
const draw: DrawDefinition = (_text, id, _version, diagram: Diagram) => {
@@ -53,11 +54,9 @@ const drawFrame = (svg: SVG, config: Required<RadarDiagramConfig>): SVGGroup =>
x: config.marginLeft + config.width / 2,
y: config.marginTop + config.height / 2,
};
// Initialize the SVG
svg
.attr('viewbox', `0 0 ${totalWidth} ${totalHeight}`)
.attr('width', totalWidth)
.attr('height', totalHeight);
configureSvgSize(svg, totalHeight, totalWidth, config.useMaxWidth ?? true);
svg.attr('viewBox', `0 0 ${totalWidth} ${totalHeight}`);
// g element to center the radar chart
return svg.append('g').attr('transform', `translate(${center.x}, ${center.y})`);
};

View File

@@ -1,200 +0,0 @@
lexer grammar SequenceLexer;
tokens { AS }
// Comments (skip)
HASH_COMMENT: '#' ~[\r\n]* -> skip;
PERCENT_COMMENT1: '%%' ~[\r\n]* -> skip;
PERCENT_COMMENT2: ~[}] '%%' ~[\r\n]* -> skip;
// Whitespace and newline
NEWLINE: ('\r'? '\n')+;
WS: [ \t]+ -> skip;
// Punctuation and simple symbols
COMMA: ',';
SEMI: ';' -> type(NEWLINE);
PLUS: '+';
MINUS: '-';
// Core keywords
SD: 'sequenceDiagram';
PARTICIPANT: 'participant' -> pushMode(ID);
PARTICIPANT_ACTOR: 'actor' -> pushMode(ID);
CREATE: 'create';
DESTROY: 'destroy';
BOX: 'box' -> pushMode(LINE);
// Blocks and control flow
LOOP: 'loop' -> pushMode(LINE);
RECT: 'rect' -> pushMode(LINE);
OPT: 'opt' -> pushMode(LINE);
ALT: 'alt' -> pushMode(LINE);
ELSE: 'else' -> pushMode(LINE);
PAR: 'par' -> pushMode(LINE);
PAR_OVER: 'par_over' -> pushMode(LINE);
AND: 'and' -> pushMode(LINE);
CRITICAL: 'critical' -> pushMode(LINE);
OPTION: 'option' -> pushMode(LINE);
BREAK: 'break' -> pushMode(LINE);
END: 'end';
// Note and placement
LEFT_OF: 'left' WS+ 'of';
RIGHT_OF: 'right' WS+ 'of';
LINKS: 'links';
LINK: 'link';
PROPERTIES: 'properties';
DETAILS: 'details';
OVER: 'over';
// Accept both Note and note
NOTE: [Nn][Oo][Tt][Ee];
// Lifecycle
ACTIVATE: 'activate';
DEACTIVATE: 'deactivate';
// Titles and accessibility
LEGACY_TITLE: 'title' WS* ':' WS* (~[\r\n;#])*;
TITLE: 'title' -> pushMode(LINE);
ACC_TITLE: 'accTitle' WS* ':' WS* -> pushMode(ACC_TITLE_MODE);
ACC_DESCR: 'accDescr' WS* ':' WS* -> pushMode(ACC_DESCR_MODE);
ACC_DESCR_MULTI: 'accDescr' WS* '{' WS* -> pushMode(ACC_DESCR_MULTILINE_MODE);
// Directives
AUTONUMBER: 'autonumber';
OFF: 'off';
// Config block @{ ... }
CONFIG_START: '@{' -> pushMode(CONFIG_MODE);
// Arrows (must come before ACTOR)
SOLID_ARROW: '->>';
BIDIRECTIONAL_SOLID_ARROW: '<<->>';
DOTTED_ARROW: '-->>';
BIDIRECTIONAL_DOTTED_ARROW: '<<-->>';
SOLID_OPEN_ARROW: '->';
DOTTED_OPEN_ARROW: '-->';
SOLID_CROSS: '-x';
DOTTED_CROSS: '--x';
SOLID_POINT: '-)';
DOTTED_POINT: '--)';
// Text after colon up to newline or comment delimiter ; or #
TXT: ':' (~[\r\n;#])*;
// Actor identifiers: allow hyphen runs, but forbid -x, --x, -), --)
fragment IDCHAR_NO_HYPHEN: ~[+<>:\n,;@# \t-];
fragment ALNUM: [A-Za-z0-9_];
fragment ALNUM_NOT_X_RPAREN: [A-WYZa-wyz0-9_];
fragment H3: '-' '-' '-' ('-')*; // three or more hyphens
ACTOR: IDCHAR_NO_HYPHEN+
(
'-' ALNUM_NOT_X_RPAREN+
| '-' '-' ALNUM_NOT_X_RPAREN+
| H3 ALNUM+
)*;
// Modes to mirror Jison stateful lexing
mode ACC_TITLE_MODE;
ACC_TITLE_VALUE: (~[\r\n;#])* -> popMode;
mode ACC_DESCR_MODE;
ACC_DESCR_VALUE: (~[\r\n;#])* -> popMode;
mode ACC_DESCR_MULTILINE_MODE;
ACC_DESCR_MULTILINE_END: '}' -> popMode;
ACC_DESCR_MULTILINE_VALUE: (~['}'])*;
mode CONFIG_MODE;
CONFIG_CONTENT: (~[}])+;
CONFIG_END: '}' -> popMode;
// ID mode: after participant/actor, allow same-line WS/comments; pop on newline
mode ID;
ID_NEWLINE: ('\r'? '\n')+ -> popMode, type(NEWLINE);
ID_SEMI: ';' -> popMode, type(NEWLINE);
ID_WS: [ \t]+ -> skip;
ID_HASH_COMMENT: '#' ~[\r\n]* -> skip;
ID_PERCENT_COMMENT: '%%' ~[\r\n]* -> skip;
// recognize 'as' in ID mode and switch to ALIAS
ID_AS: 'as' -> type(AS), pushMode(ALIAS);
// inline config in ID mode
ID_CONFIG_START: '@{' -> type(CONFIG_START), pushMode(CONFIG_MODE);
// arrows first to ensure proper splitting before actor
ID_BIDIR_SOLID_ARROW: '<<->>' -> type(BIDIRECTIONAL_SOLID_ARROW);
ID_BIDIR_DOTTED_ARROW: '<<-->>' -> type(BIDIRECTIONAL_DOTTED_ARROW);
ID_SOLID_ARROW: '->>' -> type(SOLID_ARROW);
ID_DOTTED_ARROW: '-->>' -> type(DOTTED_ARROW);
ID_SOLID_OPEN_ARROW: '->' -> type(SOLID_OPEN_ARROW);
ID_DOTTED_OPEN_ARROW: '-->' -> type(DOTTED_OPEN_ARROW);
ID_SOLID_CROSS: '-x' -> type(SOLID_CROSS);
ID_DOTTED_CROSS: '--x' -> type(DOTTED_CROSS);
ID_SOLID_POINT: '-)' -> type(SOLID_POINT);
ID_DOTTED_POINT: '--)' -> type(DOTTED_POINT);
ID_ACTOR: IDCHAR_NO_HYPHEN+
(
'-' ALNUM_NOT_X_RPAREN+
| '--' ALNUM_NOT_X_RPAREN+
| '-' '-' '-' '-'* ALNUM+
)* -> type(ACTOR);
// ALIAS mode: after 'as', capture rest-of-line as TXT (alias display)
mode ALIAS;
ALIAS_NEWLINE: ('\r'? '\n')+ -> popMode, popMode, type(NEWLINE);
ALIAS_SEMI: ';' -> popMode, popMode, type(NEWLINE);
ALIAS_WS: [ \t]+ -> skip;
ALIAS_HASH_COMMENT: '#' ~[\r\n]* -> skip;
ALIAS_PERCENT_COMMENT: '%%' ~[\r\n]* -> skip;
// inline config allowed after alias as well
ALIAS_CONFIG_START: '@{' -> type(CONFIG_START), pushMode(CONFIG_MODE);
// Prefer capturing the remainder of the line as TXT for alias/description
ALIAS_TXT: (~[\r\n;#])+ -> type(TXT);
// arrows before actor pattern to split properly (kept for parity, though not used after AS)
ALIAS_BIDIR_SOLID_ARROW: '<<->>' -> type(BIDIRECTIONAL_SOLID_ARROW);
ALIAS_BIDIR_DOTTED_ARROW: '<<-->>' -> type(BIDIRECTIONAL_DOTTED_ARROW);
ALIAS_SOLID_ARROW: '->>' -> type(SOLID_ARROW);
ALIAS_DOTTED_ARROW: '-->>' -> type(DOTTED_ARROW);
ALIAS_SOLID_OPEN_ARROW: '->' -> type(SOLID_OPEN_ARROW);
ALIAS_DOTTED_OPEN_ARROW: '-->' -> type(DOTTED_OPEN_ARROW);
ALIAS_SOLID_CROSS: '-x' -> type(SOLID_CROSS);
ALIAS_DOTTED_CROSS: '--x' -> type(DOTTED_CROSS);
ALIAS_SOLID_POINT: '-)' -> type(SOLID_POINT);
ALIAS_DOTTED_POINT: '--)' -> type(DOTTED_POINT);
ALIAS_ACTOR: IDCHAR_NO_HYPHEN+
(
'-' ALNUM_NOT_X_RPAREN+
| '--' ALNUM_NOT_X_RPAREN+
| '-' '-' '-' '-'* ALNUM+
)* -> type(ACTOR);
// LINE mode: after 'title' (no colon), pop at newline
mode LINE;
LINE_NEWLINE: ('\r'? '\n')+ -> popMode, type(NEWLINE);
LINE_SEMI: ';' -> popMode, type(NEWLINE);
LINE_WS: [ \t]+ -> skip;
LINE_HASH_COMMENT: '#' ~[\r\n]* -> skip;
LINE_PERCENT_COMMENT: '%%' ~[\r\n]* -> skip;
// Prefer capturing the remainder of the line as a single TXT token
LINE_TXT: (~[\r\n;#])+ -> type(TXT);
// allow arrows; placed after TXT so it won't split titles
LINE_BIDIR_SOLID_ARROW: '<<->>' -> type(BIDIRECTIONAL_SOLID_ARROW);
LINE_BIDIR_DOTTED_ARROW: '<<-->>' -> type(BIDIRECTIONAL_DOTTED_ARROW);
LINE_SOLID_ARROW: '->>' -> type(SOLID_ARROW);
LINE_DOTTED_ARROW: '-->>' -> type(DOTTED_ARROW);
LINE_SOLID_OPEN_ARROW: '->' -> type(SOLID_OPEN_ARROW);
LINE_DOTTED_OPEN_ARROW: '-->' -> type(DOTTED_OPEN_ARROW);
LINE_SOLID_CROSS: '-x' -> type(SOLID_CROSS);
LINE_DOTTED_CROSS: '--x' -> type(DOTTED_CROSS);
LINE_SOLID_POINT: '-)' -> type(SOLID_POINT);
LINE_DOTTED_POINT: '--)' -> type(DOTTED_POINT);
// Keep ACTOR for parity if TXT is not applicable
LINE_ACTOR: IDCHAR_NO_HYPHEN+
(
'-' ALNUM_NOT_X_RPAREN+
| '--' ALNUM_NOT_X_RPAREN+
| '-' '-' '-' '-'* ALNUM+
)* -> type(ACTOR);

View File

@@ -1,150 +0,0 @@
parser grammar SequenceParser;
options {
tokenVocab = SequenceLexer;
}
start: (NEWLINE)* SD document EOF;
document: (line | loopBlock | rectBlock | boxBlock | optBlock | altBlock | parBlock | parOverBlock | breakBlock | criticalBlock)* statement?;
line: statement? NEWLINE;
statement
: participantStatement
| createStatement
| destroyStatement
| signalStatement
| noteStatement
| linksStatement
| linkStatement
| propertiesStatement
| detailsStatement
| activationStatement
| autonumberStatement
| titleStatement
| legacyTitleStatement
| accTitleStatement
| accDescrStatement
| accDescrMultilineStatement
;
createStatement
: CREATE (PARTICIPANT | PARTICIPANT_ACTOR) actor (AS restOfLine)?
;
destroyStatement
: DESTROY actor
;
participantStatement
: PARTICIPANT actorWithConfig
| (PARTICIPANT | PARTICIPANT_ACTOR) actor (AS restOfLine)?
;
actorWithConfig
: ACTOR configObject
;
configObject
: CONFIG_START CONFIG_CONTENT CONFIG_END
;
signalStatement
: actor signaltype (PLUS actor | MINUS actor | actor) text2
;
noteStatement
: NOTE RIGHT_OF actor text2
| NOTE LEFT_OF actor text2
| NOTE OVER actor (COMMA actor)? text2
;
linksStatement
: LINKS actor text2
;
linkStatement
: LINK actor text2
;
propertiesStatement
: PROPERTIES actor text2
;
detailsStatement
: DETAILS actor text2
;
autonumberStatement
: AUTONUMBER // enable default numbering
| AUTONUMBER OFF // disable numbering
| AUTONUMBER ACTOR // start value
| AUTONUMBER ACTOR ACTOR // start and step
;
activationStatement
: ACTIVATE actor
| DEACTIVATE actor
;
titleStatement
: TITLE
| TITLE restOfLine
| TITLE ACTOR+ // title without colon
;
accTitleStatement
: ACC_TITLE ACC_TITLE_VALUE
;
accDescrStatement
: ACC_DESCR ACC_DESCR_VALUE
;
accDescrMultilineStatement
: ACC_DESCR_MULTI ACC_DESCR_MULTILINE_VALUE ACC_DESCR_MULTILINE_END
;
legacyTitleStatement
: LEGACY_TITLE
;
// Blocks
loopBlock: LOOP restOfLine? document END;
rectBlock: RECT restOfLine? document END;
boxBlock: BOX restOfLine? document END;
optBlock: OPT restOfLine? document END;
altBlock: ALT restOfLine? altSections END;
parBlock: PAR restOfLine? parSections END;
parOverBlock: PAR_OVER restOfLine? parSections END;
breakBlock: BREAK restOfLine? document END;
criticalBlock: CRITICAL restOfLine? optionSections END;
altSections: document (elseSection)*;
elseSection: ELSE restOfLine? document;
parSections: document (andSection)*;
andSection: AND restOfLine? document;
optionSections: document (optionSection)*;
optionSection: OPTION restOfLine? document;
actor: ACTOR;
signaltype
: SOLID_ARROW
| DOTTED_ARROW
| SOLID_OPEN_ARROW
| DOTTED_OPEN_ARROW
| SOLID_CROSS
| DOTTED_CROSS
| SOLID_POINT
| DOTTED_POINT
| BIDIRECTIONAL_SOLID_ARROW
| BIDIRECTIONAL_DOTTED_ARROW
;
restOfLine: TXT;
text2: TXT;

View File

@@ -1,738 +0,0 @@
/**
* ANTLR-based Sequence Diagram Parser (initial implementation)
*
* Mirrors the flowchart setup: provides an ANTLR entry compatible with the Jison interface.
*/
import { CharStream, CommonTokenStream, ParseTreeWalker, BailErrorStrategy } from 'antlr4ng';
import { SequenceLexer } from './generated/SequenceLexer.js';
import { SequenceParser } from './generated/SequenceParser.js';
class ANTLRSequenceParser {
yy: any = null;
private mapSignalType(op: string): number | undefined {
const LT = this.yy?.LINETYPE;
if (!LT) {
return undefined;
}
switch (op) {
case '->':
return LT.SOLID_OPEN;
case '-->':
return LT.DOTTED_OPEN;
case '->>':
return LT.SOLID;
case '-->>':
return LT.DOTTED;
case '<<->>':
return LT.BIDIRECTIONAL_SOLID;
case '<<-->>':
return LT.BIDIRECTIONAL_DOTTED;
case '-x':
return LT.SOLID_CROSS;
case '--x':
return LT.DOTTED_CROSS;
case '-)':
return LT.SOLID_POINT;
case '--)':
return LT.DOTTED_POINT;
default:
return undefined;
}
}
parse(input: string): any {
if (!this.yy) {
throw new Error('Sequence ANTLR parser missing yy (database).');
}
// Reset DB to match Jison behavior
this.yy.clear();
const inputStream = CharStream.fromString(input);
const lexer = new SequenceLexer(inputStream);
const tokenStream = new CommonTokenStream(lexer);
const parser = new SequenceParser(tokenStream);
// Fail-fast on any syntax error (matches Jison throwing behavior)
const anyParser = parser as unknown as {
getErrorHandler?: () => unknown;
setErrorHandler?: (h: unknown) => void;
errorHandler?: unknown;
};
const currentHandler = anyParser.getErrorHandler?.() ?? anyParser.errorHandler;
if (!currentHandler || (currentHandler as any)?.constructor?.name !== 'BailErrorStrategy') {
if (typeof anyParser.setErrorHandler === 'function') {
anyParser.setErrorHandler(new BailErrorStrategy());
} else {
(parser as any).errorHandler = new BailErrorStrategy();
}
}
const tree = parser.start();
const db = this.yy;
// Minimal listener for participants and simple messages
const listener: any = {
// Required hooks for ParseTreeWalker
visitTerminal(_node?: unknown) {
void _node;
},
visitErrorNode(_node?: unknown) {
void _node;
},
enterEveryRule(_ctx?: unknown) {
void _ctx;
},
exitEveryRule(_ctx?: unknown) {
void _ctx;
},
// loop block: add start on enter, end on exit to wrap inner content
enterLoopBlock(ctx: any) {
try {
const rest = ctx.restOfLine?.();
const raw = rest ? (rest.getText?.() as string | undefined) : undefined;
const msgText =
raw !== undefined ? (raw.startsWith(':') ? raw.slice(1) : raw).trim() : undefined;
const msg = msgText !== undefined ? db.parseMessage(msgText) : undefined;
db.addSignal(undefined, undefined, msg, db.LINETYPE.LOOP_START);
} catch {}
},
exitLoopBlock() {
try {
db.addSignal(undefined, undefined, undefined, db.LINETYPE.LOOP_END);
} catch {}
},
exitParticipantStatement(ctx: any) {
// Extended participant syntax: participant <ACTOR>@{...}
const awc = ctx.actorWithConfig?.();
if (awc) {
const awcCtx = Array.isArray(awc) ? awc[0] : awc;
const idTok = awcCtx?.ACTOR?.();
const id = (Array.isArray(idTok) ? idTok[0] : idTok)?.getText?.() as string | undefined;
if (!id) {
return;
}
const cfgObj = awcCtx?.configObject?.();
const cfgCtx = Array.isArray(cfgObj) ? cfgObj[0] : cfgObj;
const cfgTok = cfgCtx?.CONFIG_CONTENT?.();
const metadata = (Array.isArray(cfgTok) ? cfgTok[0] : cfgTok)?.getText?.() as
| string
| undefined;
// Important: let errors from YAML parsing propagate for invalid configs
db.addActor(id, id, { text: id, type: 'participant' }, 'participant', metadata);
return;
}
try {
const hasActor = !!ctx.PARTICIPANT_ACTOR?.();
const draw = hasActor ? 'actor' : 'participant';
const id = ctx.actor?.(0)?.getText?.() as string | undefined;
if (!id) {
return;
}
let display = id;
if (ctx.AS) {
let raw: string | undefined;
const rest = ctx.restOfLine?.();
raw = rest?.getText?.() as string | undefined;
if (raw === undefined && ctx.TXT) {
const t = ctx.TXT();
raw = Array.isArray(t)
? (t[0]?.getText?.() as string | undefined)
: (t?.getText?.() as string | undefined);
}
if (raw !== undefined) {
const trimmed = raw.startsWith(':') ? raw.slice(1) : raw;
const v = trimmed.trim();
if (v) {
display = v;
}
}
}
const desc = { text: display, type: draw };
db.addActor(id, id, desc, draw);
} catch (_e) {
// swallow to keep parity with Jison robustness
}
},
exitCreateStatement(ctx: any) {
try {
const hasActor = !!ctx.PARTICIPANT_ACTOR?.();
const draw = hasActor ? 'actor' : 'participant';
const id = ctx.actor?.()?.getText?.() as string | undefined;
if (!id) {
return;
}
let display = id;
if (ctx.AS) {
let raw: string | undefined;
const rest = ctx.restOfLine?.();
raw = rest?.getText?.() as string | undefined;
if (raw === undefined && ctx.TXT) {
const t = ctx.TXT();
raw = Array.isArray(t)
? (t[0]?.getText?.() as string | undefined)
: (t?.getText?.() as string | undefined);
}
if (raw !== undefined) {
const trimmed = raw.startsWith(':') ? raw.slice(1) : raw;
const v = trimmed.trim();
if (v) {
display = v;
}
}
}
db.addActor(id, id, { text: display, type: draw }, draw);
const msgs = db.getMessages?.() ?? [];
db.getCreatedActors?.().set(id, msgs.length);
} catch (_e) {
// ignore to keep resilience
}
},
exitDestroyStatement(ctx: any) {
try {
const id = ctx.actor?.()?.getText?.() as string | undefined;
if (!id) {
return;
}
const msgs = db.getMessages?.() ?? [];
db.getDestroyedActors?.().set(id, msgs.length);
} catch (_e) {
// ignore to keep resilience
}
},
// opt block
enterOptBlock(ctx: any) {
try {
const raw = ctx.restOfLine?.()?.getText?.() as string | undefined;
const msgText = raw ? (raw.startsWith(':') ? raw.slice(1) : raw).trim() : undefined;
const msg = msgText !== undefined ? db.parseMessage(msgText) : undefined;
db.addSignal(undefined, undefined, msg, db.LINETYPE.OPT_START);
} catch {}
},
exitOptBlock() {
try {
db.addSignal(undefined, undefined, undefined, db.LINETYPE.OPT_END);
} catch {}
},
// alt block
enterAltBlock(ctx: any) {
try {
const raw = ctx.restOfLine?.()?.getText?.() as string | undefined;
const msgText = raw ? (raw.startsWith(':') ? raw.slice(1) : raw).trim() : undefined;
const msg = msgText !== undefined ? db.parseMessage(msgText) : undefined;
db.addSignal(undefined, undefined, msg, db.LINETYPE.ALT_START);
} catch {}
},
exitAltBlock() {
try {
db.addSignal(undefined, undefined, undefined, db.LINETYPE.ALT_END);
} catch {}
},
enterElseSection(ctx: any) {
try {
const raw = ctx.restOfLine?.()?.getText?.() as string | undefined;
const msgText = raw ? (raw.startsWith(':') ? raw.slice(1) : raw).trim() : undefined;
const msg = msgText !== undefined ? db.parseMessage(msgText) : undefined;
db.addSignal(undefined, undefined, msg, db.LINETYPE.ALT_ELSE);
} catch {}
},
// par and par_over blocks
enterParBlock(ctx: any) {
try {
const raw = ctx.restOfLine?.()?.getText?.() as string | undefined;
const msgText = raw ? (raw.startsWith(':') ? raw.slice(1) : raw).trim() : undefined;
const msg = msgText !== undefined ? db.parseMessage(msgText) : undefined;
db.addSignal(undefined, undefined, msg, db.LINETYPE.PAR_START);
} catch {}
},
enterParOverBlock(ctx: any) {
try {
const raw = ctx.restOfLine?.()?.getText?.() as string | undefined;
const msgText = raw ? (raw.startsWith(':') ? raw.slice(1) : raw).trim() : undefined;
const msg = msgText !== undefined ? db.parseMessage(msgText) : undefined;
db.addSignal(undefined, undefined, msg, db.LINETYPE.PAR_OVER_START);
} catch {}
},
exitParBlock() {
try {
db.addSignal(undefined, undefined, undefined, db.LINETYPE.PAR_END);
} catch {}
},
exitParOverBlock() {
try {
db.addSignal(undefined, undefined, undefined, db.LINETYPE.PAR_END);
} catch {}
},
enterAndSection(ctx: any) {
try {
const raw = ctx.restOfLine?.()?.getText?.() as string | undefined;
const msgText = raw ? (raw.startsWith(':') ? raw.slice(1) : raw).trim() : undefined;
const msg = msgText !== undefined ? db.parseMessage(msgText) : undefined;
db.addSignal(undefined, undefined, msg, db.LINETYPE.PAR_AND);
} catch {}
},
// critical block
enterCriticalBlock(ctx: any) {
try {
const raw = ctx.restOfLine?.()?.getText?.() as string | undefined;
const msgText = raw ? (raw.startsWith(':') ? raw.slice(1) : raw).trim() : undefined;
const msg = msgText !== undefined ? db.parseMessage(msgText) : undefined;
db.addSignal(undefined, undefined, msg, db.LINETYPE.CRITICAL_START);
} catch {}
},
exitCriticalBlock() {
try {
db.addSignal(undefined, undefined, undefined, db.LINETYPE.CRITICAL_END);
} catch {}
},
enterOptionSection(ctx: any) {
try {
const raw = ctx.restOfLine?.()?.getText?.() as string | undefined;
const msgText = raw ? (raw.startsWith(':') ? raw.slice(1) : raw).trim() : undefined;
const msg = msgText !== undefined ? db.parseMessage(msgText) : undefined;
db.addSignal(undefined, undefined, msg, db.LINETYPE.CRITICAL_OPTION);
} catch {}
},
// break block
enterBreakBlock(ctx: any) {
try {
const raw = ctx.restOfLine?.()?.getText?.() as string | undefined;
const msgText = raw ? (raw.startsWith(':') ? raw.slice(1) : raw).trim() : undefined;
const msg = msgText !== undefined ? db.parseMessage(msgText) : undefined;
db.addSignal(undefined, undefined, msg, db.LINETYPE.BREAK_START);
} catch {}
},
exitBreakBlock() {
try {
db.addSignal(undefined, undefined, undefined, db.LINETYPE.BREAK_END);
} catch {}
},
// rect block
enterRectBlock(ctx: any) {
try {
const raw = ctx.restOfLine?.()?.getText?.() as string | undefined;
const msgText = raw ? (raw.startsWith(':') ? raw.slice(1) : raw).trim() : undefined;
const msg = msgText !== undefined ? db.parseMessage(msgText) : undefined;
db.addSignal(undefined, undefined, msg, db.LINETYPE.RECT_START);
} catch {}
},
exitRectBlock() {
try {
db.addSignal(undefined, undefined, undefined, db.LINETYPE.RECT_END);
} catch {}
},
// box block
enterBoxBlock(ctx: any) {
try {
const raw = ctx.restOfLine?.()?.getText?.() as string | undefined;
// raw may come from LINE_TXT (no leading colon) or TXT (leading colon)
const line = raw ? (raw.startsWith(':') ? raw.slice(1) : raw).trim() : '';
const data = db.parseBoxData(line);
db.addBox(data);
} catch {}
},
exitBoxBlock() {
try {
// boxEnd is private in TS types; cast to any to call it here like Jison does via apply()
db.boxEnd();
} catch {}
},
exitSignalStatement(ctx: any) {
const a1Raw = ctx.actor(0)?.getText?.() as string | undefined;
const a2 = ctx.actor(1)?.getText?.();
const st = ctx.signaltype?.();
const stTextRaw = st ? st.getText() : '';
// Workaround for current lexer attaching '-' to the left actor (e.g., 'Alice-' + '>>')
let a1 = a1Raw ?? '';
let op = stTextRaw;
if (a1 && /-+$/.test(a1)) {
const m = /-+$/.exec(a1)![0];
a1 = a1.slice(0, -m.length);
op = m + op; // restore full operator, e.g., '-' + '>>' => '->>' or '--' + '>' => '-->'
}
const typ = listener._mapSignal(op);
if (typ === undefined) {
return; // Not a recognized operator; skip adding a signal
}
const t2 = ctx.text2?.();
const msgTok = t2 ? t2.getText() : undefined;
const msgText = msgTok?.startsWith(':') ? msgTok.slice(1) : undefined;
const msg = msgText ? db.parseMessage(msgText) : undefined;
// Ensure participants exist like Jison does
const actorsMap = db.getActors?.();
const ensure = (id?: string) => {
if (!id) {
return;
}
if (!actorsMap?.has(id)) {
db.addActor(id, id, { text: id, type: 'participant' }, 'participant');
}
};
ensure(a1);
ensure(a2);
const hasPlus = !!ctx.PLUS?.();
const hasMinus = !!ctx.MINUS?.();
// Main signal; pass 'activate' flag if there is a plus before the target actor
db.addSignal(a1, a2, msg, typ, hasPlus);
// One-line activation/deactivation side-effects
if (hasPlus && a2) {
db.addSignal(a2, undefined, undefined, db.LINETYPE.ACTIVE_START);
}
if (hasMinus && a1) {
db.addSignal(a1, undefined, undefined, db.LINETYPE.ACTIVE_END);
}
},
exitNoteStatement(ctx: any) {
try {
const t2 = ctx.text2?.();
const msgTok = t2 ? t2.getText() : undefined;
const msgText = msgTok?.startsWith(':') ? msgTok.slice(1) : undefined;
const text = msgText ? db.parseMessage(msgText) : { text: '' };
// Determine placement and actors
let placement = db.PLACEMENT.RIGHTOF;
// Collect all actor texts using index-based accessor to be robust across runtimes
const actorIds: string[] = [];
if (typeof ctx.actor === 'function') {
let i = 0;
// @ts-ignore - antlr4ng contexts allow indexed accessors
while (true) {
const node = ctx.actor(i);
if (!node || typeof node.getText !== 'function') {
break;
}
actorIds.push(node.getText());
i++;
}
// Fallback to single access when no indexed nodes are exposed
if (actorIds.length === 0) {
// @ts-ignore - antlr4ng exposes single-argument accessor in some builds
const single = ctx.actor();
const txt =
single && typeof single.getText === 'function' ? single.getText() : undefined;
if (txt) {
actorIds.push(txt);
}
}
}
if (ctx.RIGHT_OF?.()) {
placement = db.PLACEMENT.RIGHTOF;
// keep first actor only
if (actorIds.length > 1) {
actorIds.splice(1);
}
} else if (ctx.LEFT_OF?.()) {
placement = db.PLACEMENT.LEFTOF;
if (actorIds.length > 1) {
actorIds.splice(1);
}
} else {
placement = db.PLACEMENT.OVER;
// keep one or two actors as collected
if (actorIds.length > 2) {
actorIds.splice(2);
}
}
// Ensure actors exist
const actorsMap = db.getActors?.();
for (const id of actorIds) {
if (id && !actorsMap?.has(id)) {
db.addActor(id, id, { text: id, type: 'participant' }, 'participant');
}
}
const actorParam: any = actorIds.length > 1 ? actorIds : actorIds[0];
db.addNote(actorParam, placement, {
text: text.text,
wrap: text.wrap,
});
} catch (_e) {
// ignore
}
},
exitLinksStatement(ctx: any) {
try {
const a = ctx.actor?.()?.getText?.() as string | undefined;
const t2 = ctx.text2?.();
const msgTok = t2 ? t2.getText() : undefined;
const msgText = msgTok?.startsWith(':') ? msgTok.slice(1) : undefined;
const text = msgText ? db.parseMessage(msgText) : { text: '' };
if (!a) {
return;
}
const actorsMap = db.getActors?.();
if (!actorsMap?.has(a)) {
db.addActor(a, a, { text: a, type: 'participant' }, 'participant');
}
db.addLinks(a, text);
} catch {}
},
exitLinkStatement(ctx: any) {
try {
const a = ctx.actor?.()?.getText?.() as string | undefined;
const t2 = ctx.text2?.();
const msgTok = t2 ? t2.getText() : undefined;
const msgText = msgTok?.startsWith(':') ? msgTok.slice(1) : undefined;
const text = msgText ? db.parseMessage(msgText) : { text: '' };
if (!a) {
return;
}
const actorsMap = db.getActors?.();
if (!actorsMap?.has(a)) {
db.addActor(a, a, { text: a, type: 'participant' }, 'participant');
}
db.addALink(a, text);
} catch {}
},
exitPropertiesStatement(ctx: any) {
try {
const a = ctx.actor?.()?.getText?.() as string | undefined;
const t2 = ctx.text2?.();
const msgTok = t2 ? t2.getText() : undefined;
const msgText = msgTok?.startsWith(':') ? msgTok.slice(1) : undefined;
const text = msgText ? db.parseMessage(msgText) : { text: '' };
if (!a) {
return;
}
const actorsMap = db.getActors?.();
if (!actorsMap?.has(a)) {
db.addActor(a, a, { text: a, type: 'participant' }, 'participant');
}
db.addProperties(a, text);
} catch {}
},
exitDetailsStatement(ctx: any) {
try {
const a = ctx.actor?.()?.getText?.() as string | undefined;
const t2 = ctx.text2?.();
const msgTok = t2 ? t2.getText() : undefined;
const msgText = msgTok?.startsWith(':') ? msgTok.slice(1) : undefined;
const text = msgText ? db.parseMessage(msgText) : { text: '' };
if (!a) {
return;
}
const actorsMap = db.getActors?.();
if (!actorsMap?.has(a)) {
db.addActor(a, a, { text: a, type: 'participant' }, 'participant');
}
db.addDetails(a, text);
} catch {}
},
exitActivationStatement(ctx: any) {
const a = ctx.actor?.()?.getText?.();
if (!a) {
return;
}
const actorsMap = db.getActors?.();
if (!actorsMap?.has(a)) {
db.addActor(a, a, { text: a, type: 'participant' }, 'participant');
}
const typ = ctx.ACTIVATE?.() ? db.LINETYPE.ACTIVE_START : db.LINETYPE.ACTIVE_END;
db.addSignal(a, a, { text: '', wrap: false }, typ);
},
exitAutonumberStatement(ctx: any) {
// Parse variants: autonumber | autonumber off | autonumber <start> | autonumber <start> <step>
const isOff = !!(ctx.OFF && typeof ctx.OFF === 'function' && ctx.OFF());
const tokens = ctx.ACTOR && typeof ctx.ACTOR === 'function' ? ctx.ACTOR() : undefined;
const parts: string[] = Array.isArray(tokens)
? tokens
.map((t: any) => (typeof t.getText === 'function' ? t.getText() : undefined))
.filter(Boolean)
: tokens && typeof tokens.getText === 'function'
? [tokens.getText()]
: [];
let start: number | undefined;
let step: number | undefined;
if (parts.length >= 1) {
const v = Number.parseInt(parts[0], 10);
if (!Number.isNaN(v)) {
start = v;
}
}
if (parts.length >= 2) {
const v = Number.parseInt(parts[1], 10);
if (!Number.isNaN(v)) {
step = v;
}
}
const visible = !isOff;
if (visible) {
db.enableSequenceNumbers();
} else {
db.disableSequenceNumbers();
}
// Match Jison behavior: if only start is provided, default step to 1
const payload = {
type: 'sequenceIndex' as const,
sequenceIndex: start,
sequenceIndexStep: step ?? (start !== undefined ? 1 : undefined),
sequenceVisible: visible,
signalType: db.LINETYPE.AUTONUMBER,
};
db.apply(payload);
},
exitTitleStatement(ctx: any) {
try {
let titleText: string | undefined;
// Case 1: If TITLE token carried inline text (legacy path), use it; otherwise fall through
if (ctx.TITLE) {
const tok = ctx.TITLE()?.getText?.() as string | undefined;
if (tok && tok.length > 'title'.length) {
const after = tok.slice('title'.length).trim();
if (after) {
titleText = after;
}
}
}
// Case 2: "title:" used restOfLine (TXT) token
if (titleText === undefined) {
const rest = ctx.restOfLine?.().getText?.() as string | undefined;
if (rest !== undefined) {
const raw = rest.startsWith(':') ? rest.slice(1) : rest;
titleText = raw.trim();
}
}
// Case 3: title without colon tokenized as ACTOR(s)
if (titleText === undefined) {
if (ctx.actor) {
const nodes = ctx.actor();
const parts = Array.isArray(nodes)
? nodes.map((a: any) => a.getText())
: [nodes?.getText?.()].filter(Boolean);
titleText = parts.join(' ');
} else if (ctx.ACTOR) {
const tokens = ctx.ACTOR();
const parts = Array.isArray(tokens)
? tokens.map((t: any) => t.getText())
: [tokens?.getText?.()].filter(Boolean);
titleText = parts.join(' ');
}
}
if (!titleText) {
const parts = (ctx.children ?? [])
.map((c: any) =>
c?.symbol?.type === SequenceLexer.ACTOR ? c.getText?.() : undefined
)
.filter(Boolean) as string[];
if (parts.length) {
titleText = parts.join(' ');
}
}
if (titleText) {
db.setDiagramTitle?.(titleText);
}
} catch {}
},
exitLegacyTitleStatement(ctx: any) {
try {
const tok = ctx.LEGACY_TITLE?.().getText?.() as string | undefined;
if (!tok) {
return;
}
const idx = tok.indexOf(':');
const titleText = (idx >= 0 ? tok.slice(idx + 1) : tok).trim();
if (titleText) {
db.setDiagramTitle?.(titleText);
}
} catch {}
},
exitAccTitleStatement(ctx: any) {
try {
const v = ctx.ACC_TITLE_VALUE?.().getText?.() as string | undefined;
if (v !== undefined) {
const val = v.trim();
if (val) {
db.setAccTitle?.(val);
}
}
} catch {}
},
exitAccDescrStatement(ctx: any) {
try {
const v = ctx.ACC_DESCR_VALUE?.().getText?.() as string | undefined;
if (v !== undefined) {
const val = v.trim();
if (val) {
db.setAccDescription?.(val);
}
}
} catch {}
},
exitAccDescrMultilineStatement(ctx: any) {
try {
const v = ctx.ACC_DESCR_MULTILINE_VALUE?.().getText?.() as string | undefined;
if (v !== undefined) {
const val = v.trim();
if (val) {
db.setAccDescription?.(val);
}
}
} catch {}
},
_mapSignal: (op: string) => this.mapSignalType(op),
};
ParseTreeWalker.DEFAULT.walk(listener, tree);
return tree;
}
}
// Export in the format expected by the existing code
const parser = new ANTLRSequenceParser();
const exportedParser = {
parse: (input: string) => parser.parse(input),
parser: parser,
yy: null as any,
};
Object.defineProperty(exportedParser, 'yy', {
get() {
return parser.yy;
},
set(value) {
parser.yy = value;
},
});
export default exportedParser;

View File

@@ -1,234 +0,0 @@
import { describe, it, expect } from 'vitest';
import type { Token } from 'antlr4ng';
import { CharStream } from 'antlr4ng';
import { SequenceLexer } from './generated/SequenceLexer.js';
function lex(input: string): Token[] {
const inputStream = CharStream.fromString(input);
const lexer = new SequenceLexer(inputStream);
return lexer.getAllTokens();
}
function names(tokens: Token[]): string[] {
const vocab =
(SequenceLexer as any).VOCABULARY ?? new SequenceLexer(CharStream.fromString('')).vocabulary;
return tokens.map((t) => vocab.getSymbolicName(t.type) ?? String(t.type));
}
function texts(tokens: Token[]): string[] {
return tokens.map((t) => t.text ?? '');
}
describe('Sequence ANTLR Lexer - token coverage (expanded for actor/alias)', () => {
const singleTokenCases: { input: string; first: string; label?: string }[] = [
{ input: 'sequenceDiagram', first: 'SD' },
{ input: ';', first: 'NEWLINE' },
{ input: ',', first: 'COMMA' },
{ input: 'autonumber', first: 'AUTONUMBER' },
{ input: 'off', first: 'OFF' },
{ input: 'participant', first: 'PARTICIPANT' },
{ input: 'actor', first: 'PARTICIPANT_ACTOR' },
{ input: 'create', first: 'CREATE' },
{ input: 'destroy', first: 'DESTROY' },
{ input: 'box', first: 'BOX' },
{ input: 'loop', first: 'LOOP' },
{ input: 'rect', first: 'RECT' },
{ input: 'opt', first: 'OPT' },
{ input: 'alt', first: 'ALT' },
{ input: 'else', first: 'ELSE' },
{ input: 'par', first: 'PAR' },
{ input: 'par_over', first: 'PAR_OVER' },
{ input: 'and', first: 'AND' },
{ input: 'critical', first: 'CRITICAL' },
{ input: 'option', first: 'OPTION' },
{ input: 'break', first: 'BREAK' },
{ input: 'end', first: 'END' },
{ input: 'links', first: 'LINKS' },
{ input: 'link', first: 'LINK' },
{ input: 'properties', first: 'PROPERTIES' },
{ input: 'details', first: 'DETAILS' },
{ input: 'over', first: 'OVER' },
{ input: 'Note', first: 'NOTE' },
{ input: 'activate', first: 'ACTIVATE' },
{ input: 'deactivate', first: 'DEACTIVATE' },
{ input: 'title', first: 'TITLE' },
{ input: '->>', first: 'SOLID_ARROW' },
{ input: '<<->>', first: 'BIDIRECTIONAL_SOLID_ARROW' },
{ input: '-->>', first: 'DOTTED_ARROW' },
{ input: '<<-->>', first: 'BIDIRECTIONAL_DOTTED_ARROW' },
{ input: '->', first: 'SOLID_OPEN_ARROW' },
{ input: '-->', first: 'DOTTED_OPEN_ARROW' },
{ input: '-x', first: 'SOLID_CROSS' },
{ input: '--x', first: 'DOTTED_CROSS' },
{ input: '-)', first: 'SOLID_POINT' },
{ input: '--)', first: 'DOTTED_POINT' },
{ input: ':text', first: 'TXT' },
{ input: '+', first: 'PLUS' },
{ input: '-', first: 'MINUS' },
];
for (const tc of singleTokenCases) {
it(`lexes ${tc.label ?? tc.input} -> ${tc.first}`, () => {
const ts = lex(tc.input);
const ns = names(ts);
expect(ns[0]).toBe(tc.first);
});
}
it('lexes LEFT_OF / RIGHT_OF with space', () => {
expect(names(lex('left of'))[0]).toBe('LEFT_OF');
expect(names(lex('right of'))[0]).toBe('RIGHT_OF');
});
it('lexes LEGACY_TITLE as a single token', () => {
const ts = lex('title: Diagram Title');
const ns = names(ts);
expect(ns[0]).toBe('LEGACY_TITLE');
});
it('lexes accTitle/accDescr single-line values using modes', () => {
const t1 = names(lex('accTitle: This is the title'));
expect(t1[0]).toBe('ACC_TITLE');
expect(t1[1]).toBe('ACC_TITLE_VALUE');
const t2 = names(lex('accDescr: Accessibility Description'));
expect(t2[0]).toBe('ACC_DESCR');
expect(t2[1]).toBe('ACC_DESCR_VALUE');
});
it('lexes accDescr multiline block', () => {
const ns = names(lex('accDescr {\nHello\n}'));
expect(ns[0]).toBe('ACC_DESCR_MULTI');
expect(ns).toContain('ACC_DESCR_MULTILINE_VALUE');
expect(ns).toContain('ACC_DESCR_MULTILINE_END');
});
it('lexes config block @{ ... }', () => {
const ns = names(lex('@{ shape: rounded }'));
expect(ns[0]).toBe('CONFIG_START');
expect(ns).toContain('CONFIG_CONTENT');
expect(ns[ns.length - 1]).toBe('CONFIG_END');
});
// ACTOR / ALIAS edge cases, mirroring Jison patterns
it('participant A', () => {
const ns = names(lex('participant A'));
expect(ns).toEqual(['PARTICIPANT', 'ACTOR']);
});
it('participant Alice as A', () => {
const ns = names(lex('participant Alice as A'));
expect(ns[0]).toBe('PARTICIPANT');
expect(ns[1]).toBe('ACTOR');
expect(ns[2]).toBe('AS');
expect(['ACTOR', 'TXT']).toContain(ns[3]);
const ts = texts(lex('participant Alice as A'));
expect(ts[1]).toBe('Alice');
// The alias part may be tokenized as ACTOR or TXT depending on mode precedence; trim for TXT variant
expect(['A']).toContain(ts[3]?.trim?.());
});
it('participant with same-line spaces are skipped in ID mode', () => {
const ts = lex('participant Alice');
expect(names(ts)).toEqual(['PARTICIPANT', 'ACTOR']);
expect(texts(ts)[1]).toBe('Alice');
});
it('participant ID mode: hash comment skipped on same line', () => {
const ns = names(lex('participant Alice # comment here'));
expect(ns).toEqual(['PARTICIPANT', 'ACTOR']);
});
it('participant ID mode: percent comment skipped on same line', () => {
const ns = names(lex('participant Alice %% comment here'));
expect(ns).toEqual(['PARTICIPANT', 'ACTOR']);
});
it('alias ALIAS mode: spaces skipped and comments ignored', () => {
const ns = names(lex('participant Alice as A # c'));
expect(ns[0]).toBe('PARTICIPANT');
expect(ns[1]).toBe('ACTOR');
expect(ns[2]).toBe('AS');
expect(['ACTOR', 'TXT']).toContain(ns[3]);
});
it('title LINE mode: spaces skipped and words tokenized as ACTORs', () => {
const ns = names(lex('title My Diagram'));
expect(ns).toEqual(['TITLE', 'TXT']);
});
it('title LINE mode: percent comment ignored on same line', () => {
const ns = names(lex('title Diagram %% hidden'));
expect(ns).toEqual(['TITLE', 'TXT']);
});
it('ID mode pops to default on newline', () => {
const ns = names(lex('participant Alice\nactor Bob'));
expect(ns[0]).toBe('PARTICIPANT');
expect(ns[1]).toBe('ACTOR');
expect(ns[2]).toBe('NEWLINE');
expect(ns[3]).toBe('PARTICIPANT_ACTOR');
});
it('actor foo-bar (hyphens allowed)', () => {
const ts = lex('actor foo-bar');
expect(names(ts)).toEqual(['PARTICIPANT_ACTOR', 'ACTOR']);
expect(texts(ts)[1]).toBe('foo-bar');
});
it('actor foo--bar (multiple hyphens)', () => {
const ts = lex('actor foo--bar');
expect(names(ts)).toEqual(['PARTICIPANT_ACTOR', 'ACTOR']);
expect(texts(ts)[1]).toBe('foo--bar');
});
it('actor a-x should split into ACTOR and SOLID_CROSS (per Jison exclusion)', () => {
const ns = names(lex('actor a-x'));
expect(ns[0]).toBe('PARTICIPANT_ACTOR');
// Depending on spacing, ACTOR may be 'a' and '-x' is SOLID_CROSS
expect(ns.slice(1)).toEqual(['ACTOR', 'SOLID_CROSS']);
});
it('actor a--) should split into ACTOR and DOTTED_POINT', () => {
const ns = names(lex('actor a--)'));
expect(ns[0]).toBe('PARTICIPANT_ACTOR');
expect(ns.slice(1)).toEqual(['ACTOR', 'DOTTED_POINT']);
});
it('actor a--x should split into ACTOR and DOTTED_CROSS', () => {
const ns = names(lex('actor a--x'));
expect(ns[0]).toBe('PARTICIPANT_ACTOR');
expect(ns.slice(1)).toEqual(['ACTOR', 'DOTTED_CROSS']);
});
it('participant with inline config: participant Alice @{shape:rounded}', () => {
const ns = names(lex('participant Alice @{shape: rounded}'));
expect(ns[0]).toBe('PARTICIPANT');
expect(ns[1]).toBe('ACTOR');
expect(ns[2]).toBe('CONFIG_START');
expect(ns).toContain('CONFIG_CONTENT');
expect(ns[ns.length - 1]).toBe('CONFIG_END');
});
it('autonumber with numbers', () => {
const ns = names(lex('autonumber 12 3'));
expect(ns[0]).toBe('AUTONUMBER');
// Our lexer returns NUM greedily regardless of trailing space/newline context; acceptable for parity tests
expect(ns).toContain('NUM');
});
it('participant alias across lines: A as Alice then B as Bob', () => {
const input = 'participant A as Alice\nparticipant B as Bob';
const ns = names(lex(input));
// Expect: PARTICIPANT ACTOR AS (TXT|ACTOR) NEWLINE PARTICIPANT ACTOR AS (TXT|ACTOR)
expect(ns[0]).toBe('PARTICIPANT');
expect(ns[1]).toBe('ACTOR');
expect(ns[2]).toBe('AS');
expect(['TXT', 'ACTOR']).toContain(ns[3]);
expect(ns[4]).toBe('NEWLINE');
expect(ns[5]).toBe('PARTICIPANT');
expect(ns[6]).toBe('ACTOR');
expect(ns[7]).toBe('AS');
expect(['TXT', 'ACTOR']).toContain(ns[8]);
});
});

View File

@@ -1,40 +0,0 @@
import { describe, it, expect } from 'vitest';
import type { Token } from 'antlr4ng';
import { CharStream } from 'antlr4ng';
import { SequenceLexer } from './generated/SequenceLexer.js';
function lex(input: string): Token[] {
const inputStream = CharStream.fromString(input);
const lexer = new SequenceLexer(inputStream);
const tokens: Token[] = lexer.getAllTokens();
return tokens;
}
function tokenNames(tokens: Token[], vocabSource?: SequenceLexer): string[] {
// Map type numbers to symbolic names using the lexer's vocabulary
const vocab =
(SequenceLexer as any).VOCABULARY ??
(vocabSource ?? new SequenceLexer(CharStream.fromString(''))).vocabulary;
return tokens.map((t) => vocab.getSymbolicName(t.type) ?? String(t.type));
}
describe('Sequence ANTLR Lexer', () => {
it('lexes title without colon into TITLE followed by ACTOR tokens', () => {
const input = `sequenceDiagram\n` + `title Diagram Title\n` + `Alice->Bob:Hello`;
const tokens = lex(input);
const names = tokenNames(tokens);
// Expect the start: SD NEWLINE TITLE ACTOR ACTOR NEWLINE
expect(names.slice(0, 6)).toEqual(['SD', 'NEWLINE', 'TITLE', 'ACTOR', 'ACTOR', 'NEWLINE']);
});
it('lexes activate statement', () => {
const input = `sequenceDiagram\nactivate Alice\n`;
const tokens = lex(input);
const names = tokenNames(tokens);
// Expect: SD NEWLINE ACTIVATE ACTOR NEWLINE
expect(names).toEqual(['SD', 'NEWLINE', 'ACTIVATE', 'ACTOR', 'NEWLINE']);
});
});

View File

@@ -32,13 +32,14 @@
<CONFIG>[^\}]+ { return 'CONFIG_CONTENT'; }
<CONFIG>\} { this.popState(); this.popState(); return 'CONFIG_END'; }
<ID>[^\<->\->:\n,;@\s]+(?=\@\{) { yytext = yytext.trim(); return 'ACTOR'; }
<ID>[^\<->\->:\n,;@]+?([\-]*[^\<->\->:\n,;@]+?)*?(?=((?!\n)\s)+"as"(?!\n)\s|[#\n;]|$) { yytext = yytext.trim(); this.begin('ALIAS'); return 'ACTOR'; }
<ID>[^<>:\n,;@\s]+(?=\s+as\s) { yytext = yytext.trim(); this.begin('ALIAS'); return 'ACTOR'; }
<ID>[^<>:\n,;@]+(?=\s*[\n;#]|$) { yytext = yytext.trim(); this.popState(); return 'ACTOR'; }
<ID>[^<>:\n,;@]*\<[^\n]* { this.popState(); return 'INVALID'; }
"box" { this.begin('LINE'); return 'box'; }
"participant" { this.begin('ID'); return 'participant'; }
"actor" { this.begin('ID'); return 'participant_actor'; }
"create" return 'create';
"destroy" { this.begin('ID'); return 'destroy'; }
<ID>[^<\->\->:\n,;]+?([\-]*[^<\->\->:\n,;]+?)*?(?=((?!\n)\s)+"as"(?!\n)\s|[#\n;]|$) { yytext = yytext.trim(); this.begin('ALIAS'); return 'ACTOR'; }
<ALIAS>"as" { this.popState(); this.popState(); this.begin('LINE'); return 'AS'; }
<ALIAS>(?:) { this.popState(); this.popState(); return 'NEWLINE'; }
"loop" { this.begin('LINE'); return 'loop'; }
@@ -78,7 +79,7 @@ accDescr\s*"{"\s* { this.begin("acc_descr_multili
"off" return 'off';
"," return ',';
";" return 'NEWLINE';
[^+<\->\->:\n,;]+((?!(\-x|\-\-x|\-\)|\-\-\)))[\-]*[^\+<\->\->:\n,;]+)* { yytext = yytext.trim(); return 'ACTOR'; }
[^\/\\\+\()\+<\->\->:\n,;]+((?!(\-x|\-\-x|\-\)|\-\-\)|\-\|\\|\-\\|\-\/|\-\/\/|\-\|\/|\/\|\-|\\\|\-|\/\/\-|\\\\\-|\/\|\-|\-\-\|\\|\-\-|\(\)))[\-]*[^\+<\->\->:\n,;]+)* { yytext = yytext.trim(); return 'ACTOR'; } //final_4.11
"->>" return 'SOLID_ARROW';
"<<->>" return 'BIDIRECTIONAL_SOLID_ARROW';
"-->>" return 'DOTTED_ARROW';
@@ -89,10 +90,36 @@ accDescr\s*"{"\s* { this.begin("acc_descr_multili
\-\-[x] return 'DOTTED_CROSS';
\-[\)] return 'SOLID_POINT';
\-\-[\)] return 'DOTTED_POINT';
//normal-dotted
\-\-\|\\ return 'SOLID_ARROW_TOP_DOTTED';
\-\-\|\/ return 'SOLID_ARROW_BOTTOM_DOTTED';
\-\-\\\\ return 'STICK_ARROW_TOP_DOTTED';
\-\-\/\/ return 'STICK_ARROW_BOTTOM_DOTTED';
//reverse-dotted
\/\|\-\- return 'SOLID_ARROW_TOP_REVERSE_DOTTED';
\\\|\-\- return 'SOLID_ARROW_BOTTOM_REVERSE_DOTTED';
\/\/\-\- return 'STICK_ARROW_TOP_REVERSE_DOTTED';
\\\\\-\- return 'STICK_ARROW_BOTTOM_REVERSE_DOTTED';
//normal
\-\|\\ return 'SOLID_ARROW_TOP';
\-\|\/ return 'SOLID_ARROW_BOTTOM';
\-\\\\ return 'STICK_ARROW_TOP';
\-\/\/ return 'STICK_ARROW_BOTTOM';
//reverse
\/\|\- return 'SOLID_ARROW_TOP_REVERSE';
\\\|\- return 'SOLID_ARROW_BOTTOM_REVERSE';
\/\/\- return 'STICK_ARROW_TOP_REVERSE';
\\\\\- return 'STICK_ARROW_BOTTOM_REVERSE';
":"(?:(?:no)?wrap:)?[^#\n;]* return 'TXT';
":" return 'TXT';
"+" return '+';
"-" return '-';
"()" return '()';
<<EOF>> return 'NEWLINE';
. return 'INVALID';
@@ -119,6 +146,7 @@ line
: SPACE statement { $$ = $2 }
| statement { $$ = $1 }
| NEWLINE { $$=[]; }
| INVALID { $$=[]; }
;
box_section
@@ -304,6 +332,20 @@ signal
{ $$ = [$1,$4,{type: 'addMessage', from:$1.actor, to:$4.actor, signalType:$2, msg:$5},
{type: 'activeEnd', signalType: yy.LINETYPE.ACTIVE_END, actor: $1.actor}
]}
| actor signaltype '()' actor text2
{ $$ = [$1,$4,{type: 'addMessage', from:$1.actor, to:$4.actor, signalType:$2, msg:$5, activate: true, centralConnection: yy.LINETYPE.CENTRAL_CONNECTION},
{type: 'centralConnection', signalType: yy.LINETYPE.CENTRAL_CONNECTION, actor: $4.actor, }
]}
| actor '()' signaltype actor text2
{ $$ = [$1,$4,{type: 'addMessage', from:$1.actor, to:$4.actor, signalType:$3, msg:$5, activate: false, centralConnection: yy.LINETYPE.CENTRAL_CONNECTION_REVERSE},
{type: 'centralConnectionReverse', signalType: yy.LINETYPE.CENTRAL_CONNECTION_REVERSE, actor: $1.actor}
]}
| actor '()' signaltype '()' actor text2
{ $$ = [$1,$5,{type: 'addMessage', from:$1.actor, to:$5.actor, signalType:$3, msg:$6, activate: true, centralConnection: yy.LINETYPE.CENTRAL_CONNECTION_DUAL},
{type: 'centralConnection', signalType: yy.LINETYPE.CENTRAL_CONNECTION, actor: $5.actor, },
{type: 'centralConnectionReverse', signalType: yy.LINETYPE.CENTRAL_CONNECTION_REVERSE, actor: $1.actor}
]}
| actor signaltype actor text2
{ $$ = [$1,$3,{type: 'addMessage', from:$1.actor, to:$3.actor, signalType:$2, msg:$4}]}
;
@@ -337,7 +379,28 @@ signaltype
: SOLID_OPEN_ARROW { $$ = yy.LINETYPE.SOLID_OPEN; }
| DOTTED_OPEN_ARROW { $$ = yy.LINETYPE.DOTTED_OPEN; }
| SOLID_ARROW { $$ = yy.LINETYPE.SOLID; }
| BIDIRECTIONAL_SOLID_ARROW { $$ = yy.LINETYPE.BIDIRECTIONAL_SOLID; }
| SOLID_ARROW_TOP { $$ = yy.LINETYPE.SOLID_TOP; }
| SOLID_ARROW_BOTTOM { $$ = yy.LINETYPE.SOLID_BOTTOM; }
| STICK_ARROW_TOP { $$ = yy.LINETYPE.STICK_TOP; }
| STICK_ARROW_BOTTOM { $$ = yy.LINETYPE.STICK_BOTTOM; }
| SOLID_ARROW_TOP_DOTTED { $$ = yy.LINETYPE.SOLID_TOP_DOTTED; }
| SOLID_ARROW_BOTTOM_DOTTED { $$ = yy.LINETYPE.SOLID_BOTTOM_DOTTED; }
| STICK_ARROW_TOP_DOTTED { $$ = yy.LINETYPE.STICK_TOP_DOTTED; }
| STICK_ARROW_BOTTOM_DOTTED { $$ = yy.LINETYPE.STICK_BOTTOM_DOTTED; }
| SOLID_ARROW_TOP_REVERSE { $$ = yy.LINETYPE.SOLID_ARROW_TOP_REVERSE; }
| SOLID_ARROW_BOTTOM_REVERSE { $$ = yy.LINETYPE.SOLID_ARROW_BOTTOM_REVERSE; }
| STICK_ARROW_TOP_REVERSE { $$ = yy.LINETYPE.STICK_ARROW_TOP_REVERSE; }
| STICK_ARROW_BOTTOM_REVERSE { $$ = yy.LINETYPE.STICK_ARROW_BOTTOM_REVERSE; }
| SOLID_ARROW_TOP_REVERSE_DOTTED { $$ = yy.LINETYPE.SOLID_ARROW_TOP_REVERSE_DOTTED; }
| SOLID_ARROW_BOTTOM_REVERSE_DOTTED { $$ = yy.LINETYPE.SOLID_ARROW_BOTTOM_REVERSE_DOTTED; }
| STICK_ARROW_TOP_REVERSE_DOTTED { $$ = yy.LINETYPE.STICK_ARROW_TOP_REVERSE_DOTTED; }
| STICK_ARROW_BOTTOM_REVERSE_DOTTED { $$ = yy.LINETYPE.STICK_ARROW_BOTTOM_REVERSE_DOTTED; }
| BIDIRECTIONAL_SOLID_ARROW { $$ = yy.LINETYPE.BIDIRECTIONAL_SOLID; }
| DOTTED_ARROW { $$ = yy.LINETYPE.DOTTED; }
| BIDIRECTIONAL_DOTTED_ARROW { $$ = yy.LINETYPE.BIDIRECTIONAL_DOTTED; }
| SOLID_CROSS { $$ = yy.LINETYPE.SOLID_CROSS; }
@@ -350,4 +413,4 @@ text2
: TXT {$$ = yy.parseMessage($1.trim().substring(1)) }
;
%%
%%

View File

@@ -1,23 +0,0 @@
// @ts-ignore: JISON doesn't support types
import jisonParser from './sequenceDiagram.jison';
// Import the ANTLR parser wrapper (safe stub for now)
import antlrParser from './antlr/antlr-parser.js';
// Configuration flag to switch between parsers (same convention as flowcharts)
const USE_ANTLR_PARSER = process.env.USE_ANTLR_PARSER === 'true';
const newParser: any = Object.assign({}, USE_ANTLR_PARSER ? antlrParser : jisonParser);
newParser.parse = (src: string): unknown => {
// Normalize whitespace like flow does to keep parity with Jison behavior
const newSrc = src.replace(/}\s*\n/g, '}\n');
if (USE_ANTLR_PARSER) {
return antlrParser.parse(newSrc);
} else {
return jisonParser.parse(newSrc);
}
};
export default newParser;

View File

@@ -64,6 +64,30 @@ const LINETYPE = {
PAR_OVER_START: 32,
BIDIRECTIONAL_SOLID: 33,
BIDIRECTIONAL_DOTTED: 34,
SOLID_TOP: 41,
SOLID_BOTTOM: 42,
STICK_TOP: 43,
STICK_BOTTOM: 44,
SOLID_ARROW_TOP_REVERSE: 45,
SOLID_ARROW_BOTTOM_REVERSE: 46,
STICK_ARROW_TOP_REVERSE: 47,
STICK_ARROW_BOTTOM_REVERSE: 48,
SOLID_TOP_DOTTED: 51,
SOLID_BOTTOM_DOTTED: 52,
STICK_TOP_DOTTED: 53,
STICK_BOTTOM_DOTTED: 54,
SOLID_ARROW_TOP_REVERSE_DOTTED: 55,
SOLID_ARROW_BOTTOM_REVERSE_DOTTED: 56,
STICK_ARROW_TOP_REVERSE_DOTTED: 57,
STICK_ARROW_BOTTOM_REVERSE_DOTTED: 58,
CENTRAL_CONNECTION: 59,
CENTRAL_CONNECTION_REVERSE: 60,
CENTRAL_CONNECTION_DUAL: 61,
} as const;
const ARROWTYPE = {
@@ -244,7 +268,8 @@ export class SequenceDB implements DiagramDB {
idTo?: Message['to'],
message?: { text: string; wrap: boolean },
messageType?: number,
activate = false
activate = false,
centralConnection?: number
) {
if (messageType === this.LINETYPE.ACTIVE_END) {
const cnt = this.activationCount(idFrom ?? '');
@@ -271,6 +296,7 @@ export class SequenceDB implements DiagramDB {
wrap: message?.wrap ?? this.autoWrap(),
type: messageType,
activate,
centralConnection: centralConnection ?? 0,
});
return true;
}
@@ -563,6 +589,12 @@ export class SequenceDB implements DiagramDB {
case 'activeStart':
this.addSignal(param.actor, undefined, undefined, param.signalType);
break;
case 'centralConnection':
this.addSignal(param.actor, undefined, undefined, param.signalType);
break;
case 'centralConnectionReverse':
this.addSignal(param.actor, undefined, undefined, param.signalType);
break;
case 'activeEnd':
this.addSignal(param.actor, undefined, undefined, param.signalType);
break;
@@ -606,7 +638,14 @@ export class SequenceDB implements DiagramDB {
this.state.records.lastDestroyed = undefined;
}
}
this.addSignal(param.from, param.to, param.msg, param.signalType, param.activate);
this.addSignal(
param.from,
param.to,
param.msg,
param.signalType,
param.activate,
param.centralConnection
);
break;
case 'boxStart':
this.addBox(param.boxData);

View File

@@ -104,6 +104,7 @@ describe('more than one sequence diagram', () => {
[
{
"activate": false,
"centralConnection": 0,
"from": "Alice",
"id": "0",
"message": "Hello Bob, how are you?",
@@ -113,6 +114,7 @@ describe('more than one sequence diagram', () => {
},
{
"activate": false,
"centralConnection": 0,
"from": "Bob",
"id": "1",
"message": "I am good thanks!",
@@ -131,6 +133,7 @@ describe('more than one sequence diagram', () => {
[
{
"activate": false,
"centralConnection": 0,
"from": "Alice",
"id": "0",
"message": "Hello Bob, how are you?",
@@ -140,6 +143,7 @@ describe('more than one sequence diagram', () => {
},
{
"activate": false,
"centralConnection": 0,
"from": "Bob",
"id": "1",
"message": "I am good thanks!",
@@ -160,6 +164,7 @@ describe('more than one sequence diagram', () => {
[
{
"activate": false,
"centralConnection": 0,
"from": "Alice",
"id": "0",
"message": "Hello John, how are you?",
@@ -169,6 +174,7 @@ describe('more than one sequence diagram', () => {
},
{
"activate": false,
"centralConnection": 0,
"from": "John",
"id": "1",
"message": "I am good thanks!",
@@ -181,6 +187,254 @@ describe('more than one sequence diagram', () => {
});
});
describe('Central Connection Parsing', () => {
describe('when parsing central connection syntax', () => {
it('should parse actor ()->>() actor syntax as CENTRAL_CONNECTION_DUAL', async () => {
const diagram = await Diagram.fromText(`
sequenceDiagram
participant Alice
participant Bob
Alice ()->>() Bob: Hello Bob, how are you?
`);
const messages = diagram.db.getMessages();
expect(messages).toHaveLength(3); // addMessage + centralConnection + centralConnectionReverse
// Find the actual message (type: 'addMessage')
const actualMessage = messages.find((msg) => msg.type !== undefined && msg.from && msg.to);
expect(actualMessage).toMatchObject({
from: 'Alice',
to: 'Bob',
message: 'Hello Bob, how are you?',
centralConnection: 61, // CENTRAL_CONNECTION_DUAL
activate: true,
type: 0, // SOLID (based on test output)
});
});
it('should parse actor ()-->>() actor syntax as CENTRAL_CONNECTION_DUAL', async () => {
const diagram = await Diagram.fromText(`
sequenceDiagram
participant Alice
participant Bob
Alice ()-->>() Bob: Hello Bob, how are you?
`);
const messages = diagram.db.getMessages();
expect(messages).toHaveLength(3); // addMessage + centralConnection + centralConnectionReverse
const actualMessage = messages.find((msg) => msg.type !== undefined && msg.from && msg.to);
expect(actualMessage).toMatchObject({
from: 'Alice',
to: 'Bob',
message: 'Hello Bob, how are you?',
centralConnection: 61, // CENTRAL_CONNECTION_DUAL
activate: true,
type: 1, // DOTTED (based on test output)
});
});
it('should parse actor ->>() actor syntax as CENTRAL_CONNECTION', async () => {
const diagram = await Diagram.fromText(`
sequenceDiagram
participant Alice
participant Bob
Alice ->>() Bob: Hello Bob, how are you?
`);
const messages = diagram.db.getMessages();
expect(messages).toHaveLength(2); // addMessage + centralConnection (no activation for this pattern)
const actualMessage = messages.find((msg) => msg.type !== undefined && msg.from && msg.to);
expect(actualMessage).toMatchObject({
from: 'Alice',
to: 'Bob',
message: 'Hello Bob, how are you?',
centralConnection: 59, // CENTRAL_CONNECTION
activate: true,
type: 0, // SOLID (based on actual parsing)
});
});
it('should parse actor ()-->> actor syntax as CENTRAL_CONNECTION_REVERSE', async () => {
const diagram = await Diagram.fromText(`
sequenceDiagram
participant Alice
participant Bob
Alice ()-->> Bob: Hello Bob, how are you?
`);
const messages = diagram.db.getMessages();
expect(messages).toHaveLength(2); // addMessage + centralConnectionReverse
const actualMessage = messages.find((msg) => msg.type !== undefined && msg.from && msg.to);
expect(actualMessage).toMatchObject({
from: 'Alice',
to: 'Bob',
message: 'Hello Bob, how are you?',
centralConnection: 60, // CENTRAL_CONNECTION_REVERSE
activate: false,
type: 1, // DOTTED (based on test output)
});
});
it('should parse actor ()->> actor syntax as CENTRAL_CONNECTION_REVERSE', async () => {
const diagram = await Diagram.fromText(`
sequenceDiagram
participant Alice
participant Bob
Alice ()->> Bob: Hello Bob, how are you?
`);
const messages = diagram.db.getMessages();
expect(messages).toHaveLength(2); // addMessage + centralConnectionReverse
const actualMessage = messages.find((msg) => msg.type !== undefined && msg.from && msg.to);
expect(actualMessage).toMatchObject({
from: 'Alice',
to: 'Bob',
message: 'Hello Bob, how are you?',
centralConnection: 60, // CENTRAL_CONNECTION_REVERSE
activate: false,
type: 0, // SOLID (based on test output)
});
});
it('should parse actor ()<<-->>() actor syntax as CENTRAL_CONNECTION_DUAL', async () => {
const diagram = await Diagram.fromText(`
sequenceDiagram
participant Alice
participant Bob
Alice ()<<-->>() Bob: Hello Bob, how are you?
`);
const messages = diagram.db.getMessages();
expect(messages).toHaveLength(3); // addMessage + centralConnection + centralConnectionReverse
const actualMessage = messages.find((msg) => msg.type !== undefined && msg.from && msg.to);
expect(actualMessage).toMatchObject({
from: 'Alice',
to: 'Bob',
message: 'Hello Bob, how are you?',
centralConnection: 61, // CENTRAL_CONNECTION_DUAL
activate: true,
type: 34, // BIDIRECTIONAL_DOTTED
});
});
it('should parse actor ()<<->>() actor syntax as CENTRAL_CONNECTION_DUAL', async () => {
const diagram = await Diagram.fromText(`
sequenceDiagram
participant Alice
participant Bob
Alice ()<<->>() Bob: Hello Bob, how are you?
`);
const messages = diagram.db.getMessages();
expect(messages).toHaveLength(3); // addMessage + centralConnection + centralConnectionReverse
const actualMessage = messages.find((msg) => msg.type !== undefined && msg.from && msg.to);
expect(actualMessage).toMatchObject({
from: 'Alice',
to: 'Bob',
message: 'Hello Bob, how are you?',
centralConnection: 61, // CENTRAL_CONNECTION_DUAL
activate: true,
type: 33, // BIDIRECTIONAL_SOLID
});
});
it('should handle multiple central connection types in one diagram', async () => {
const diagram = await Diagram.fromText(`
sequenceDiagram
participant Alice
participant Bob
participant Charlie
Alice ()->>() Bob: Message 1
Bob ()-->> Charlie: Message 2
Charlie ()<<-->>() Alice: Message 3
`);
const messages = diagram.db.getMessages();
expect(messages).toHaveLength(8); // 3 addMessages + 5 central connection markers
// Filter to get only the actual messages
const actualMessages = messages.filter((msg) => msg.type !== undefined && msg.from && msg.to);
expect(actualMessages).toHaveLength(3);
expect(actualMessages[0]).toMatchObject({
from: 'Alice',
to: 'Bob',
centralConnection: 61, // CENTRAL_CONNECTION_DUAL (()->>())
});
expect(actualMessages[1]).toMatchObject({
from: 'Bob',
to: 'Charlie',
centralConnection: 60, // CENTRAL_CONNECTION_REVERSE (()-->>)
});
expect(actualMessages[2]).toMatchObject({
from: 'Charlie',
to: 'Alice',
centralConnection: 61, // CENTRAL_CONNECTION_DUAL (()<<-->>())
});
});
it('should handle central connections with different arrow types', async () => {
const diagram = await Diagram.fromText(`
sequenceDiagram
participant Alice
participant Bob
Alice ()-x() Bob: Cross message
Alice ()--x() Bob: Dotted cross message
`);
const messages = diagram.db.getMessages();
expect(messages).toHaveLength(6); // 2 addMessages + 4 central connection markers
const actualMessages = messages.filter((msg) => msg.type !== undefined && msg.from && msg.to);
expect(actualMessages).toHaveLength(2);
expect(actualMessages[0]).toMatchObject({
from: 'Alice',
to: 'Bob',
centralConnection: 61, // CENTRAL_CONNECTION_DUAL (()-x())
type: 3, // SOLID_CROSS
});
expect(actualMessages[1]).toMatchObject({
from: 'Alice',
to: 'Bob',
centralConnection: 61, // CENTRAL_CONNECTION_DUAL (()--x())
type: 4, // DOTTED_CROSS
});
});
it('should not break existing parsing without central connections', async () => {
const diagram = await Diagram.fromText(`
sequenceDiagram
participant Alice
participant Bob
Alice ->> Bob: Normal message
Bob -->> Alice: Normal dotted message
Alice -x Bob: Normal cross message
`);
const messages = diagram.db.getMessages();
expect(messages).toHaveLength(3);
messages.forEach((msg) => {
expect(msg.centralConnection).toBe(0); // No central connection
});
expect(messages[0].type).toBe(0); // SOLID (based on actual parsing)
expect(messages[1].type).toBe(1); // DOTTED (based on actual parsing)
expect(messages[2].type).toBe(3); // SOLID_CROSS
});
});
});
describe('when parsing a sequenceDiagram', function () {
let diagram;
beforeEach(async function () {
@@ -225,65 +479,6 @@ Bob-->Alice: I am good thanks!`;
expect(diagram.db.showSequenceNumbers()).toBe(true);
});
it('should support autonumber with start value', async () => {
const str = `
sequenceDiagram
autonumber 10
Alice->Bob: Hello
Bob-->Alice: Hi
`;
const diagram = await Diagram.fromText(str);
// Verify AUTONUMBER control message
const autoMsg = diagram.db.getMessages().find((m) => m.type === diagram.db.LINETYPE.AUTONUMBER);
expect(autoMsg).toBeTruthy();
expect(autoMsg.message.start).toBe(10);
expect(autoMsg.message.step).toBe(1);
expect(autoMsg.message.visible).toBe(true);
// After render, sequence numbers should be enabled
await diagram.renderer.draw(str, 'tst', '1.2.3', diagram);
expect(diagram.db.showSequenceNumbers()).toBe(true);
});
it('should support autonumber with start and step values', async () => {
const str = `
sequenceDiagram
autonumber 5 2
Alice->Bob: Hello
Bob-->Alice: Hi
`;
const diagram = await Diagram.fromText(str);
const autoMsg = diagram.db.getMessages().find((m) => m.type === diagram.db.LINETYPE.AUTONUMBER);
expect(autoMsg).toBeTruthy();
expect(autoMsg.message.start).toBe(5);
expect(autoMsg.message.step).toBe(2);
expect(autoMsg.message.visible).toBe(true);
await diagram.renderer.draw(str, 'tst', '1.2.3', diagram);
expect(diagram.db.showSequenceNumbers()).toBe(true);
});
it('should support turning autonumber off', async () => {
const str = `
sequenceDiagram
autonumber off
Alice->Bob: Hello
Bob-->Alice: Hi
`;
const diagram = await Diagram.fromText(str);
const autoMsg = diagram.db.getMessages().find((m) => m.type === diagram.db.LINETYPE.AUTONUMBER);
expect(autoMsg).toBeTruthy();
expect(autoMsg.message.start).toBeUndefined();
expect(autoMsg.message.step).toBeUndefined();
expect(autoMsg.message.visible).toBe(false);
await diagram.renderer.draw(str, 'tst', '1.2.3', diagram);
expect(diagram.db.showSequenceNumbers()).toBe(false);
});
it('should handle a sequenceDiagram definition with a title:', async () => {
const diagram = await Diagram.fromText(`
sequenceDiagram
@@ -2117,6 +2312,36 @@ Bob->>Alice:Got it!
expect(messages[0].from).toBe('Alice');
expect(messages[0].to).toBe('Bob');
});
it('1 should parse ', async () => {
const diagram = await Diagram.fromText(`
sequenceDiagram
actor Bob
actor Alice
Bob -|\\ Alice: Hello Alice, how are you?
Bob -|/ Alice: Hello Alice, how are you?
Bob -// Alice: Hello Alice, how are you?
Bob -\\\\ Alice: Hello Alice, how are you?
Bob \\|- Alice: Hello Alice, how are you?
Bob /|- Alice: Hello Alice, how are you?
Bob //- Alice: Hello Alice, how are you?
Bob \\\\- Alice: Hello Alice, how are you?
`);
const messages = diagram.db.getMessages();
});
it('2 should parse ', async () => {
const diagram = await Diagram.fromText(`
sequenceDiagram
actor Bob
actor Alice
Alice ()<<->>() Bob: hey?
`);
const messages = diagram.db.getMessages();
});
describe('when parsing extended participant syntax', () => {
it('should parse participants with different quote styles and whitespace', async () => {
const diagram = await Diagram.fromText(`
@@ -2319,7 +2544,7 @@ Bob->>Alice:Got it!
const diagram = await Diagram.fromText(`
sequenceDiagram
participant Q@{ "type" : "queue" }
Q->Q: test
Q->Q: test
`);
const actors = diagram.db.getActors();
expect(actors.get('Q').type).toBe('queue');
@@ -2384,5 +2609,17 @@ Bob->>Alice:Got it!
expect(actors.get('E').type).toBe('entity');
expect(actors.get('E').description).toBe('E');
});
it('should handle fail parsing when alias token causes conflicts in participant definition', async () => {
let error = false;
try {
await Diagram.fromText(`
sequenceDiagram
participant SAS MyServiceWithMoreThan20Chars <br> service decription
`);
} catch (e) {
error = true;
}
expect(error).toBe(true);
});
});
});

View File

@@ -1,7 +1,6 @@
import type { DiagramDefinition } from '../../diagram-api/types.js';
// @ts-ignore: JISON doesn't support types
// import parser from './parser/sequenceDiagram.jison';
import parser from './parser/sequenceParser.ts';
import parser from './parser/sequenceDiagram.jison';
import { SequenceDB } from './sequenceDb.js';
import styles from './styles.js';
import { setConfig } from '../../diagram-api/diagramAPI.js';

View File

@@ -282,6 +282,49 @@ const drawNote = async function (elem: any, noteModel: NoteModel) {
bounds.models.addNote(noteModel);
};
const drawCentralConnection = function (
elem: any,
msg: any,
msgModel: any,
diagObj: Diagram,
startx: number,
stopx: number,
lineStartY: number
) {
const actors = diagObj.db.getActors();
const fromActor = actors.get(msg.from);
const toActor = actors.get(msg.to);
const fromCenter = fromActor.x + fromActor.width / 2;
const toCenter = toActor.x + toActor.width / 2;
const g = elem.append('g');
const drawCircle = (cx: number) => {
g.append('circle')
.attr('cx', cx)
.attr('cy', lineStartY)
.attr('r', 5)
.attr('width', 10)
.attr('height', 10);
};
const { CENTRAL_CONNECTION, CENTRAL_CONNECTION_REVERSE, CENTRAL_CONNECTION_DUAL } =
diagObj.db.LINETYPE;
switch (msg.centralConnection) {
case CENTRAL_CONNECTION:
drawCircle(toCenter);
break;
case CENTRAL_CONNECTION_REVERSE:
drawCircle(fromCenter);
break;
case CENTRAL_CONNECTION_DUAL:
drawCircle(fromCenter);
drawCircle(toCenter);
break;
}
};
const messageFont = (cnf) => {
return {
fontFamily: cnf.messageFontFamily,
@@ -367,7 +410,7 @@ async function boundMessage(_diagram, msgModel): Promise<number> {
* @param lineStartY - The Y coordinate at which the message line starts
* @param diagObj - The diagram object.
*/
const drawMessage = async function (diagram, msgModel, lineStartY: number, diagObj: Diagram) {
const drawMessage = async function (diagram, msgModel, lineStartY: number, diagObj: Diagram, msg) {
const { startx, stopx, starty, message, type, sequenceIndex, sequenceVisible } = msgModel;
const textDims = utils.calculateTextDimensions(message, messageFont(conf));
const textObj = svgDrawCommon.getTextObj();
@@ -433,6 +476,9 @@ const drawMessage = async function (diagram, msgModel, lineStartY: number, diagO
line.attr('y1', lineStartY);
line.attr('x2', stopx);
line.attr('y2', lineStartY);
if (hasCentralConnection(msg, diagObj)) {
drawCentralConnection(diagram, msg, msgModel, diagObj, startx, stopx, lineStartY);
}
}
// Make an SVG Container
// Draw the line
@@ -441,7 +487,15 @@ const drawMessage = async function (diagram, msgModel, lineStartY: number, diagO
type === diagObj.db.LINETYPE.DOTTED_CROSS ||
type === diagObj.db.LINETYPE.DOTTED_POINT ||
type === diagObj.db.LINETYPE.DOTTED_OPEN ||
type === diagObj.db.LINETYPE.BIDIRECTIONAL_DOTTED
type === diagObj.db.LINETYPE.BIDIRECTIONAL_DOTTED ||
type === diagObj.db.LINETYPE.SOLID_TOP_DOTTED ||
type === diagObj.db.LINETYPE.SOLID_BOTTOM_DOTTED ||
type === diagObj.db.LINETYPE.STICK_TOP_DOTTED ||
type === diagObj.db.LINETYPE.STICK_BOTTOM_DOTTED ||
type === diagObj.db.LINETYPE.SOLID_ARROW_TOP_REVERSE_DOTTED ||
type === diagObj.db.LINETYPE.SOLID_ARROW_BOTTOM_REVERSE_DOTTED ||
type === diagObj.db.LINETYPE.STICK_ARROW_TOP_REVERSE_DOTTED ||
type === diagObj.db.LINETYPE.STICK_ARROW_BOTTOM_REVERSE_DOTTED
) {
line.style('stroke-dasharray', '3, 3');
line.attr('class', 'messageLine1');
@@ -457,6 +511,51 @@ const drawMessage = async function (diagram, msgModel, lineStartY: number, diagO
line.attr('stroke-width', 2);
line.attr('stroke', 'none'); // handled by theme/css anyway
line.style('fill', 'none'); // remove any fill colour
if (type === diagObj.db.LINETYPE.SOLID_TOP || type === diagObj.db.LINETYPE.SOLID_TOP_DOTTED) {
line.attr('marker-end', 'url(' + url + '#solidTopArrowHead)');
}
if (
type === diagObj.db.LINETYPE.SOLID_BOTTOM ||
type === diagObj.db.LINETYPE.SOLID_BOTTOM_DOTTED
) {
line.attr('marker-end', 'url(' + url + '#solidBottomArrowHead)');
}
if (type === diagObj.db.LINETYPE.STICK_TOP || type === diagObj.db.LINETYPE.STICK_TOP_DOTTED) {
line.attr('marker-end', 'url(' + url + '#stickTopArrowHead)');
}
if (
type === diagObj.db.LINETYPE.STICK_BOTTOM ||
type === diagObj.db.LINETYPE.STICK_BOTTOM_DOTTED
) {
line.attr('marker-end', 'url(' + url + '#stickBottomArrowHead)');
}
if (
type === diagObj.db.LINETYPE.SOLID_ARROW_TOP_REVERSE ||
type === diagObj.db.LINETYPE.SOLID_ARROW_TOP_REVERSE_DOTTED
) {
line.attr('marker-start', 'url(' + url + '#solidBottomArrowHead)');
}
if (
type === diagObj.db.LINETYPE.SOLID_ARROW_BOTTOM_REVERSE ||
type === diagObj.db.LINETYPE.SOLID_ARROW_BOTTOM_REVERSE_DOTTED
) {
line.attr('marker-start', 'url(' + url + '#solidTopArrowHead)');
}
if (
type === diagObj.db.LINETYPE.STICK_ARROW_TOP_REVERSE ||
type === diagObj.db.LINETYPE.STICK_ARROW_TOP_REVERSE_DOTTED
) {
line.attr('marker-start', 'url(' + url + '#stickBottomArrowHead)');
}
if (
type === diagObj.db.LINETYPE.STICK_ARROW_BOTTOM_REVERSE ||
type === diagObj.db.LINETYPE.STICK_ARROW_BOTTOM_REVERSE_DOTTED
) {
line.attr('marker-start', 'url(' + url + '#stickTopArrowHead)');
}
if (type === diagObj.db.LINETYPE.SOLID || type === diagObj.db.LINETYPE.DOTTED) {
line.attr('marker-end', 'url(' + url + '#arrowhead)');
}
@@ -481,7 +580,18 @@ const drawMessage = async function (diagram, msgModel, lineStartY: number, diagO
type === diagObj.db.LINETYPE.BIDIRECTIONAL_SOLID ||
type === diagObj.db.LINETYPE.BIDIRECTIONAL_DOTTED;
if (isBidirectional) {
const isReverseArrowType =
type === diagObj.db.LINETYPE.SOLID_ARROW_TOP_REVERSE ||
type === diagObj.db.LINETYPE.SOLID_ARROW_TOP_REVERSE_DOTTED ||
type === diagObj.db.LINETYPE.SOLID_ARROW_BOTTOM_REVERSE ||
type === diagObj.db.LINETYPE.SOLID_ARROW_BOTTOM_REVERSE_DOTTED ||
type === diagObj.db.LINETYPE.STICK_ARROW_TOP_REVERSE ||
type === diagObj.db.LINETYPE.STICK_ARROW_TOP_REVERSE_DOTTED ||
type === diagObj.db.LINETYPE.STICK_ARROW_BOTTOM_REVERSE ||
type === diagObj.db.LINETYPE.STICK_ARROW_BOTTOM_REVERSE_DOTTED;
let x = 0;
if (isBidirectional || isReverseArrowType) {
const SEQUENCE_NUMBER_RADIUS = 6;
if (startx < stopx) {
@@ -489,6 +599,7 @@ const drawMessage = async function (diagram, msgModel, lineStartY: number, diagO
} else {
line.attr('x1', startx + SEQUENCE_NUMBER_RADIUS);
}
x = 3.5;
}
diagram
@@ -498,7 +609,8 @@ const drawMessage = async function (diagram, msgModel, lineStartY: number, diagO
.attr('x2', startx)
.attr('y2', lineStartY)
.attr('stroke-width', 0)
.attr('marker-start', 'url(' + url + '#sequencenumber)');
.attr('marker-start', 'url(' + url + '#sequencenumber)')
.attr('transform', `translate(-${x}, 0)`);
diagram
.append('text')
@@ -508,7 +620,8 @@ const drawMessage = async function (diagram, msgModel, lineStartY: number, diagO
.attr('font-size', '12px')
.attr('text-anchor', 'middle')
.attr('class', 'sequenceNumber')
.text(sequenceIndex);
.text(sequenceIndex)
.attr('transform', `translate(-${x}, 0)`);
}
};
@@ -857,6 +970,10 @@ export const draw = async function (_text: string, id: string, _version: string,
svgDraw.insertArrowCrossHead(diagram);
svgDraw.insertArrowFilledHead(diagram);
svgDraw.insertSequenceNumber(diagram);
svgDraw.insertSolidTopArrowHead(diagram);
svgDraw.insertSolidBottomArrowHead(diagram);
svgDraw.insertStickTopArrowHead(diagram);
svgDraw.insertStickBottomArrowHead(diagram);
/**
* @param msg - The message to draw.
@@ -897,6 +1014,12 @@ export const draw = async function (_text: string, id: string, _version: string,
case diagObj.db.LINETYPE.ACTIVE_START:
bounds.newActivation(msg, diagram, actors);
break;
case diagObj.db.LINETYPE.CENTRAL_CONNECTION:
bounds.newActivation(msg, diagram, actors);
break;
case diagObj.db.LINETYPE.CENTRAL_CONNECTION_REVERSE:
bounds.newActivation(msg, diagram, actors);
break;
case diagObj.db.LINETYPE.ACTIVE_END:
activeEnd(msg, bounds.getVerticalPos());
break;
@@ -1055,7 +1178,7 @@ export const draw = async function (_text: string, id: string, _version: string,
createdActors,
destroyedActors
);
messagesToDraw.push({ messageModel: msgModel, lineStartY: lineStartY });
messagesToDraw.push({ messageModel: msgModel, lineStartY: lineStartY, msg });
bounds.models.addMessage(msgModel);
} catch (e) {
log.error('error while drawing message', e);
@@ -1068,6 +1191,27 @@ export const draw = async function (_text: string, id: string, _version: string,
diagObj.db.LINETYPE.SOLID_OPEN,
diagObj.db.LINETYPE.DOTTED_OPEN,
diagObj.db.LINETYPE.SOLID,
diagObj.db.LINETYPE.SOLID_TOP,
diagObj.db.LINETYPE.SOLID_BOTTOM,
diagObj.db.LINETYPE.STICK_TOP,
diagObj.db.LINETYPE.STICK_BOTTOM,
diagObj.db.LINETYPE.SOLID_TOP_DOTTED,
diagObj.db.LINETYPE.SOLID_BOTTOM_DOTTED,
diagObj.db.LINETYPE.STICK_TOP_DOTTED,
diagObj.db.LINETYPE.STICK_BOTTOM_DOTTED,
diagObj.db.LINETYPE.SOLID_ARROW_TOP_REVERSE,
diagObj.db.LINETYPE.SOLID_ARROW_BOTTOM_REVERSE,
diagObj.db.LINETYPE.STICK_ARROW_TOP_REVERSE,
diagObj.db.LINETYPE.STICK_ARROW_BOTTOM_REVERSE,
diagObj.db.LINETYPE.SOLID_ARROW_TOP_REVERSE_DOTTED,
diagObj.db.LINETYPE.SOLID_ARROW_BOTTOM_REVERSE_DOTTED,
diagObj.db.LINETYPE.STICK_ARROW_TOP_REVERSE_DOTTED,
diagObj.db.LINETYPE.STICK_ARROW_BOTTOM_REVERSE_DOTTED,
diagObj.db.LINETYPE.DOTTED,
diagObj.db.LINETYPE.SOLID_CROSS,
diagObj.db.LINETYPE.DOTTED_CROSS,
@@ -1087,7 +1231,7 @@ export const draw = async function (_text: string, id: string, _version: string,
await drawActors(diagram, actors, actorKeys, false);
for (const e of messagesToDraw) {
await drawMessage(diagram, e.messageModel, e.lineStartY, diagObj);
await drawMessage(diagram, e.messageModel, e.lineStartY, diagObj, e.msg);
}
if (conf.mirrorActors) {
await drawActors(diagram, actors, actorKeys, true);
@@ -1461,12 +1605,85 @@ const buildNoteModel = async function (msg, actors, diagObj) {
return noteModel;
};
// Central connection positioning constants
const CENTRAL_CONNECTION_BASE_OFFSET = 4;
const CENTRAL_CONNECTION_BIDIRECTIONAL_OFFSET = 6;
/**
* Check if a message has central connection
* @param msg - The message object
* @param diagObj - The diagram object containing LINETYPE constants
* @returns True if the message has any type of central connection
*/
const hasCentralConnection = function (msg, diagObj) {
const { CENTRAL_CONNECTION, CENTRAL_CONNECTION_REVERSE, CENTRAL_CONNECTION_DUAL } =
diagObj.db.LINETYPE;
return [CENTRAL_CONNECTION, CENTRAL_CONNECTION_REVERSE, CENTRAL_CONNECTION_DUAL].includes(
msg.centralConnection
);
};
/**
* Calculate the positioning offset for central connection arrows
* @param msg - The message object
* @param diagObj - The diagram object containing LINETYPE constants
* @param isArrowToRight - Whether the arrow is pointing to the right
* @returns The offset to apply to startx position
*/
const calculateCentralConnectionOffset = function (msg, diagObj, isArrowToRight) {
const {
CENTRAL_CONNECTION_REVERSE,
CENTRAL_CONNECTION_DUAL,
BIDIRECTIONAL_SOLID,
BIDIRECTIONAL_DOTTED,
} = diagObj.db.LINETYPE;
let offset = 0;
if (
msg.centralConnection === CENTRAL_CONNECTION_REVERSE ||
msg.centralConnection === CENTRAL_CONNECTION_DUAL
) {
offset += CENTRAL_CONNECTION_BASE_OFFSET;
}
if (
msg.centralConnection === CENTRAL_CONNECTION_DUAL &&
(msg.type === BIDIRECTIONAL_SOLID || msg.type === BIDIRECTIONAL_DOTTED)
) {
offset += isArrowToRight ? 0 : -CENTRAL_CONNECTION_BIDIRECTIONAL_OFFSET;
}
return offset;
};
const buildMessageModel = function (msg, actors, diagObj) {
if (
![
diagObj.db.LINETYPE.SOLID_OPEN,
diagObj.db.LINETYPE.DOTTED_OPEN,
diagObj.db.LINETYPE.SOLID,
diagObj.db.LINETYPE.SOLID_TOP,
diagObj.db.LINETYPE.SOLID_BOTTOM,
diagObj.db.LINETYPE.STICK_TOP,
diagObj.db.LINETYPE.STICK_BOTTOM,
diagObj.db.LINETYPE.SOLID_TOP_DOTTED,
diagObj.db.LINETYPE.SOLID_BOTTOM_DOTTED,
diagObj.db.LINETYPE.STICK_TOP_DOTTED,
diagObj.db.LINETYPE.STICK_BOTTOM_DOTTED,
diagObj.db.LINETYPE.SOLID_ARROW_TOP_REVERSE,
diagObj.db.LINETYPE.SOLID_ARROW_BOTTOM_REVERSE,
diagObj.db.LINETYPE.STICK_ARROW_TOP_REVERSE,
diagObj.db.LINETYPE.STICK_ARROW_BOTTOM_REVERSE,
diagObj.db.LINETYPE.SOLID_ARROW_TOP_REVERSE_DOTTED,
diagObj.db.LINETYPE.SOLID_ARROW_BOTTOM_REVERSE_DOTTED,
diagObj.db.LINETYPE.STICK_ARROW_TOP_REVERSE_DOTTED,
diagObj.db.LINETYPE.STICK_ARROW_BOTTOM_REVERSE_DOTTED,
diagObj.db.LINETYPE.DOTTED,
diagObj.db.LINETYPE.SOLID_CROSS,
diagObj.db.LINETYPE.DOTTED_CROSS,
@@ -1484,6 +1701,8 @@ const buildMessageModel = function (msg, actors, diagObj) {
let startx = isArrowToRight ? fromRight : fromLeft;
let stopx = isArrowToRight ? toLeft : toRight;
// Apply central connection positioning adjustments
startx += calculateCentralConnectionOffset(msg, diagObj, isArrowToRight);
// As the line width is considered, the left and right values will be off by 2.
const isArrowToActivation = Math.abs(toLeft - toRight) > 2;
@@ -1517,7 +1736,30 @@ const buildMessageModel = function (msg, actors, diagObj) {
* Shorten the length of arrow at the end and move the marker forward (using refX) to have a clean arrowhead
* This is not required for open arrows that don't have arrowheads
*/
if (![diagObj.db.LINETYPE.SOLID_OPEN, diagObj.db.LINETYPE.DOTTED_OPEN].includes(msg.type)) {
if (
![
diagObj.db.LINETYPE.SOLID_OPEN,
diagObj.db.LINETYPE.DOTTED_OPEN,
diagObj.db.LINETYPE.STICK_TOP,
diagObj.db.LINETYPE.STICK_BOTTOM,
diagObj.db.LINETYPE.STICK_TOP_DOTTED,
diagObj.db.LINETYPE.STICK_BOTTOM_DOTTED,
diagObj.db.LINETYPE.SOLID_ARROW_TOP_REVERSE_DOTTED,
diagObj.db.LINETYPE.SOLID_ARROW_BOTTOM_REVERSE_DOTTED,
diagObj.db.LINETYPE.STICK_ARROW_TOP_REVERSE,
diagObj.db.LINETYPE.STICK_ARROW_BOTTOM_REVERSE,
diagObj.db.LINETYPE.STICK_ARROW_TOP_REVERSE_DOTTED,
diagObj.db.LINETYPE.STICK_ARROW_BOTTOM_REVERSE_DOTTED,
diagObj.db.LINETYPE.SOLID_ARROW_TOP_REVERSE,
diagObj.db.LINETYPE.SOLID_ARROW_BOTTOM_REVERSE,
].includes(msg.type)
) {
stopx += adjustValue(3);
}
@@ -1525,9 +1767,14 @@ const buildMessageModel = function (msg, actors, diagObj) {
* Shorten start position of bidirectional arrow to accommodate for second arrowhead
*/
if (
[diagObj.db.LINETYPE.BIDIRECTIONAL_SOLID, diagObj.db.LINETYPE.BIDIRECTIONAL_DOTTED].includes(
msg.type
)
[
diagObj.db.LINETYPE.BIDIRECTIONAL_SOLID,
diagObj.db.LINETYPE.BIDIRECTIONAL_DOTTED,
diagObj.db.LINETYPE.SOLID_ARROW_TOP_REVERSE_DOTTED,
diagObj.db.LINETYPE.SOLID_ARROW_BOTTOM_REVERSE_DOTTED,
diagObj.db.LINETYPE.SOLID_ARROW_TOP_REVERSE,
diagObj.db.LINETYPE.SOLID_ARROW_BOTTOM_REVERSE,
].includes(msg.type)
) {
startx -= adjustValue(3);
}

View File

@@ -1709,6 +1709,77 @@ const _drawMenuItemTextCandidateFunc = (function () {
};
})();
/**
* Setup arrow head and define the marker. The result is appended to the svg.
*
* @param elem
*/
export const insertSolidTopArrowHead = function (elem) {
elem
.append('defs')
.append('marker')
.attr('id', 'solidTopArrowHead')
.attr('refX', 7.9)
.attr('refY', 7.25)
.attr('markerUnits', 'userSpaceOnUse')
.attr('markerWidth', 12)
.attr('markerHeight', 12)
.attr('orient', 'auto-start-reverse')
.append('path')
.attr('d', 'M 0 0 L 10 8 L 0 8 z'); // this is actual shape for arrowhead
};
export const insertSolidBottomArrowHead = function (elem) {
elem
.append('defs')
.append('marker')
.attr('id', 'solidBottomArrowHead')
.attr('refX', 7.9)
.attr('refY', 0.75)
.attr('markerUnits', 'userSpaceOnUse')
.attr('markerWidth', 12)
.attr('markerHeight', 12)
.attr('orient', 'auto-start-reverse')
.append('path')
.attr('d', 'M 0 0 L 10 0 L 0 8 z');
};
export const insertStickTopArrowHead = function (elem) {
elem
.append('defs')
.append('marker')
.attr('id', 'stickTopArrowHead')
.attr('refX', 7.5)
.attr('refY', 7)
.attr('markerUnits', 'userSpaceOnUse')
.attr('markerWidth', 12)
.attr('markerHeight', 12)
.attr('orient', 'auto-start-reverse')
.append('path')
.attr('d', 'M 0 0 L 7 7')
.attr('stroke', 'black')
.attr('stroke-width', 1.5)
.attr('fill', 'none');
};
export const insertStickBottomArrowHead = function (elem) {
elem
.append('defs')
.append('marker')
.attr('id', 'stickBottomArrowHead')
.attr('refX', 7.5)
.attr('refY', 0)
.attr('markerUnits', 'userSpaceOnUse')
.attr('markerWidth', 12)
.attr('markerHeight', 12)
.attr('orient', 'auto-start-reverse')
.append('path')
.attr('d', 'M 0 7 L 7 0')
.attr('stroke', 'black')
.attr('stroke-width', 1.5)
.attr('fill', 'none');
};
export default {
drawRect,
drawText,
@@ -1731,4 +1802,8 @@ export default {
getNoteRect,
fixLifeLineHeights,
sanitizeUrl,
insertSolidTopArrowHead,
insertSolidBottomArrowHead,
insertStickTopArrowHead,
insertStickBottomArrowHead,
};

View File

@@ -35,6 +35,7 @@ export interface Message {
type?: number;
activate?: boolean;
placement?: string;
centralConnection?: number;
}
export interface AddMessageParams {
@@ -50,6 +51,8 @@ export interface AddMessageParams {
| 'destroyParticipant'
| 'activeStart'
| 'activeEnd'
| 'centralConnection'
| 'centralConnectionReverse'
| 'addNote'
| 'addLinks'
| 'addALink'

View File

@@ -40,105 +40,26 @@ const openSourceFeatures: Feature[] = [
{ iconUrl: '/icons/version-history.svg', featureName: 'Version history' },
];
const playgroundFeatures: Feature[] = [
{ iconUrl: '/icons/public.svg', featureName: 'Diagram stored in URL' },
{ iconUrl: '/icons/terminal.svg', featureName: 'Code editor' },
{ iconUrl: '/icons/whiteboard.svg', featureName: 'Whiteboard' },
const editorColumns: EditorColumn[] = [
{
title: 'Mermaid Pro',
description: 'Unlock AI and real-time collaboration',
highlighted: true,
redBarText: 'Recommended',
proTrialButtonText: 'Start free trial',
proTrialUrl:
'https://www.mermaidchart.com/app/sign-up?utm_source=mermaid_js&utm_medium=2_editor_selection&utm_campaign=start_pro&redirect=%2Fapp%2Fuser%2Fbilling%2Fcheckout%3FisFromMermaid%3Dtrue',
features: mermaidChartFeatures,
},
{
title: 'Open Source',
description: 'Code only, no login',
buttonText: 'Start free',
redirectUrl: 'https://mermaid.live/edit',
features: openSourceFeatures,
},
];
const editorColumnVariants: EditorColumn[][] = [
[
{
title: 'Playground',
description: 'Basic features, no login',
redirectUrl:
'https://www.mermaidchart.com/app/sign-up?utm_source=mermaid_js&utm_medium=3_editor_selection_A&utm_campaign=start_playground',
buttonText: 'Start free',
features: playgroundFeatures,
},
{
title: 'Free or Pro',
description: 'Advanced features, Free or Pro account',
proTrialUrl:
'https://www.mermaidchart.com/app/sign-up?utm_source=mermaid_js&utm_medium=3_editor_selection_A&utm_campaign=start_free',
proTrialButtonText: 'Start free',
highlighted: true,
redBarText: 'Best for collaboration',
features: mermaidChartFeatures,
},
{
title: 'Open Source',
description: 'Code only, no login',
redirectUrl: 'https://mermaid.live/edit',
buttonText: 'Start free',
features: openSourceFeatures,
},
],
[
{
title: 'Mermaid Pro',
description: 'Unlock AI and real-time collaboration',
redirectUrl:
'https://www.mermaidchart.com/app/sign-up?utm_source=mermaid_js&utm_medium=editor_selection_B&utm_campaign=start_free',
buttonText: 'Start Free',
highlighted: true,
redBarText: 'Recommended',
proTrialButtonText: 'Start Pro trial',
proTrialUrl:
'https://www.mermaidchart.com/app/sign-up?utm_source=mermaid_js&utm_medium=editor_selection_B&utm_campaign=start_trial&redirect=%2Fapp%2Fuser%2Fbilling%2Fcheckout%3FisFromMermaid%3Dtrue',
features: mermaidChartFeatures,
},
{
title: 'Open Source',
description: 'Code only, no login',
buttonText: 'Start free',
redirectUrl: 'https://mermaid.live/edit',
isButtonMargined: true,
features: openSourceFeatures,
},
],
[
{
title: 'Mermaid Pro',
description: 'Unlock AI and real-time collaboration',
highlighted: true,
redBarText: 'Recommended',
proTrialButtonText: 'Start free trial',
proTrialUrl:
'https://www.mermaidchart.com/app/sign-up?utm_source=mermaid_js&utm_medium=editor_selection_C&utm_campaign=start_trial&redirect=%2Fapp%2Fuser%2Fbilling%2Fcheckout%3FisFromMermaid%3Dtrue',
features: mermaidChartFeatures,
},
{
title: 'Open Source',
description: 'Code only, no login',
buttonText: 'Start free',
redirectUrl: 'https://mermaid.live/edit',
features: openSourceFeatures,
},
],
[
{
title: 'Mermaid Pro',
description: 'Unlock AI and real-time collaboration',
highlighted: true,
redBarText: 'Recommended',
proTrialButtonText: 'Start free',
proTrialUrl:
'https://www.mermaidchart.com/app/sign-up?utm_source=mermaid_js&utm_medium=editor_selection_D&utm_campaign=start_free',
features: mermaidChartFeatures,
},
{
title: 'Open Source',
description: 'Code only, no login',
redirectUrl: 'https://mermaid.live/edit',
buttonText: 'Start free',
features: openSourceFeatures,
},
],
];
const editorColumns = editorColumnVariants[Math.floor(Math.random() * editorColumnVariants.length)];
const isVisible = ref(false);
const handleMouseDown = (e: MouseEvent) => {

View File

@@ -1,7 +1,13 @@
import mermaid, { type MermaidConfig } from 'mermaid';
import zenuml from '../../../../../mermaid-zenuml/dist/mermaid-zenuml.core.mjs';
import tidyTreeLayout from '../../../../../mermaid-layout-tidy-tree/dist/mermaid-layout-tidy-tree.core.mjs';
import layouts from '../../../../../mermaid-layout-elk/dist/mermaid-layout-elk.core.mjs';
const init = mermaid.registerExternalDiagrams([zenuml]);
const init = Promise.all([
mermaid.registerExternalDiagrams([zenuml]),
mermaid.registerLayoutLoaders(layouts),
mermaid.registerLayoutLoaders(tidyTreeLayout),
]);
mermaid.registerIconPacks([
{
name: 'logos',

View File

@@ -17,7 +17,6 @@ While directives allow you to change most of the default configuration settings,
Mermaid basically supports two types of configuration options to be overridden by directives.
1. _General/Top Level configurations_ : These are the configurations that are available and applied to all the diagram. **Some of the most important top-level** configurations are:
- theme
- fontFamily
- logLevel

Some files were not shown because too many files have changed in this diff Show More