Several Mermaid rendering bugs

[scotto]

The screenshots show how the attached test page mermaid graph is rendered in obsidian 1.5.12 restricted mode, and on www.mermaidchart.com.

The Obsidian problems are:

1. bottom subgraph title is overwritten by blocks
2. blocks outside of the sublocks have nearly invisible boundaries
3. the graph is clipped on the right side.

I’ve attached the markdown for the test page.

Obsidian

www.mermaidchart.com

tmp_mermaid_bugs.md (985 Bytes)

[Loxley]

This renders perfectly allright for me:

I use this snippet:

.mermaid svg { 
  max-width: 100%; 
  width: 100%; 
  height: auto;
}

[WhiteNoise]

Resize and align mermaid diagrams

This is excellent! Thank you. I am rending some huge flowcharts so this is indispensable.

Pan and Zoom on Mermaid Diagrams

Introduce UI components (similar to the ones present on GitHub) to pan and zoom a Mermaid diagram. [chrome_iuAQmJIgOE] This assumes all mermaid diagrams are rendered to fill the available horizontal space of the page (line width) and the user zooms and pans via buttons. This FR is orthogonal to: