当前位置:首页 > draw.io文章

IBM Cloud 新增技术图表形状库

drawio1年前 (2024-11-15)draw.io文章8

draw.io 中的全新IBM Cloud形状库(右)体现了 IBM 更新后的设计语言,并在现有的IBM形状库(左)的基础上扩展了各种额外的组、连接器和基础架构组件。

IBM 已在 draw.io 中提供了其更新后的形状,用于新的 IBM Cloud 形状库。请参阅其文档中的设计语言风格指南,其中解释了如何在各种技术图表中使用形状和图标。

在 draw.io 中启用 IBM 形状库

  1. 在 draw.io 中,点击形状面板底部的“更多形状” 。

  2. 在“网络”部分中,选中SAP形状库旁边的复选框,然后单击“应用”

提示:模板库中也包含多个 IBM 基础架构模板。从菜单中选择“排列”>“插入”>“模板” ,或在工具栏中选择“+”>“模板” ,然后在“云”>“IBM”类别中查找。

在一个图表中使用新旧 IBM 图形

IBM Cloud 新推出的形状是复合形状——一个彩色背景形状和一个位于中心顶部的图标。这样,您可以独立更改这两个形状的填充颜色,从而更灵活地设置图表样式。

旧版图形为圆形,带有白色图标和蓝色文本标签,而新版 IBM Cloud 图形为方形,带有白色图标和文本(浅色模式)或黑色图标和文本(深色模式)。

新的IBM Cloud形状库中还包含更大、更多样化的分组(区域形状)

上面的示例是 draw.io 中提供的 IBM 模板之一,其中一些旧组件已被新的 IBM Cloud 形状替换。

这两组形状在深色模式下绘制图表时效果都很好——新形状会自动切换图标和标签颜色,以保持可读性。

提示:要使所有 IBM 和 IBM Cloud 形状上的标签看起来相同,您需要编辑文本标签,以确保它们的大小写匹配,并在格式面板的“文本”选项卡中设置字体颜色。

但是,将两个形状库中的形状混合使用它们的默认标签样式,可以一目了然地显示您的基础架构中哪些组件是较新的,例如 IBM 的新型云服务和 Watson AI 服务。

制作你自己的 IBM 形状

IBMIBM Cloud形状库中的形状仅代表不断扩展的 IBM 设计语言的一部分。

您可以使用 draw.io 中的黑色 IBM.svg图标轻松创建自己的 IBM 图形。

  1. 将与你想要使用的颜色相匹配的IBM Cloud形状添加到绘图画布中,作为新形状的模板。

  2. 从通用形状库中添加一个简单的矩形。

  3. 在绘图画布上选择 IBM Cloud 形状,然后在格式面板的“排列”选项卡中选择“复制大小”。选择矩形,然后单击“粘贴大小”

  4. 再次选择 IBM Cloud 形状,然后在格式面板的“样式”选项卡中选择“复制样式”。再次选择矩形,然后单击“粘贴样式”

  5. 您可能需要“样式”选项卡中取消选中“线条”复选框,但您的形状背景现在应该看起来正确了。

  6. 添加标签,并通过格式面板的“文本”选项卡将其位置移动到底部。

  7. 现在,创建复合图标。将IBM 设计语言中 UI 图标列表.svg中的 UI 图标文件(可以直接从网页或您的设备拖放到绘图画布上进行导入)拖放到画布上。然后将其拖到背景方块的中心位置。

  8. 最后,在新复合形状周围拖动一个选择框,右键单击并从上下文菜单中 选择“组合” 。

提示:要在多个图表中使用此新形状,请将该组拖到形状面板中的 草稿板上。

您还可以保存带有自定义形状的草稿本,并与同事分享。

  1. 点击草稿本库右侧的铅笔图标

  2. 选择“导出”将草稿本中的所有形状保存到自定义形状库中。

  3. 输入文件名,选择保存自定义形状库文件的位置,然后单击确定