在过去的一年中,我们已经投入大量资金使draw.io成为Confluence和Jira中用于绘制图表的明显选择。我们已修复了许多小问题,并实现了许多较大的功能。这是我们添加的内容的一部分。

数据治理和锁定选项

图表数据作为附件存储在Confluence Cloud实例中的页面上或Jira Cloud实例中的问题上。保存和加载图时,仅在Atlassian的服务器和浏览器之间进行数据传输。

一些扩展功能需要在浏览器中无法执行的操作-它们需要draw.io服务器端点上的功能。

使用服务器端点的功能包括:

导出到.pdf文件。

从.vsdx,.vsd和.vssx图文件(包括嵌入式EMF图像)导入。

从PlantUML生成图表图像。

导入Gliffy图。

您必须在应用程序配置中手动设置服务器端点。draw.io在两个区域具有服务器端点:一个位于欧盟(位于德国法兰克福),另一个位于美国(位于北弗吉尼亚州)。

在draw.io应用程序配置中使用dataGovernance设置这些在线服务的服务器端点(欧盟或美国)。

添加以下JSON(JavaScript对象表示法)字符串:“ dataGovernance”:“ EU”或“ dataGovernance”:“ US”。

在Confluence Cloud中,您可以另外限制仅在浏览器和Confluence Cloud实例之间进行数据传输(并禁用上述功能)。

将以下JSON字符串添加到draw.io应用程序配置中:“ lockdown”:true“。注意,将lockdown设置为true时,dataGovernance值将被忽略。

新的UML 2.5形状库

的UML 2.5规范更新的符号-形状-即在UML图中使用,因此他们可能更清楚地表示一个较宽的范围的概念。规范文档进行了广泛的重写,以使其更易于理解。我们添加了一个新的UML 2.5形状库以反映这些更改。

启用UML 2.5形状库:

点击更多形状左侧面板的底部编辑在合流或吉拉draw.io的图时。然后向下滚动并单击“软件”部分中UML 2.5形状库旁边的复选框,然后单击“应用”。

动态形状选择

draw.io中的双击行为已更新为更加方便。当您双击空白的绘图画布或单击绘图画布上现有形状的方向箭头之一时,将出现一个选择框–单击其中的一个以快速将该形状或文本添加到图表中。

您可以使用默认样式从“常规”形状库中选择一系列常见形状。

协同编辑

现在,针对Confluence Cloud的draw.io支持使用已内置在图表编辑器中的自动保存功能进行协作编辑。多个用户可以同时编辑图表并查看每个人所做的所有更改,而无需手动同步或合并更改。

在示例中,打开了两个浏览器窗口,并编辑相同的图,就像它们是两个不同的Confluence Cloud用户一样。

当两个用户将形状添加到同一位置时,draw.io只会将它们重叠。

当将子形状添加到另一个用户刚刚删除的父形状中时,该子形状将出现在所有图上。但是,连接到它的连接器将不存在,因为父形状将被删除。

草绘形状的粗略样式

draw.io集成rough.js到我们现有的和相当有限,漫画的风格,其结果是相当有用的。信息图表,教材,地图和报告中使用的形状,填充和线条更为宽松和非正式的样式非常有用。

通过格式面板上的“样式”选项卡启用粗略草图样式。

要更改草图样式,请更改形状属性。单击形状或连接器,然后展开“属性”部分。您将要更改的最常见属性包括:

抖动–边界,连接器和填充颜色的粗糙度。

填充重量–用于绘制填充颜色的“笔”的宽度。

哈希间隙–草图填充线之间的距离。

哈希角–草绘填充线的方向。

禁用多冲程–在草绘的边框中“笔”通过一遍。

禁用“多笔触填充” -以草绘的填充颜色对“笔”进行一遍处理。

素描样式–粗略或漫画的素描样式。

模板配色方案

现在,您可以将模板颜色方案应用于整个图表,而不必分别设置图表中所有形状和连接器的样式。

确保在图表中未选择任何内容,然后在“格式”面板中选择“样式”选项卡。从方案之一(超过两页)中进行选择,以一键式更新图表背景以及所有形状和连接器的样式。将鼠标悬停在样式上可以查看预览。

使用复选框将连接器的样式更改为“弯曲”,选择“圆角”以对所有矩形的角进行圆角处理,或应用“草图”样式。

draw.io bug赏金计划

安全对我们很重要,也是我们今年发展的重点。我们抓住了参加Atlassian的Bug赏金计划的机会。

Atlassian已与领先的众包安全平台之一Bugcrowd合作,以帮助应用程序供应商检测Marketplace应用程序中的漏洞。Bugcrowd利用全球黑客社区的集体创造力-众包安全测试-帮助公司发现和修复软件漏洞。

全新的桌子和相关形状的更新

使用表格的表格和形状(例如UML实体形状)已经进行了大修,比以前使用的旧HTML表格更加灵活和健壮。使用新表,您可以从各种布局中进行选择,拖动以调整行和列的大小,通过拖动来移动行以及在表及其单元格中构建跨功能流程图。

就像在Confluence中一样,使用draw.io工具栏中的表格工具将表格添加到您的图表中。

选择表格后,表格工具可让您快速添加或删除行和列。或者,使用“格式”面板上的“排列”选项卡。

在Windows上按住Ctrl键,在Mac上按住Cmd键,可以通过表格工具添加空白的跨功能流程图(行和列中的其他标题)。

Mermaid.js图

Mermaid是Markdown启发式的语法,您可以从文本“描述”中生成流程图,UML图,饼图,甘特图等。编写完此文本描述后,您可以将此文本插入到draw.io编辑器中以生成图表并自动进行布局。

例如,在Mermaid.js中“编写”的流程图所示:

图TD   A(灯不起作用)- B {是否插入了灯?}   B- |否| D(插入灯)   B- |是| E {灯泡烧坏了吗?}- |是| G(替换灯泡)   C- |否| F(维修灯)

新的C4形状库

遵循由西蒙·布朗(Simon Brown)设计的系统的C4模型用于以抽象和简单的方式描述和定义体系结构。它着重于四个c:上下文(人员),容器,组件和代码,每个细节“层”都有不同的图表。

draw.io现在包括一个C4形状库,其中包含创建所有这些图所需的形状,包括用于详细代码文档的大量UML形状库。以下是示例C4容器图,其中的图例向您显示了C4形状库中可用的形状。

要启用C4形状库,请单击左面板底部的“更多形状”。然后滚动到“软件”部分,并启用C4形状库旁边的复选框。点击“应用”。

提示:形状元数据用于传达其他上下文信息。