使用 Mermaid 从文本创建思维导图
思维导图有助于快速捕捉灵感,而且在 draw.io 和我们的 draw.io 品牌应用程序中绘制起来非常方便。但有些人更喜欢在头脑风暴时使用文本列表。只需将文本列表拖放到 Mermaid 导入工具中,draw.io 就会自动生成思维导图——无需费心设置连接线或布局。

用文本创建思维导图
Mermaid 允许您根据人类可读的文本描述创建各种图表,从各种 UML 图到通用思维导图、概念图和流程图,甚至包括用于项目管理和报告的甘特图和饼图。
Mermaid 中的思维导图以mindmap关键字开头,该关键字告诉渲染器使用思维导图形状,并围绕中心主题布局分支。
在 draw.io 中,当您选择从 Mermaid 代码生成图表(默认设置)时,您的思维导图将使用圆形作为根节点,所有分支节点和叶节点将使用圆角矩形。
如果您选择将美人鱼图作为图像添加到绘图画布中,它将使用美人鱼思维导图形状。
在美人鱼中绘制思维导图
将根节点标题用双括号括起来 -
((UML diagrams))使用空格表示分支到叶节点
使用 HTML 换行符标签将过长的标签分成两行或多行。
<br/>
mindmap root((UML diagrams)) Behaviour diagrams Activity diagrams Use case diagrams State machine diagrams Interaction diagrams Sequence diagrams Communication diagrams Interaction overview diagrams Timing diagrams Structure diagrams Class diagrams Package diagrams Object diagrams Composite structure diagrams Component diagrams Profile diagrams Deployment diagrams
注意: Mermaid 思维导图中只能有一个根节点。
将美人鱼思维导图插入 draw.io
在 draw.io 编辑器中,单击“排列”>“插入”>“高级”>“美人鱼”。
在文本字段中添加思维导图的文本,然后单击“插入”按钮,即可根据美人鱼的描述生成图表。

您的图表将使用 draw.io 的形状生成并绘制在画布上。现在您可以继续编辑和添加思维导图,并像编辑其他类型的 draw.io 图表一样设置节点和连接线的样式。

当您在 draw.io 中插入 Mermaid 作为图表时,您无法重新编辑 Mermaid 代码,因为您的图表已转换为使用 draw.io 形状。
插入美人鱼思维导图(图片)
当您在插入 Mermaid 代码时从下拉列表中选择“图像”时,图表将生成并作为 SVG 图像插入到绘图画布中。
将鼠标悬停在 Mermaid 代码上即可查看其工具提示,双击即可重新编辑 Mermaid 代码,然后应用更改以更新图表。

提示:您可能需要为图像添加背景,因为 Mermaid 会自动为前两个分支使用黑白背景。选择思维导图图像,在格式面板的“样式”选项卡中启用“填充”,然后选择填充颜色。
如果您的美人鱼思维导图文本有误,draw.io 将显示解析器错误。

不同形状的思维导图
您可以使用不同的形状来更清晰地区分树枝。
[] - 直角矩形
()- 圆角矩形
(()) - 圆圈
))(( - 砰的形状
)( - 云形
{{}} - 六边形

mindmap
root)HR(
))Onboarding((
Prior to first day
Contract signed
Employee handbook
IT equipment reserved
First day
Office tour
Team intros
Account setup
First week
Shadow team members
Software training
First month
Assign projects/tasks
Set goals
Get team feedback
id2{ {Offboarding} }
[Feedback and review]
[Exit interview]
[Tasks/projects reassigned]
[Handover]
[Account deactivation/deletion]
[IT hardware return]更喜欢画思维导图吗?
使用高级形状库中的自动布局容器形状,并将子主题和分支形状拖放到其中,即可快速轻松地绘制思维导图。

