Skip to content

Conversation

darshanr0107
Copy link
Contributor

@darshanr0107 darshanr0107 commented Jun 19, 2025

📑 Summary

HTML formatting is currently supported in Flow Chart and Class diagram labels but not in other diagram types like Timeline.

In Timeline diagrams, HTML tags are rendered as plain text or cause rendering issues which may break the label display.

Resolves #4743

📏 Design Decisions

Describe the way your implementation works or what design decisions you made if applicable.

📋 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:.

Copy link

changeset-bot bot commented Jun 19, 2025

🦋 Changeset detected

Latest commit: dabc220

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

This PR includes changesets to release 2 packages
Name Type
mermaid Major
@mermaid-js/examples Major

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

Copy link

netlify bot commented Jun 19, 2025

Deploy Preview for mermaid-js ready!

Name Link
🔨 Latest commit ea8260a
🔍 Latest deploy log https://app.netlify.com/projects/mermaid-js/deploys/68ad5777f7e6eb000844279f
😎 Deploy Preview https://deploy-preview-6663--mermaid-js.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

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

Copy link

pkg-pr-new bot commented Jun 19, 2025

Open in StackBlitz

@mermaid-js/examples

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

mermaid

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

@mermaid-js/layout-elk

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

@mermaid-js/mermaid-zenuml

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

@mermaid-js/parser

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

@mermaid-js/tiny

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

commit: ea8260a

Copy link

codecov bot commented Jun 19, 2025

Codecov Report

❌ Patch coverage is 0% with 127 lines in your changes missing coverage. Please review.
✅ Project coverage is 3.65%. Comparing base (6d9fad0) to head (ea8260a).
⚠️ Report is 23 commits behind head on develop.

Files with missing lines Patch % Lines
packages/mermaid/src/diagrams/timeline/svgDraw.js 0.00% 111 Missing ⚠️
.../mermaid/src/diagrams/timeline/timelineRenderer.ts 0.00% 16 Missing ⚠️
Additional details and impacted files

Impacted file tree graph

@@            Coverage Diff             @@
##           develop   #6663      +/-   ##
==========================================
- Coverage     3.65%   3.65%   -0.01%     
==========================================
  Files          455     454       -1     
  Lines        45589   45665      +76     
  Branches       709     709              
==========================================
  Hits          1668    1668              
- Misses       43921   43997      +76     
Flag Coverage Δ
unit 3.65% <0.00%> (-0.01%) ⬇️

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

Files with missing lines Coverage Δ
.../mermaid/src/diagrams/timeline/timelineRenderer.ts 0.41% <0.00%> (ø)
packages/mermaid/src/diagrams/timeline/svgDraw.js 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.

@darshanr0107 darshanr0107 marked this pull request as draft June 19, 2025 06:42
Copy link

argos-ci bot commented Jun 19, 2025

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

Build Status Details Updated (UTC)
default (Inspect) ⚠️ Changes detected (Review) 2 changed, 1 added Aug 29, 2025, 7:13 AM

@darshanr0107 darshanr0107 changed the title #4743 : HTML formatting in timeline diagrams #4743: HTML formatting in timeline diagrams Jun 20, 2025
@darshanr0107 darshanr0107 marked this pull request as ready for review June 20, 2025 06:20
Copy link
Member

@shubhamparikh2704 shubhamparikh2704 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please check the argos-ci for the PR. It is breaking existing diagram. Please fix this.

@@ -225,4 +225,18 @@ timeline
{}
);
});
it('13: should render markdown htmlLabels', () => {
const timelineCode = `%%{init: { 'logLevel': 'debug', 'theme': 'forest' } }%%
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please use new frontmatter

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

HTML formatting in timeline diagrams
2 participants