PDDON | 又偶遇一款令人惊艳的在线绘图工具

目录

一. PDDON 简介

二. PDDON 能画哪些图?

三. PDDON 的常用画图技巧

1. 常用绘图元素

2. 绘图模式

3. 常用操作

---

一. PDDON 简介

PDDON是一款支持低代码(lowcode)的免费在线画图工具。可用于绘制架构图、流程图、UML、网络拓扑图、韦恩图、鱼骨图、思维导图、BPMN等，并且支持对象建模、数据库建模、代码/脚本生成。

PDDON与市面上现有的画图工具对比有哪些优势呢？

1、PDDON完全免费

 为啥免费呢？

• PDDON不会像其他工具在您使用过程中或者导出图片时添加诸多限制，并诱导你去充值消费。

• PDDON不用注册也能画图，但是为了保证您数据的安全性，体验完整的功能，建议您先注册后再使用。

• 注册也是不收费的，just free!

• PDDON使用TypeScript+浏览器为用户提供了本地化的画图体验，所有核心技术完全自主可控，不用担心别人卡脖子。

• PDDON对个人用户完全免费，是为了让所有人都能体验到从事画图设计的自由和乐趣，相信自己，相信PDDON，我们能做的更好！

• 如果是企业有类似画图软件这类的需求，可以联系官方进行私有化部署或者定制化开发。

2、PDDON功能强大且配套齐全，使用简单。

PDDON支持以下常用的功能和特性：

- 创建绘图可选类型支持：流程图、架构图、UML图、网络拓扑图、bpmn、思维导图、韦恩图 、鱼骨图、自由风格绘图等等

每种绘图都提供了符合各自特性的辅助画图能力，让你的画图更轻松，绘图更漂亮 如果你找不到合适的绘图类型，可以选择自由绘图类型，支持白板作图，不做任何限制，任何绘图都支持，当然也失去了已有绘图类型提供的一些辅助画图能力，所以只推荐在系统未提供类型的情况下使用哦。

- 可上传本地图片、在线图片等

支持搜索网络图片

- 提供了组件分组、对齐、尺寸调整、移动、选择、组件/连线风格调整、层叠顺序调整、撤销/恢复、导航预览、组件类型替换、旋转等等基本绘图功能

拖动组件位置有参考线自动对齐和吸附功能

- 提供了很多高级组件，具备各自的超能力

- 支持常用快捷键

支持操作有：复制、剪切、粘贴、删除、分组、移动、对齐、下载、导入导出、保存等等。而且所有操作均支持多选，支持多个绘图间共享数据，快捷键都是可用的。

- 连线样式灵活丰富

预置了大量连线样式，选择即可使用
还具备一键切换所有连线样式风格

- 画图工作区支持多个绘图同时编辑，绘图间可以通过快捷键共享和传递数据

同一画图工作区打开多个绘图，绘图间数据可以共享，便于绘图间数据交换

- 支持一键转手绘、草图风格

可以调整手绘杂乱度、填充风格、线条风格，绘制各式各样的草图风格。

- 支持LaTeX数据表达式

可用于任何可输入的组件，均支持添加数学公式

- 为不同类型的绘图提供了定制化辅助绘图能力

比如位置自动吸附对齐、风格跟随、连线路径自动优化、嵌套组件自动吸附关联、组件功能增强等等

- 支持一键美化绘图

PDDON为不同类型的绘图指定了符合绘图风格类型的美化能力，自动计算并调整组件、连线位置、样式等。以辅助画图人员更便捷的画图。总之，一键美化，软件会自动的帮你优化布局和图形。

- 支持对象建模、数据库建模

UML类图可以进行对象建模，实时代码预览，可打包下载

数据库ER图支持数据库建模，实时SQL预览，可打包下载

UML类图和ER图之间可以快速互转，便于二次细化设计

目标类型、命名等等可以自动转换，无需手动修改

- 组件库丰富，且可自定义组件

为不同类型绘图提供了专有组件库

支持选择使用系统预置的众多组件库，现已支持cisco、阿里云、aws云、bpmn等组件库，还在不断扩充中

支持DIY手动设计绘图

- 提供了大量优质模板和教程

• 模板中心提供了大量可克隆的绘图模板，一键使用即可，完全免费！

• 新建绘图也可以选择使用模板

• 社区内提供了大量简易入门教程，方便您的使用

- 数据安全，导入导出功能为你的绘图数据安全保驾护航

PDDON不收集您的用户信息、云端不会保存您的画图数据，仅仅为您提供绘图能力服务。如果需要把数据存储到云端，后续会推出第三方授权存储服务，您只管愉快的画图，其他的交给PDDON。

