HTML formatting in timeline diagrams

[lschierer]

Description

Currently html is allowed in labels for Flow Charts and for Class diagrams, but not for other diagram types. While I have not tested all of them, I have tested with timeline and tags that work in the Flow Chart type do not work in the Timeline type. The timeline labels are a natural spot where I can have a paragraph of text that may desire formatting to include <em> and <strong> tags (for emphasis), <sup> and <a href... >tags (for footnotes), and possibly <ul> and <li> tags.

Right now it attempts to render these as plain text. Sometimes this works, other times, such as the the href case with its quotes in the string, it results in a cut off label.

Steps to reproduce

paste the following diagram into the live editor:

timeline
0410-01-01: some text needs a footnote<sup><a href="#user-content-fn-1" id="user-content-fnref-1" data-footnote-ref="" aria-describedby="footnote-label">1</a></sup>
0800-01-01: a more simple label just needs <em>emphasis</em>

Screenshots

No response

Code Sample

link to Live Editor (which happens to render as the graph in question):

Setup

• Mermaid version: 10.3.0 and 10.3.1
• Browser and Version: Chrome

Suggested Solutions

The implementation in the Flow Chart graph type seems to work.

Additional Context

No response

[Yokozuna59]

I think using markdown formatting instead of html formatting would better.

[lschierer]

I don't know how to grab the text before it gets translated by astro if I use mermaid from within an mdx component, and if I use mermaid as a markdown or mdx integration (and have the markdown parser call it), then the graph is in a code block and the foot notes won't get rendered into HTML at all.

[jonnymoo]

I'm taking a look at this - it looks like the drawing in some other diagrams, e.g. mindmaps, already account for text nodes with markdown, so I'll try use the same patterns for timelines.

[jonnymoo]

I have a change for this to make timelines behave the same as mind maps (which accept markdown) - a pull request will follow in the next week, I’m just wrestling with end to end tests at the mo.

[lschierer]

awesome, thanks

[anmolchhabra21]

@lschierer, So this issue will be resolved once the feature of markdown by @jonnymoo is merged and implemented into the main code? Please correct me if I am wrong.

[lschierer]

I haven't tried to build my own package to test his PR, but yes I believe so.