Fix: Common handling of strings in Architecture chart

[thomascizeron]

📑 Summary

• 🖋️ Add common string hanling in common grammar for Literal strings and Markdown strings
• 📊 Use this new string approach in Architecture Chart
• ⚗️ Add a whole bunch of tests

Resolves issue #5928
Also resolves issue #6056

Also Resolves #6322 as the architecture diagram was already implementing Edge labels, now it works for literal strings and markdown strings too

📏 Design Decisions

• Common String Handling
  • Add regex for strings and Labels in Common Grammar
    • Literal Strings starts with a simple quote or a double quotes 'Literal String' or "Literal String"
    • Markdown Strings can be:
      • As FlowChart: simple/double quotes with backticks '`Markdown **String**`' or "`Markdown _string_`"
      • 🆕 just simple backticks `Markdown String`
  • Update common Value converter so that markdown strings start with a backtick `
• Update Architecture Grammar to use the new grammar
  • 💥 Breaking Changes (As the grammar is still in beta):
    • Group, Service and Edge Labels must be in strings in brackets ['My Label'] as it is the way it works in many other charts in mermaid
    • Icons use the same string handling and must be quoted ('my-icon')
    • Made the colon : optional in edge definition ad it is not formally needed by the grammar
• ✨ Rendering
  • When a string starts with a backticks it is displayed as markdown, else literal
    • So no need for a boolean like labelType
    • It feels like we need a global function to render text with this new approach. createText should render literal and markdown string base on if it starts with a backtick or not ➡️ Could not do it for backward compatibility
  • Uses createText function to display Markdown strings
  • Creates a new createNonFormattedText to display literal strings
  • Rename group, service, edge titles as labels in variables names to be coherent
• ⚗️ Tests
  • Add parser, mermaid tests for Architecture chart
  • Fix Cypress tests and add some for Architecture chart
• 📚 Update documentation

📋 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.
• 🦋 If your PR makes a change that should be noted in one or more packages' changelogs, generate a changeset by running pnpm changeset and following the prompts. Changesets that add features should be minor and those that fix bugs should be patch. Please prefix changeset messages with feat:, fix:, or chore:.

[changeset-bot]

🦋 Changeset detected

Latest commit: 230ba86

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages

Name	Type
mermaid	Patch
@mermaid-js/parser	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[netlify]

✅ Deploy Preview for mermaid-js ready!

Name	Link
🔨 Latest commit	230ba86
🔍 Latest deploy log	https://app.netlify.com/projects/mermaid-js/deploys/6834a612d96d560008989a7c
😎 Deploy Preview	https://deploy-preview-6489--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 project configuration.

[pkg-pr-new]

Open in StackBlitz

mermaid

npm i https://pkg.pr.new/mermaid-js/mermaid@6489

@mermaid-js/layout-elk

npm i https://pkg.pr.new/mermaid-js/mermaid/@mermaid-js/layout-elk@6489

@mermaid-js/mermaid-zenuml

npm i https://pkg.pr.new/mermaid-js/mermaid/@mermaid-js/mermaid-zenuml@6489

@mermaid-js/tiny

npm i https://pkg.pr.new/mermaid-js/mermaid/@mermaid-js/tiny@6489

@mermaid-js/parser

npm i https://pkg.pr.new/mermaid-js/mermaid/@mermaid-js/parser@6489

commit: 230ba86

[codecov]

Codecov Report

Attention: Patch coverage is 0% with 106 lines in your changes missing coverage. Please review.

Project coverage is 3.87%. Comparing base (818699f) to head (230ba86).

Files with missing lines	Patch %	Lines
...kages/mermaid/src/diagrams/architecture/svgDraw.ts	0.00%	46 Missing ⚠️
packages/mermaid/src/rendering-util/createText.ts	0.00%	24 Missing ⚠️
...kages/parser/src/language/common/valueConverter.ts	0.00%	20 Missing ⚠️
...ermaid/src/diagrams/architecture/architectureDb.ts	0.00%	6 Missing ⚠️
.../src/diagrams/architecture/architectureRenderer.ts	0.00%	4 Missing ⚠️
...mermaid/src/rendering-util/handle-markdown-text.ts	0.00%	3 Missing ⚠️
...ackages/parser/src/language/architecture/module.ts	0.00%	2 Missing ⚠️
...s/parser/src/language/architecture/tokenBuilder.ts	0.00%	1 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##           develop   #6489      +/-   ##
==========================================
- Coverage     3.87%   3.87%   -0.01%     
==========================================
  Files          414     411       -3     
  Lines        43303   43315      +12     
  Branches       666     664       -2     
==========================================
- Hits          1679    1677       -2     
- Misses       41624   41638      +14     

Flag	Coverage Δ
unit	3.87% <0.00%> (-0.01%)	⬇️

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

Files with missing lines	Coverage Δ
...aid/src/diagrams/architecture/architectureTypes.ts	0.84% <ø> (ø)
...s/parser/src/language/architecture/tokenBuilder.ts	0.00% <0.00%> (ø)
...ackages/parser/src/language/architecture/module.ts	4.54% <0.00%> (ø)
...mermaid/src/rendering-util/handle-markdown-text.ts	1.28% <0.00%> (-0.04%)	⬇️
.../src/diagrams/architecture/architectureRenderer.ts	0.00% <0.00%> (ø)
...ermaid/src/diagrams/architecture/architectureDb.ts	0.38% <0.00%> (ø)
...kages/parser/src/language/common/valueConverter.ts	2.08% <0.00%> (+0.16%)	⬆️
packages/mermaid/src/rendering-util/createText.ts	0.42% <0.00%> (-0.05%)	⬇️
...kages/mermaid/src/diagrams/architecture/svgDraw.ts	0.00% <0.00%> (ø)

... and 1 file with indirect coverage changes

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[argos-ci]

The latest updates on your projects. Learn more about Argos notifications ↗︎

Build	Status	Details	Updated (UTC)
default (Inspect)	⚠️ Changes detected (Review)	17 added	May 26, 2025, 5:43 PM

[NicolasNewman]

The code changes look good but I have one concern from a UX perspective:

I'm a little hesitant with making the colon optional. You're right that it's not needed from a grammar standpoint, but I'd personally prefer to go one way or the other.

Leaving it optional has the potential to add confusion by letting users write the markdown for Architecture diagrams in different flavors. I personally don't like allowing that kind of ambiguity.

I can't remember why the colon was added but if I recall it was suggested in the original PR that added this diagram to make the syntax more intuitive.

I'm not particularly attached to one way or the other but I do think we need to settle on just one.

[NicolasNewman]

@sidharthv96 You're thoughts on making the colon optional would be appreciated.

[thomascizeron]

Hi @sidharthv96 i've fixed the issues and used inline snaphot for testing ☺️

[thomascizeron]

Hi there, I've added a commit to simplify the common valueConverter, as the previous implementation was a bit weird and not so maintainable.