-
-
Notifications
You must be signed in to change notification settings - Fork 6.5k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat(flowchart): add classDef style group definition #3923
feat(flowchart): add classDef style group definition #3923
Conversation
enable to add styles to many classDef in a single statement
I have some questions about this PR:
1. Purpose?Can you clarify what the goal of this PR is? I've read through issue #3036. For example, here is the statement that a users would (theoretically) write in a flowchart diagram text in order to call the addClass() method with many class ids (names):
This would mean you are defining the same class style (font is larger and color is red) with 2 different names: firstStyleID and secondStyleID A user would (and should) just use firstStyleID everywhere in their diagram definition, like this:
I may very well be missing something. 2. No change for a userYour code does change how |
Hey, thanks for your review. |
Thanks for clarifying for me. Makes more sense now. |
Sorry for the wait. I will start from the beginning so that everything is clear (I hope :)) PurposeInitially, this issue was about declaring style (with
instead of
In the discussion, people thought that it could be great to have the same for classes: being allowed to add a class to many nodes at the same time:
instead of
I discovered that those two features were already implemented. But to be consistent, why not having the same for
instead of
No change for a userLet's take the example of the following statement:
Currently (on the develop branch), once this statement is parsed, the Modifying the parser is not (in my opinion) mandatory, as classes and styles are well detected. Instead of having the string classStatement:CLASS SPACE alphaNum SPACE alphaNum
{$$ = $1;yy.setClass($3, $5);}
; export const setClass = function (ids, className) {
ids.split(',').forEach(function (_id) {
// ...
});
}; This could be a good refactoring, but the behavior won't change, and to be honest I'm still not comfortable with Bison grammar rules. |
I will add more documentation on all the features I talked about, and I will try to add more tests :) |
Hi @tomperr. It has been a while since your last comment here. Are you ok? If yes, it would be kind of you if you made any advance on this direction e.g. on these classDef incremental properties on mermaid-code-string composition. I am particularly interested on graphs with colorful arrows and classDef groups. :-) |
Sorry, I just don't have the time these days |
No worries. Take your time. |
@tomperr I have tagged @knsv and @sidharthv96 to review your PR as is |
@knsv @sidharthv96 Can you please review? |
* develop: (783 commits) chore(deps): update all minor dependencies chore: Run codecov based on E2E test status change REAMDME.md coverage from coveralls into codecov Add codecov.yaml Upload E2E set normal mode for vitest coverage Fix path name Add codecov to unit tests Add codecov to E2E chore: Add coverage scripts chore: add excludes chore: update deps Merge coverages Add coverage paths Rebuild chore: update pnpm Add coverage for E2E tests rename plugin variable into info in infoDetector.ts remove cypress/platform/index.html update pnpm-lock.yaml ...
Codecov Report
❗ Your organization is not using the GitHub App Integration. As a result you may experience degraded service beginning May 15th. Please install the Github App Integration for your organization. Read more. Additional details and impacted files@@ Coverage Diff @@
## develop #3923 +/- ##
===========================================
+ Coverage 77.29% 83.50% +6.21%
===========================================
Files 136 136
Lines 10446 10446
Branches 492 492
===========================================
+ Hits 8074 8723 +649
+ Misses 2194 1574 -620
+ Partials 178 149 -29
Flags with carried forward coverage won't be shown. Click here to find out more.
|
@tomperr, Thank you for the contribution! |
I see an approval, I like! :-) do the style apply to the arrow as well? |
[![Mend Renovate](https://app.renovatebot.com/images/banner.svg)](https://renovatebot.com) This PR contains the following updates: | Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | [mermaid](https://togithub.com/mermaid-js/mermaid) | [`10.2.3` -> `10.2.4`](https://renovatebot.com/diffs/npm/mermaid/10.2.3/10.2.4) | [![age](https://badges.renovateapi.com/packages/npm/mermaid/10.2.4/age-slim)](https://docs.renovatebot.com/merge-confidence/) | [![adoption](https://badges.renovateapi.com/packages/npm/mermaid/10.2.4/adoption-slim)](https://docs.renovatebot.com/merge-confidence/) | [![passing](https://badges.renovateapi.com/packages/npm/mermaid/10.2.4/compatibility-slim/10.2.3)](https://docs.renovatebot.com/merge-confidence/) | [![confidence](https://badges.renovateapi.com/packages/npm/mermaid/10.2.4/confidence-slim/10.2.3)](https://docs.renovatebot.com/merge-confidence/) | --- ### Release Notes <details> <summary>mermaid-js/mermaid (mermaid)</summary> ### [`v10.2.4`](https://togithub.com/mermaid-js/mermaid/releases/tag/v10.2.4): 10.2.4 [Compare Source](https://togithub.com/mermaid-js/mermaid/compare/v10.2.3...v10.2.4) #### Features - Add Plausible analytics to mermaid.js.org by [@​sidharthv96](https://togithub.com/sidharthv96) in [https://github.com/mermaid-js/mermaid/pull/4473](https://togithub.com/mermaid-js/mermaid/pull/4473) - Support for development in Docker by [@​nirname](https://togithub.com/nirname) in [https://github.com/mermaid-js/mermaid/pull/4478](https://togithub.com/mermaid-js/mermaid/pull/4478) - standardize info diagram definitions by [@​Yokozuna59](https://togithub.com/Yokozuna59) in [https://github.com/mermaid-js/mermaid/pull/4486](https://togithub.com/mermaid-js/mermaid/pull/4486) - Change C4 stereotype braces from ASCII <\</>> to Unicode «/» by [@​jonathan-r-young](https://togithub.com/jonathan-r-young) in [https://github.com/mermaid-js/mermaid/pull/4460](https://togithub.com/mermaid-js/mermaid/pull/4460) - Add coverage for E2E tests by [@​sidharthv96](https://togithub.com/sidharthv96) in [https://github.com/mermaid-js/mermaid/pull/4498](https://togithub.com/mermaid-js/mermaid/pull/4498) - set normal mode for vitest coverage by [@​Yokozuna59](https://togithub.com/Yokozuna59) in [https://github.com/mermaid-js/mermaid/pull/4505](https://togithub.com/mermaid-js/mermaid/pull/4505) - Use v8 coverage in vitest by [@​sidharthv96](https://togithub.com/sidharthv96) in [https://github.com/mermaid-js/mermaid/pull/4560](https://togithub.com/mermaid-js/mermaid/pull/4560) - feat(flowchart): add classDef style group definition by [@​tomperr](https://togithub.com/tomperr) in [https://github.com/mermaid-js/mermaid/pull/3923](https://togithub.com/mermaid-js/mermaid/pull/3923) - add cypress coverage clean by [@​Yokozuna59](https://togithub.com/Yokozuna59) in [https://github.com/mermaid-js/mermaid/pull/4556](https://togithub.com/mermaid-js/mermaid/pull/4556) - fix(class): keep members in namespace classes by [@​tomperr](https://togithub.com/tomperr) in [https://github.com/mermaid-js/mermaid/pull/4532](https://togithub.com/mermaid-js/mermaid/pull/4532) #### Bugfixes - Add hint on "flowchart" and "graph" by [@​koppor](https://togithub.com/koppor) in [https://github.com/mermaid-js/mermaid/pull/4096](https://togithub.com/mermaid-js/mermaid/pull/4096) - fix(flowchart): apply style on doublecircle by [@​tomperr](https://togithub.com/tomperr) in [https://github.com/mermaid-js/mermaid/pull/4540](https://togithub.com/mermaid-js/mermaid/pull/4540) - fix not rendered style when style is optional by [@​Yokozuna59](https://togithub.com/Yokozuna59) in [https://github.com/mermaid-js/mermaid/pull/4528](https://togithub.com/mermaid-js/mermaid/pull/4528) - fix(flowchart): allow multiple vertices with style by [@​tomperr](https://togithub.com/tomperr) in [https://github.com/mermaid-js/mermaid/pull/4553](https://togithub.com/mermaid-js/mermaid/pull/4553) #### Documentation - change REAMDME.md coverage from coveralls into codecov by [@​Yokozuna59](https://togithub.com/Yokozuna59) in [https://github.com/mermaid-js/mermaid/pull/4507](https://togithub.com/mermaid-js/mermaid/pull/4507) - Update latest news section by [@​huynhicode](https://togithub.com/huynhicode) in [https://github.com/mermaid-js/mermaid/pull/4468](https://togithub.com/mermaid-js/mermaid/pull/4468) - Fix link to Tutorials from n00b-overview page by [@​Spiderpig86](https://togithub.com/Spiderpig86) in [https://github.com/mermaid-js/mermaid/pull/4472](https://togithub.com/mermaid-js/mermaid/pull/4472) - Fix Directives Documentation by [@​adamazing](https://togithub.com/adamazing) in [https://github.com/mermaid-js/mermaid/pull/4475](https://togithub.com/mermaid-js/mermaid/pull/4475) - Correct "Bronze" spelling in timeline docs by [@​adamazing](https://togithub.com/adamazing) in [https://github.com/mermaid-js/mermaid/pull/4467](https://togithub.com/mermaid-js/mermaid/pull/4467) - Document recommended file extension and MIME type docs by [@​bollwyvl](https://togithub.com/bollwyvl) in [https://github.com/mermaid-js/mermaid/pull/4485](https://togithub.com/mermaid-js/mermaid/pull/4485) - Fix typo in quadrant chart documentation by [@​tobie](https://togithub.com/tobie) in [https://github.com/mermaid-js/mermaid/pull/4512](https://togithub.com/mermaid-js/mermaid/pull/4512) - fix cspell issues in \*.md files by [@​Yokozuna59](https://togithub.com/Yokozuna59) in [https://github.com/mermaid-js/mermaid/pull/4531](https://togithub.com/mermaid-js/mermaid/pull/4531) - docs: Howto on foreground color on timelines by [@​mcbeelen](https://togithub.com/mcbeelen) in [https://github.com/mermaid-js/mermaid/pull/4524](https://togithub.com/mermaid-js/mermaid/pull/4524) - Add citation.cff file by [@​schackartk](https://togithub.com/schackartk) in [https://github.com/mermaid-js/mermaid/pull/4521](https://togithub.com/mermaid-js/mermaid/pull/4521) - Update Tutorials.md by [@​ellenealds](https://togithub.com/ellenealds) in [https://github.com/mermaid-js/mermaid/pull/4539](https://togithub.com/mermaid-js/mermaid/pull/4539) - Add Standard Notes extension in integrations page by [@​nienow](https://togithub.com/nienow) in [https://github.com/mermaid-js/mermaid/pull/4557](https://togithub.com/mermaid-js/mermaid/pull/4557) - Fix up Gantt Chart demo by [@​AlexMooney](https://togithub.com/AlexMooney) in [https://github.com/mermaid-js/mermaid/pull/4561](https://togithub.com/mermaid-js/mermaid/pull/4561) #### Chore - Update all patch dependencies (patch) by [@​renovate](https://togithub.com/renovate) in [https://github.com/mermaid-js/mermaid/pull/4482](https://togithub.com/mermaid-js/mermaid/pull/4482) - chore: revise Contributing documentation by [@​weedySeaDragon](https://togithub.com/weedySeaDragon) in [https://github.com/mermaid-js/mermaid/pull/3814](https://togithub.com/mermaid-js/mermaid/pull/3814) - chore(deps): update all minor dependencies (minor) by [@​renovate](https://togithub.com/renovate) in [https://github.com/mermaid-js/mermaid/pull/4435](https://togithub.com/mermaid-js/mermaid/pull/4435) - fix(deps): update all patch dependencies (patch) by [@​renovate](https://togithub.com/renovate) in [https://github.com/mermaid-js/mermaid/pull/4510](https://togithub.com/mermaid-js/mermaid/pull/4510) - fix(deps): update all patch dependencies (patch) by [@​renovate](https://togithub.com/renovate) in [https://github.com/mermaid-js/mermaid/pull/4535](https://togithub.com/mermaid-js/mermaid/pull/4535) - chore(deps): update dependency eslint-plugin-jsdoc to v46 by [@​renovate](https://togithub.com/renovate) in [https://github.com/mermaid-js/mermaid/pull/4544](https://togithub.com/mermaid-js/mermaid/pull/4544) - chore(deps): update dependency jsdom to v22 by [@​renovate](https://togithub.com/renovate) in [https://github.com/mermaid-js/mermaid/pull/4546](https://togithub.com/mermaid-js/mermaid/pull/4546) - chore(deps): update dependency eslint-plugin-unicorn to v47 by [@​renovate](https://togithub.com/renovate) in [https://github.com/mermaid-js/mermaid/pull/4545](https://togithub.com/mermaid-js/mermaid/pull/4545) - chore(deps): update dependency workbox-window to v7 by [@​renovate](https://togithub.com/renovate) in [https://github.com/mermaid-js/mermaid/pull/4547](https://togithub.com/mermaid-js/mermaid/pull/4547) - chore(deps): update node.js to v20 by [@​renovate](https://togithub.com/renovate) in [https://github.com/mermaid-js/mermaid/pull/4548](https://togithub.com/mermaid-js/mermaid/pull/4548) - fix(deps): update all patch dependencies (patch) by [@​renovate](https://togithub.com/renovate) in [https://github.com/mermaid-js/mermaid/pull/4543](https://togithub.com/mermaid-js/mermaid/pull/4543) - add `Suggested Solutions` field in `bug_report.yml` by [@​Yokozuna59](https://togithub.com/Yokozuna59) in [https://github.com/mermaid-js/mermaid/pull/4541](https://togithub.com/mermaid-js/mermaid/pull/4541) #### New Contributors - [@​Spiderpig86](https://togithub.com/Spiderpig86) made their first contribution in [https://github.com/mermaid-js/mermaid/pull/4472](https://togithub.com/mermaid-js/mermaid/pull/4472) - [@​adamazing](https://togithub.com/adamazing) made their first contribution in [https://github.com/mermaid-js/mermaid/pull/4475](https://togithub.com/mermaid-js/mermaid/pull/4475) - [@​koppor](https://togithub.com/koppor) made their first contribution in [https://github.com/mermaid-js/mermaid/pull/4096](https://togithub.com/mermaid-js/mermaid/pull/4096) - [@​nirname](https://togithub.com/nirname) made their first contribution in [https://github.com/mermaid-js/mermaid/pull/4478](https://togithub.com/mermaid-js/mermaid/pull/4478) - [@​Yokozuna59](https://togithub.com/Yokozuna59) made their first contribution in [https://github.com/mermaid-js/mermaid/pull/4486](https://togithub.com/mermaid-js/mermaid/pull/4486) - [@​jonathan-r-young](https://togithub.com/jonathan-r-young) made their first contribution in [https://github.com/mermaid-js/mermaid/pull/4460](https://togithub.com/mermaid-js/mermaid/pull/4460) - [@​tobie](https://togithub.com/tobie) made their first contribution in [https://github.com/mermaid-js/mermaid/pull/4512](https://togithub.com/mermaid-js/mermaid/pull/4512) - [@​schackartk](https://togithub.com/schackartk) made their first contribution in [https://github.com/mermaid-js/mermaid/pull/4521](https://togithub.com/mermaid-js/mermaid/pull/4521) - [@​mcbeelen](https://togithub.com/mcbeelen) made their first contribution in [https://github.com/mermaid-js/mermaid/pull/4524](https://togithub.com/mermaid-js/mermaid/pull/4524) - [@​ellenealds](https://togithub.com/ellenealds) made their first contribution in [https://github.com/mermaid-js/mermaid/pull/4539](https://togithub.com/mermaid-js/mermaid/pull/4539) - [@​nienow](https://togithub.com/nienow) made their first contribution in [https://github.com/mermaid-js/mermaid/pull/4557](https://togithub.com/mermaid-js/mermaid/pull/4557) - [@​AlexMooney](https://togithub.com/AlexMooney) made their first contribution in [https://github.com/mermaid-js/mermaid/pull/4561](https://togithub.com/mermaid-js/mermaid/pull/4561) **Full Changelog**: mermaid-js/mermaid@v10.2.3...v10.2.4 </details> --- ### Configuration 📅 **Schedule**: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined). 🚦 **Automerge**: Disabled by config. Please merge this manually once you are satisfied. ♻ **Rebasing**: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox. 🔕 **Ignore**: Close this PR and you won't be reminded about this update again. --- - [ ] <!-- rebase-check -->If you want to rebase/retry this PR, check this box --- This PR has been generated by [Mend Renovate](https://www.mend.io/free-developer-tools/renovate/). View repository job log [here](https://developer.mend.io/github/levaintech/contented). <!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiIzNS4xNDQuMiIsInVwZGF0ZWRJblZlciI6IjM1LjE0NC4yIiwidGFyZ2V0QnJhbmNoIjoibWFpbiJ9--> Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
📑 Summary
Enable to add styles to many classDef in a single statement
Add unit test on
addClass
function offlowDb
Resolves #3036
📏 Design Decisions
Split the ids using
,
.e.g.
classDef a,b stroke:gold
📋 Tasks
Make sure you
develop
branch