Add directive support to all diagrams by preprocessing

[sidharthv96]

📑 Summary

Removes the directive grammar from the jison files.
Directives, frontmatter and comments will be preprocessed and removed, before parsing.
Hence, all diagrams will now support directives.

Resolves #4755

📏 Design Decisions

A preprocess step was added, which will extract metadata and remove comments, directives and frontmatter.
wrap and title needed to be handled separately for legacy support.

📋 Tasks

Make sure you

• 📖 have read the contribution guidelines
• 💻 have added necessary unit/e2e tests.
• 📓 have added documentation. Make sure MERMAID_RELEASE_VERSION is used for all new features.
• 🔖 targeted develop branch

[codecov]

Codecov Report

Merging #4759 (667b17b) into develop (abcf2a2) will increase coverage by 34.38%.
Report is 24 commits behind head on develop.
The diff coverage is 64.86%.

Additional details and impacted files

@@             Coverage Diff              @@
##           develop    #4759       +/-   ##
============================================
+ Coverage    45.16%   79.55%   +34.38%     
============================================
  Files           53      147       +94     
  Lines         6671    13069     +6398     
  Branches        32      613      +581     
============================================
+ Hits          3013    10397     +7384     
+ Misses        3657     2542     -1115     
- Partials         1      130      +129     

Flag	Coverage Δ
e2e	84.72% <82.35%> (?)
unit	43.27% <16.66%> (-1.90%)	⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

Files Changed	Coverage Δ
packages/mermaid/src/diagrams/c4/c4Db.js	65.27% <ø> (ø)
packages/mermaid/src/diagrams/class/classDb.ts	73.65% <ø> (ø)
packages/mermaid/src/diagrams/er/erDb.js	89.28% <ø> (ø)
packages/mermaid/src/diagrams/flowchart/flowDb.js	82.04% <ø> (ø)
packages/mermaid/src/diagrams/gantt/ganttDb.js	78.32% <ø> (+1.72%)	⬆️
packages/mermaid/src/diagrams/git/gitGraphAst.js	56.34% <ø> (ø)
packages/mermaid/src/diagrams/pie/pieDb.ts	100.00% <ø> (ø)
.../mermaid/src/diagrams/quadrant-chart/quadrantDb.ts	100.00% <ø> (ø)
.../mermaid/src/diagrams/requirement/requirementDb.js	98.03% <ø> (ø)
...ckages/mermaid/src/diagrams/sequence/sequenceDb.js	84.64% <ø> (ø)
... and 14 more

... and 119 files with indirect coverage changes

[netlify]

✅ Deploy Preview for mermaid-js ready!

Name	Link
🔨 Latest commit	667b17b
🔍 Latest deploy log	https://app.netlify.com/sites/mermaid-js/deploys/64f955ec26d4d50007b748f4
😎 Deploy Preview	https://deploy-preview-4759--mermaid-js.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[aloisklink]

Looks good! This makes everything a lot neater!

Some things to do before merging:

• Does this branch need to be updated now that feat: Support config in frontmatter. #4750 has been merged?
• Please add /** @deprecated */ TSDoc warnings to

  mermaid/packages/mermaid/src/diagram-api/types.ts

  Line 13 in 066e096

  _parseDirective: any;

  and

  mermaid/packages/mermaid/src/diagram-api/types.ts

  Line 49 in 066e096

  _parseDirective: InjectUtils['_parseDirective']

  explaining that the _parseDirective() function is now a no-op, and why it's a no-op (maybe with a link to this PR).
• Is it worth holding back on merging this until v11? I don't think there are any BREAKING CHANGES (since we've just replaced _parseDirective() with a no-op), so it should be okay, but it's probably worth testing this PR with the @mermaidjs/mermaid-zenuml plugin, just to be on the safe side. Maybe it's also worth renaming this PR to Preprocess directives (e.g. %% {init: }}%%) before parsing diagrams), just to make it a bit more clear what this PR does in the Mermaid v10.x.x release notes.
• Does this mean that %% {init: ... } %% directives are now supported in sankey diagrams, which previously didn't support these? If yes, it's probably worth documenting this in the PR description.

[Yokozuna59]

This is a partial review, I'll look into remaining files (about 10) in few days since I don't have enough time right now, or you can carry on without my second review :)

[knsv]

Nice! I hope it was as good for you you as it was to read :)

👍

[aloisklink]

Looks good! Thanks for adding those @deprecated warnings in 18079a4.

The only minor potential improvement is to rename and move around some of the tests in the packages/mermaid/src/diagrams/sequence/sequenceDiagram.spec.js file.

---

One last thing, this PR adds support for %% {init: {}}%% directives in all diagrams, including diagrams like sankey diagrams that previously didn't support this.

E.g. try rendering the following diagram in the current mermaid.live, and the Mermaid Live preview for this PR:

```mermaid
sankey-beta
  %% changing 'showValues' to true works to modify the diagram
  %%{init: {'sankey': {'showValues': false}}}%%
  %% source,target,value
  Electricity grid,Over generation / exports,104.453
  Electricity grid,Heating and cooling - homes,113.726
```

%%{wrap}%% also previously caused errors in diagrams, but now all diagrams support it (even if it does nothing in most diagrams).

To be honest, I like %% {init: {} }%% being accepted in all diagrams, since it keeps things consistent (even if it's deprecated behavior) 😄. The %%{wrap}%% I'm okay with too, even if it's a no-op in most diagrams. It probably should just be documented in the PR description, so that we know that it's expected behavior.