Sure! I’m using Mermaid diagrams in my page. I put the JS in the footer so that in any page I can put in a diagram and it “just works”.
Here’s an example diagram from the mermaid.live test site:
classDiagram
Animal <|-- Duck
Animal <|-- Fish
Animal <|-- Zebra
Animal : +int age
Animal : +String gender
Animal: +isMammal()
Animal: +mate()
class Duck{
+String beakColor
+swim()
+quack()
}
class Fish{
-int sizeInFeet
-canEat()
}
class Zebra{
+bool is_wild
+run()
}
The problem is that upon saving or publishing, all of the whitespace is removed and it gets turned into this:
classDiagram Animal <|-- Duck Animal <|-- Fish Animal <|-- Zebra Animal : +int age Animal : +String gender Animal: +isMammal() Animal: +mate() class Duck{ +String beakColor +swim() +quack() } class Fish{ -int sizeInFeet -canEat() } class Zebra{ +bool is_wild +run() }
The mermaid diagram cannot process this because it relies on the line breaks.
It would be nice if there was an option like “Save Without Beautify”, or a class similar to “pre” that would instruct the generator to leave the whitespace alone in that tag.
