Skip to main content
Question

Mermaid Image Generation to Visio doesnt Work

  • December 13, 2024
  • 8 replies
  • 402 views

Forum|alt.badge.img+1

So I’m trying to generate images using Mermaid.js as DAC and then export it to a VISIO file, but when I open the visio file which was exported it is blank as the pic given.
 

(Note: I’m using Libre Office Draw to view the visio file which should be capable of doing it)
This happened for all types of diagram generation.

Did this topic help you find an answer to your question?

Comments

Michel L
Forum|alt.badge.img+8
  • 45 replies
  • December 16, 2024

Hi James,

Could you explain how you export it? using Export to Visio menu item command (.vsdx, vdx,...).

Regards.


Forum|alt.badge.img+1
  • Author
  • 4 replies
  • December 18, 2024

I am exporting it using the Export to Visio Menu and have tried both (.vsdx and .vdx ) formats but still the same result


Forum|alt.badge.img+1
  • Author
  • 4 replies
  • December 18, 2024
Michel L wrote:

Hi James,

Could you explain how you export it? using Export to Visio menu item command (.vsdx, vdx,...).

Regards.

I am exporting it using the Export to Visio Menu and have tried both (.vsdx and .vdx ) formats but still the same result
 

 


Michel L
Forum|alt.badge.img+8
  • 45 replies
  • December 18, 2024

Could you share one of your export so I could try with regular Visio?


Forum|alt.badge.img+1
  • Author
  • 4 replies
  • December 19, 2024
Michel L wrote:

Could you share one of your export so I could try with regular Visio?

This is my google drive link the files in the two formats
https://drive.google.com/drive/folders/1F6vTnsE44KbGDOG8ag_ou057bagAuFAj?usp=sharing
This is the link to my Lucid Diagram
https://lucid.app/lucidchart/273f6ea4-86e2-4ee9-8505-318a2e1e4d59/edit?viewport_loc=236%2C-947%2C1405%2C811%2C0_0&invitationId=inv_ea785ab4-794d-4c3b-a8a1-5fc211e4099d 


Michel L
Forum|alt.badge.img+8
  • 45 replies
  • December 19, 2024

The Diagram contain no blocks. The image is stored in FillColor as SVG.

This FillColor is not exported to Visio

Here is the content of your file (I have truncated the FillColor content because it is too long to put it in the post reply).

{
    "blocks": [
        {
            "id": "VM4c9BrXbM34rz2RxvjUJ/PmHEE=",
            "classname": "MermaidDiagramBlock",
            "x": "201.39999999999998",
            "y": "-720.3",
            "linewidth": "0",
            "FillColor": "{\"pos\":\"fill\",\"url\":\"data:image/svg+xml;base64, ......\"}",
            "properties": [
                {
                    "name": "BG",
                    "value": "0"
                },
                {
                    "name": "BoundingBox",
                    "value": "[object Object]"
                },
                {
                    "name": "ClassName",
                    "value": "MermaidDiagramBlock"
                },
                {
                    "name": "DataForItemTemplateId",
                    "value": ""
                },
                { "name": "DataSyncStateIconPosition" },
                {
                    "name": "FillColor",
                    "value": "[object Object]"
                },
                {
                    "name": "FlipX",
                    "value": "false"
                },
                {
                    "name": "FlipY",
                    "value": "false"
                },
                {
                    "name": "GeneratorId",
                    "value": "0XBBu2U3RVh0"
                },
                {
                    "name": "GutterPadding",
                    "value": "5"
                },
                {
                    "name": "Hidden",
                    "value": "0"
                },
                {
                    "name": "Hyphenate",
                    "value": "false"
                },
                {
                    "name": "IgnoreTheme",
                    "value": "[object Object]"
                },
                {
                    "name": "ImageFillProps",
                    "value": "false"
                },
                {
                    "name": "InsetMargin",
                    "value": "0"
                },
                {
                    "name": "LineColor",
                    "value": "#000000ff"
                },
                {
                    "name": "LineWidth",
                    "value": "0"
                },
                {
                    "name": "NoteHint",
                    "value": ""
                },
                {
                    "name": "Opacity",
                    "value": "100"
                },
                {
                    "name": "Restrictions",
                    "value": "[object Object]"
                },
                {
                    "name": "Rotation",
                    "value": "0"
                },
                { "name": "Rounding" },
                {
                    "name": "RuleList",
                    "value": ""
                },
                {
                    "name": "ShapeData_1",
                    "value": "[object Object]"
                },
                {
                    "name": "StrokeStyle",
                    "value": "solid"
                },
                {
                    "name": "TRotation",
                    "value": "0"
                },
                {
                    "name": "TextAlign",
                    "value": "center"
                },
                {
                    "name": "TextVAlign",
                    "value": "middle"
                },
                {
                    "name": "TraitsKeySourceCache",
                    "value": ""
                },
                {
                    "name": "TraitsLucidFieldToSourceCache",
                    "value": ""
                },
                {
                    "name": "ZOrder",
                    "value": "0"
                }
            ],
            "connectedlines": [],
            "containers": [
                {
                    "id": "0XBBu2U3RVh0",
                    "x": "181.39999999999998",
                    "y": "-740.3"
                }
            ]
        }
    ]
}

 