- 断网也不怕

打开PDDON画图工作区后，即时后面断网了，也可以继续画图，正常保存。

- 支持跨端跨平台

无论使用手机、电脑，无论在何地，只需要认准网址：pddon.com，用浏览器打开它，就可以画图了  。

打开微信搜索：PDDON在线画图，关注我，不迷路哦。

浏览器搜索：PDDON ，也可找到我。

- 插入代码

当我们绘制UML图形时，该软件支持插入代码，还能够生成数据表模型，真的非常的实用。

- 代码运行

软件支持在线运行代码，不过目前pddon只支持JavaScript或者typescript这两种类型。 

社区支持

关于社区的支持，这也是PDDON非常贴心的一点。我们在使用一些绘图软件时，难免会遇到一些问题。一些绘图工具只是提供了功能，而没有提供一些教程，这就对于一些初学者非常的不够友好。 PDDON Community 优质资源教程伴你成长

-  ...... ，其他的功能，大家可自行在使用过程中去体验。    

小结：pddon与其他绘图软件的区别

- 在线画图，打开浏览器就能用，无论windows、mac、linux系统，支持市面上大部分浏览器：chrome、Firefox、edge、360安全/极速、Safari等浏览器，最好都使用新版本浏览器，画图体验更好，IE不提供支持，UC浏览器兼容性也比较差，不建议使用，而且手机上也能画图哦！

- PDDON完全免费，但不同于其他免费软件，PDDON非常好用，而且一直在迭代更新，致力于提供更简单高效美观的绘图软件服务

- pddon为每种类型绘图做了定制化功能增强，并非是纯图形绘制，在逻辑功能上进行增强，更易于使用

- 对程序员和设计者更友好，提供了低代码能力，自动生成SQL和代码节省了编码的时间，而且不易出错，能最大程度保持设计稿与代码的一致性

- 国人开发的，功能体验对国内用户更友好

- 提供了很多傻瓜式的智能操作功能，能快速一键切换连线、绘图风格

- 智能辅助绘图功能简化用户操作，对无绘图经验的用户更友好

- 功能简化用户操作，对无绘图经验的用户更友

---

二. PDDON 能画哪些图?

1. 架构图

2.自由风格

当您在PDDON新建绘图时，没有找到合适绘图类型，那么你可以选择自由风格类型绘图，此类型绘图给予用户极大的自由，不对用户画图行为进行限制和引导，任何风格、行业类型的绘图都支持。

️ 其他绘图一

️ 其他绘图二

 ️ 其他绘图三

3.流程图

4.UML图

5.模型图

UML类图建模、Database ER图建模，支持代码/脚本预览和打包下载

️ UML类

️ 数据库模型ER图

️ 代码/SQL预览

️ 代码/SQL下载

三. PDDON 的常用画图技巧

️ ——  PDDON在线画图快速get画图小窍门  —— ️

画图工作空间功能分布

1. 常用绘图元素

 组件

PDDON提供非常丰富的组件库，包含各种图形组件、容器组件、功能组件等等，不同的组件的外观、业务含义、具备的功能特性不尽相同。 组件间可以通过连线进行连接，不同的组件具备各自的连接规则，用以控制组件是否允许引出/引入连线，可以通过属性面板查看组件信息。

  连线

用于建立组件之间的联系，以线条方式展示，可以设置不同样式的连线风格和箭头样式，可以添加描述信息。

 线条

• 线条路径类型

连线路径由起始位置和结束位置确定，目前支持如下类型路径

* 直线

* 曲线

* 二次贝塞尔曲线

* 直折线

* 按长度分段直线

• 线条风格

可以选择PDDON预置的各种线条风格

• 线条样式

可以设置线条的颜色、宽度等等样式

• 描述信息

可以为连线添加描述信息，描述信息可以相对于连线位置：
* 开始位置
* 中间位置： 默认使用中间位置描述信息
* 结束位置

• 箭头

连线可以设置不同风格的箭头。控制起始、结束位置是否显示箭头，箭头是否需要填充，可以设置箭头大小、箭头形状、颜色等等

 锚点

• 锚点附着在组件上，组件引入/引出连线时均需要选择具体位置的锚点进行连接。
• 组件在未选中状态时才允许连线操作。
• 鼠标访问组件时可以展示组件内预置锚点。
• 鼠标在组件区域内边缘处移动并点选可以触发自定义位置锚点。
• 锚点可以引出连线，亦可引入连线。

 控制点

组件在选中状态下，组件周围会显示各个控制点，用于调制组件的尺寸大小。

