mermaid-js / mermaid

Generation of diagrams like flowcharts or sequence diagrams from text in a similar manner as markdown

Home Page:https://mermaid.js.org

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

SVG rendering formatting issues with markdown input

kurago-dev opened this issue · comments

Description

When a node uses markdown formatting, some formatting issues appear.

From the live editor:

  • Additional height is added to the node on the SVG output of the diagram when clicking "open SVG in new tab" (screenshot 1).
  • Text is cut off (but height remains the same) on the SVG output of the diagram when clicking "download SVG" (screenshot 2).

For example, this diagram:

flowchart TD
    A("test")
    B("`test format`")
flowchart TD
    A("test")
    B("`test format`")

Steps to reproduce

  1. Create a diagram with markdown format in one of the nodes
  2. Render the diagram as SVG
  • Open SVG in new tab
  • Download SVG from editor

Screenshots

  • image
    image

  • image
    image

Code Sample

No response

Setup

  • Mermaid version: 10.8.0
  • Browser and Version: Any

Suggested Solutions

No response

Additional Context

This is possibly related to #5159.