Diagrams exported using mermaid.go end up blurry and undersized in Confluence

[thedavidharris]

What happened? Exports using mermaid.go often end up blurry and undersized in Confluence

What did you expect to happen? Compared to the seamless vector asset displayed in Github, the PNG exported to Confluence as an attachment is too small to be viewed on high-resolution monitors.

How can we reproduce the behavior you experienced? Steps to reproduce the behavior:

1. Create a mermaid diagram in Markdown
2. Deploy to Confluence using the mermaid.go renderer
3. View the attachment in Confluence

Additional context A large source of the issue is Confluence's inability to display SVGs. However, the PNG size here is still too small, and likely could be fixed if the frame of the exported mermaid diagram was larger.

For context, mermaid diagrams exported by the mermaid.live editor seem to be about double the size as what is showing up on our Confluence page

[thedavidharris]

Playing aroudn with this a bit more, the issue seems to be with the way mermaid itself handles a few chart types, like the C4 diagram. Flowcharts and other things render well.

[thedavidharris]

Actually I take that back: we're seeing anything other than tiny charts being rendered at < 500px width, which might as well be a blurry image preview unfortunately.

[mrueg]

What mermaid.go does is it uses chromedp to take a screenshot of the rendered svg. I don't know if there's a way to scale the svg before taking the screenshot.

[viclang]

I uploaded a svg file to Confluence manually and this seems to work just fine now! Have you tried using the Render method instead of RenderAsPng?

[mrueg]

Did confluence add svg support recently? When this got implemented, embedding SVG was not supported on confluence without nasty hacks.

[viclang]

They talked about the New Editing Experience, maybe the new editor fixed the svg issue?

[mrueg]

It looks like https://jira.atlassian.com/browse/CONFCLOUD-1762 is still not resolved.

[viclang]

Thats weird, I copied the svg code of the example C4 mermaid diagram, moved it to a svg file and after waiting for generating preview it was working! Now that I tried again with a different diagram it doesn't work.

C4Context
      title System Context diagram for Internet Banking System
      Enterprise_Boundary(b0, "BankBoundary0") {
        Person(customerA, "Banking Customer A", "A customer of the bank, with personal bank accounts.")
        Person(customerB, "Banking Customer B")
        Person_Ext(customerC, "Banking Customer C", "desc")

        Person(customerD, "Banking Customer D", "A customer of the bank, <br/> with personal bank accounts.")

        System(SystemAA, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.")

        Enterprise_Boundary(b1, "BankBoundary") {

          SystemDb_Ext(SystemE, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")

          System_Boundary(b2, "BankBoundary2") {
            System(SystemA, "Banking System A")
            System(SystemB, "Banking System B", "A system of the bank, with personal bank accounts. next line.")
          }

          System_Ext(SystemC, "E-mail system", "The internal Microsoft Exchange e-mail system.")
          SystemDb(SystemD, "Banking System D Database", "A system of the bank, with personal bank accounts.")

          Boundary(b3, "BankBoundary3", "boundary") {
            SystemQueue(SystemF, "Banking System F Queue", "A system of the bank.")
            SystemQueue_Ext(SystemG, "Banking System G Queue", "A system of the bank, with personal bank accounts.")
          }
        }
      }

      BiRel(customerA, SystemAA, "Uses")
      BiRel(SystemAA, SystemE, "Uses")
      Rel(SystemAA, SystemC, "Sends e-mails", "SMTP")
      Rel(SystemC, customerA, "Sends e-mails to")

      UpdateElementStyle(customerA, $fontColor="red", $bgColor="grey", $borderColor="red")
      UpdateRelStyle(customerA, SystemAA, $textColor="blue", $lineColor="blue", $offsetX="5")
      UpdateRelStyle(SystemAA, SystemE, $textColor="blue", $lineColor="blue", $offsetY="-10")
      UpdateRelStyle(SystemAA, SystemC, $textColor="blue", $lineColor="blue", $offsetY="-40", $offsetX="-50")
      UpdateRelStyle(SystemC, customerA, $textColor="red", $lineColor="red", $offsetX="-50", $offsetY="20")

      UpdateLayoutConfig($c4ShapeInRow="3", $c4BoundaryInRow="1")

[mrueg]

Please try with 9.9.0 or later and let me know if this fixes your problem.