2. 绘图模式

在大部分画图场景中，我们使用PDDON默认的智能模式进行绘图已经能够满足绝大部分需求，但是在某些特殊精细化绘图场景中，我们需要使用到其他绘图模式。主要包含如下几种绘图模式。

1. 智能模式
   同时可拖动组件、绘制连线，连线由鼠标悬停组件边缘触发。
2. 移动模式
   更易于对组件进行各种操作，如移动位置、调整尺寸等等，但不可连线操作。
3. 画线模式
   更易于绘制连线，但不可拖动组件位置。
4. 拖动画布模式
   可以使用抓手工具拖动画布视口位置，不可连线操作。

3. 常用操作

 选中/取消选中组件

选中/取消选中组件方式有：

• 鼠标点击（CTL+鼠标点击为多选，否则为单选）
• 矩形选框（空白区域按住鼠标左键拖动）
  未选中节点包含在区域内代表选中，否则为取消选中状态，矩形选框操作为多选模式
• 快捷键 (Ctrl + A)
• 右键菜单(选中组件/连线或取消选中)
• 单击画布空白区域即可取消所有选择

 编辑组件/连线文本

双击组件、或连线可以进入编辑文本状态，点击右键选择编辑菜单亦可使组件进入编辑状态。

 移动组件位置

- 单个组件移动：

光标移动到组件区域内，光标呈移动样式，按住鼠标左键向目标方向移动即可（容器组件光标需要移动到标题栏内或者近边框边缘处，以光标样式为指示进行操作即可）。容器类型组件移动会带动子组件一起移动。移动过程中会有辅助线参考对齐与自动吸附。

- 选择组件/分组移动：

可以选中多个目标组件或分组，按住鼠标左键拖动到目标位置即可。

 改变组件尺寸大小

选中单个组件时，可以显示组件控制点，鼠标左键按住并拖动可以调整组件大小。 

 连线操作

• 在智能模式下，鼠标悬停在组件边缘可引出连线，拉动到目标组件内释放引入连线，连线便创建成功。
• 在画线模式下，鼠标悬停在组件内可引出连线，拉动到目标组件内释放引入连线，连线便创建成功。
• 鼠标从组件边缘上锚点引出或引入，可以指定该锚点连线，否则系统根据组件位置关系自动计算连线锚点，并可以跟随组件位置变化而自动修改连接锚点。

 撤销、恢复、复制、克隆、剪切、粘贴、删除等等

组件/连线均可以使用快捷键、右键菜单等方式进行常规操作，而且支持同页面不同绘图间进行操作。 

 旋转组件

先选中组件，再按住鼠标左键向目标方向拖动，会在组件中心点显示辅助线。也可以使用右键菜单进行旋转或者取消旋转。

 调整组件间层叠顺序

组件间区域有重叠时，可以使用右键菜单或工具栏层叠顺序调整功能，改变组件间垂直方向堆叠顺序。 

 调整画布尺寸

• 新增绘图时可以设置画图尺寸
• 组件新增、移动、尺寸调整时均可以自动调整画布尺寸
• 通过设置页可以修改当前绘图画布尺寸
• 通过视图菜单可以修改绘图画布尺寸
• 通过自动裁剪画布空白区域功能，可以裁剪掉绘图边缘多余空白区域

 整体缩放画布

• 通过快捷键Ctrl + 鼠标滚轮进行快速缩放
• 通过工具栏进行缩放
• 通过视图菜单进行缩放

 利用导航工具轻松定位画布可视区域

当绘图画布太大时，通常我们可以切换到画布拖动模式拖动画布可视区域，其实除了这种方式，我们还可以使用导航窗口控制可视区域的移动。

导航窗口除了提供预览功能，还具备画布可视区域移动的功能，主要有如下两种方式：

• 点击目标位置： 移动可视区域到目标位置
• 拖动可视区域框到目标位置

 批量修改样式 

 组件间对齐

 

 分组功能

  组件批量更改大小

 使用一键更换样式等功能快速更新样式

- 切换连线风格 

- 切换整体风格

 使用一键美化绘图功能自动优化组件和连线位置

 下载图片

可以将绘图导出为指定格式的图片，工具栏或菜单均可以操作。

PS：关于Pddon导出图片附带水印的问题，联系官方提供账号昵称是可以帮你关闭水印功能的。

  联系官方：

反馈结果：

 导入导出绘图数据

您可以使用导入导出绘图数据功能，将您的绘图数据进行备份和恢复。

你可能还喜欢：Draw.io | 一款强大且支持在线编辑和导出的流程图绘制神器