The Visio File contain a Shape for the block but as You can see there is no “Geometry” section that is used by Visio to draw shape) and no more image “Foreign image info” section for displaying an image.

 


Forum|alt.badge.img+1
  • Author
  • 4 replies
  • December 22, 2024
Michel L wrote:

The Diagram contain no blocks. The image is stored in FillColor as SVG.

This FillColor is not exported to Visio

Here is the content of your file (I have truncated the FillColor content because it is too long to put it in the post reply).

{
    "blocks": [
        {
            "id": "VM4c9BrXbM34rz2RxvjUJ/PmHEE=",
            "classname": "MermaidDiagramBlock",
            "x": "201.39999999999998",
            "y": "-720.3",
            "linewidth": "0",
            "FillColor": "{\"pos\":\"fill\",\"url\":\"data:image/svg+xml;base64, ......\"}",
            "properties": [
                {
                    "name": "BG",
                    "value": "0"
                },
                {
                    "name": "BoundingBox",
                    "value": "[object Object]"
                },
                {
                    "name": "ClassName",
                    "value": "MermaidDiagramBlock"
                },
                {
                    "name": "DataForItemTemplateId",
                    "value": ""
                },
                { "name": "DataSyncStateIconPosition" },
                {
                    "name": "FillColor",
                    "value": "[object Object]"
                },
                {
                    "name": "FlipX",
                    "value": "false"
                },
                {
                    "name": "FlipY",
                    "value": "false"
                },
                {
                    "name": "GeneratorId",
                    "value": "0XBBu2U3RVh0"
                },
                {
                    "name": "GutterPadding",
                    "value": "5"
                },
                {
                    "name": "Hidden",
                    "value": "0"
                },
                {
                    "name": "Hyphenate",
                    "value": "false"
                },
                {
                    "name": "IgnoreTheme",
                    "value": "[object Object]"
                },
                {
                    "name": "ImageFillProps",
                    "value": "false"
                },
                {
                    "name": "InsetMargin",
                    "value": "0"
                },
                {
                    "name": "LineColor",
                    "value": "#000000ff"
                },
                {
                    "name": "LineWidth",
                    "value": "0"
                },
                {
                    "name": "NoteHint",
                    "value": ""
                },
                {
                    "name": "Opacity",
                    "value": "100"
                },
                {
                    "name": "Restrictions",
                    "value": "[object Object]"
                },
                {
                    "name": "Rotation",
                    "value": "0"
                },
                { "name": "Rounding" },
                {
                    "name": "RuleList",
                    "value": ""
                },
                {
                    "name": "ShapeData_1",
                    "value": "[object Object]"
                },
                {
                    "name": "StrokeStyle",
                    "value": "solid"
                },
                {
                    "name": "TRotation",
                    "value": "0"
                },
                {
                    "name": "TextAlign",
                    "value": "center"
                },
                {
                    "name": "TextVAlign",
                    "value": "middle"
                },
                {
                    "name": "TraitsKeySourceCache",
                    "value": ""
                },
                {
                    "name": "TraitsLucidFieldToSourceCache",
                    "value": ""
                },
                {
                    "name": "ZOrder",
                    "value": "0"
                }
            ],
            "connectedlines": [],
            "containers": [
                {
                    "id": "0XBBu2U3RVh0",
                    "x": "181.39999999999998",
                    "y": "-740.3"
                }
            ]
        }
    ]
}

 

The Visio File contain a Shape for the block but as You can see there is no “Geometry” section that is used by Visio to draw shape) and no more image “Foreign image info” section for displaying an image.

 

Apologies for the late reply from my side,
How would you suggest in resolving the export if the Fill Color is not exported, since I merely used the default C4 diagram in Mermaid.js provided by Lucid.


Michel L
Forum|alt.badge.img+8
  • 45 replies
  • January 22, 2025

Hello ​@James Wayne ,

I’m sorry for this very very late reply, I was in vacation.

The turnaround is to export to PNG and then import in Visio.

I’m also figure out and work how to use mermaid directly in Visio or to create a lucid  extension getting the svg from mermaid and translate it in blocks and lines in lucid diagram.

Will keep you inform.

Best regards.


Reply