Mermaid语法生成的svg在Axure无法编辑

Question

情况：使用Mermaid语法在编辑器中生成流程图，形如这样下方图1，但是我粘贴到Axure软件中，就变成黑色，如图2
网址：https://mermaid.live/

图1

图2

我期望的是粘贴下来的SVG格式能够在Axure正常编辑

Answer 1

引自免费微信小程序：皆我百晓生

要解决Mermaid生成的SVG在Axure中无法编辑的问题，我们需要了解Axure处理SVG的一些限制。Axure直接支持导入SVG，但对某些特定的SVG属性和结构可能支持不佳，特别是那些包含复杂样式或脚本的SVG。Mermaid生成的SVG可能包含了一些Axure不完全支持的元素或属性。

解决方案步骤

1. 简化SVG: 首先尝试通过一些在线工具简化Mermaid生成的SVG代码。这些工具可以移除不必要的属性、样式和元素，使得SVG更加兼容Axure。例如，可以使用SVGOMG这个工具。

2. 手动调整SVG: 如果简化后仍然存在问题，你可能需要手动编辑SVG代码，确保它符合Axure的兼容要求。重点关注并移除以下内容：

   • style属性内的CSS样式，尽量将样式转换为内联属性，如fill, stroke等。
   • 移除所有<script>标签及相关的事件处理代码。
   • 检查并移除任何非标准或Axure可能不识别的SVG命名空间。

   例如，原本的SVG可能有这样一段代码：

   <rect style="fill:#fff;stroke-width:1;stroke:#000" width="30" height="30"/>
   

   调整为：

   <rect fill="#fff" stroke-width="1" stroke="#000" width="30" height="30"/>
   

3. 导出纯净SVG: 在Mermaid Live Editor中，尝试直接导出最纯净形式的SVG，确保不包含任何额外的元数据或复杂的样式信息。通常，选择“SVG”导出选项，并在导出后进行上述的手动调整。

4. 使用替代方法: 如果上述方法都不能满足需求，考虑在Axure中使用其内置的图形工具重新绘制流程图，或者寻找其他能生成更Axure友好SVG的图表生成工具。

5. Axure兼容性检查: 最后，确保你的Axure版本是最新的，因为旧版本可能对SVG的支持不如新版本完善。

实施步骤示例

1. 使用SVGOMG简化:

   • 访问SVGOMG。
   • 将Mermaid生成的SVG代码复制粘贴到输入框。
   • 点击“Optimize”按钮，然后查看并下载优化后的SVG。

2. 手动调整代码:

   • 使用文本编辑器打开优化后的SVG文件。
   • 根据上述指导手动调整代码，移除不兼容的部分。

3. 导入Axure:

   • 打开Axure，创建或打开一个项目。
   • 选择要放置SVG的页面。
   • 从文件菜单选择“导入” -> “图像”，然后选择修改后的SVG文件导入。

完成以上步骤后，你应该能在Axure中更好地控制和编辑Mermaid生成的流程图了。如果在操作过程中遇到具体的技术问题，可以进一步细化问题描述，我会尽力提供更具体的帮助。