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.
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
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
Could you share one of your export so I could try with regular Visio?
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
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": "nobject 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.
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": "bobject 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.
Hello
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.
A Lucid account is required to interact with the community. You will be redirected to the Lucid app to create an account.
A Lucid account is required to interact with the community. You will be redirected to the Lucid app to log in.
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.
