绘图 | 乐趣区

关于绘图:CAD绘图工具AutoCAD-2020中文版旧版本

AutoCAD 2020中文版是一款弱小的CAD绘图工具，领有全新的用户界面，用户通过交互菜单或命令行形式即可进行各种操作，直观的多文档设计环境使非计算机专业人员也能够疾速上手。AutoCAD2020中文版还带来了许多令人期待的性能和改良，比方针对特定行业的工具集，改良了桌面、Web和挪动设施的工作流程。我感觉AutoCAD2020中文版最大的特色就是咱们只须要将鼠标悬停在图纸上就能够在图纸中显示所有左近的测量值，并且反对在任何设施、桌面、Web或挪动设施上查看、编辑和创立AutoCAD中的图形。除此之外AutoCAD2020破解版还新增了“DWG比拟”性能，用户能够在模型空间中亮显雷同图形或不同图形的两个订正之间的差别，总的来说AutoCAD2020中文版带来的这些性能都是有利于缩小用户的繁琐操作步骤数和进步工作效率的。下载：https://www.macz.com/mac/67.h...

关于绘图:edraw-max亿图图示注册激活版

edraw max是一款多功能绘图软件，不仅能够制作具备业余外观的流程图、组织图、网络图和商业图表，而且也能够很不便地绘制各种业余的建筑图、思维导图、工作流程图、时装设计、UML图表、电气工程图、方向地图、程序结构图、数据库图表等等。软件下载：https://www.macz.com/mac/2783...

开源易扩展方便集成的在线绘图微服务架构图网络拓扑图流程图工具

一个基于typescript + canvas 实现的开源在线绘图的引擎Topology。采用引擎 + 图形库中间件的思路能够方便、快速的扩展、集成到前端项目。目前暂时实现了基本图形、流程图图形库，能够满足微服务架构图、网络拓扑图和流程图的绘制。后面计划陆续实现活动图/时序图/类图等UML图。在线免费使用（因为操作方便问题，暂时没有适配移动端）为什么重复造轮子笔者工作中遇到比较多的微服务架构、云资源运维、部署与运维可视化方面的需求开源、满足自己需求的不多typescript + 纯粹canvas架构的不多以中间件方式可定制满足不同场景的不多最重要的是，兴趣 + 不难特点开源可定制化简单易用，方便集成较好的性能，非常流畅方便的数据导入导出图片保存/预览typescript + canvas使用场景微服务架构图运维时部署结构拓扑图流程图后续会推出的：活动图时序图类图等架构设计主要由：层、节点、连线和箭头等组成。层：这里的层，主要是为了提升性能的逻辑层；与ps里面的用户图层无关。离屏层：包含所有绘图数据，是最稳定的图层。选中层：用户选中部分或全部节点/连线的高亮图层，并设置相关属性、缩放、和旋转等。动画层：主要用于演示动画。活动层：主要用于箭头鼠标交互事件，比如锚点和连线过程。节点：是画布的主要组成部分，节点内部还可以包含图标或文字。连线和箭头：连线和箭头是关联在一起的。连线两端可以选择设置或不设置箭头。节点可以通过控制点进行整体缩放、旋转。绘画与属性节点和连线各种有自身的绘画属性，同时还可以设置一个附加的自定义数据快速集成使用es6使用示例：https://github.com/le5le-com/... typescript使用示例：https://github.com/le5le-com/... 安装# 安装绘图引擎npm install topology-core# 安装图形库 - 流程图npm install topology-flow-diagram# ...其他图形库创建基础画布// 1. 导入绘画引擎import { Topology } from 'topology-core';// 2. 创建画布// 其中，第一个参数'topo-canvas'表示canvas的dom元素id；// 第二个参数{}表示画布选项，这里表示全部使用默认值。具体选项请参考后面的api文档。var canvas = new Topology('topo-canvas', {});// 3. 渲染图形// 其中，第一个参数{}表示图形数据// 第二个参数true，表示打开一个新文件；否则在当前文件打开，覆盖已存在的图形数据canvas.render({}, true);常用画布方法// 获取画布数据const data = this.canvas.data();// 保存为图片blob// toImage函数参数：type, quality, callbackthis.canvas.toImage(null, null, blob => { // Do sth.});// 下载为图片// saveAsImage函数参数：filename, type, qualitythis.canvas.saveAsImage('canvas.png');// 编辑相关操作this.canvas.cut();this.canvas.copy();this.canvas.parse();this.canvas.undo();this.canvas.redo();引用第三方图形库// 使用第三方图形库// 1. 先导入注册函数import { registerNode } from 'topology-core/middles';// 2. 导入图形库图形及其相关元素import { flowData, flowDataAnchors, flowDataIconRect, flowDataTextRect, flowSubprocess, flowSubprocessIconRect, flowSubprocessTextRect, flowDb, flowDbIconRect, flowDbTextRect, flowDocument, flowDocumentAnchors, flowDocumentIconRect, flowDocumentTextRect, flowInternalStorage, flowInternalStorageIconRect, flowInternalStorageTextRect, flowExternStorage, flowExternStorageAnchors, flowExternStorageIconRect, flowExternStorageTextRect, flowQueue, flowQueueIconRect, flowQueueTextRect, flowManually, flowManuallyAnchors, flowManuallyIconRect, flowManuallyTextRect, flowDisplay, flowDisplayAnchors, flowDisplayIconRect, flowDisplayTextRect, flowParallel, flowParallelAnchors, flowComment, flowCommentAnchors} from 'topology-flow-diagram';// 3. 向引擎注册图形库图形及其相关元素registerNode('flowData', flowData, flowDataAnchors, flowDataIconRect, flowDataTextRect);registerNode('flowSubprocess', flowSubprocess, null, flowSubprocessIconRect, flowSubprocessTextRect);registerNode('flowDb', flowDb, null, flowDbIconRect, flowDbTextRect);registerNode('flowDocument', flowDocument, flowDocumentAnchors, flowDocumentIconRect, flowDocumentTextRect);// ...// 下面是简单的注册函数介绍，详情请参考api文档// registerNode: 注册一个自定义图形节点node.// name - node名称.// drawFn - node渲染函数。传入canvas ctx和node数据，自己决定如何绘画node// anchorsFn - 计算node的锚点，如果为null，表示使用缺省计算锚点方法// iconRectFn - 计算node的图标区域，如果为null，表示使用缺省计算图标区域方法// textRectFn - 计算node的文字区域，如果为null，表示使用缺省计算文字区域方法// force - 如果已经存在同名node，是否覆盖.export function registerNode( name: string, drawFn: (ctx: CanvasRenderingContext2D, node: Node) => void, anchorsFn?: (node: Node) => void, iconRectFn?: (node: Node) => void, textRectFn?: (node: Node) => void, force?: boolean);开发自己的图形库参考开发文档：https://www.yuque.com/alsmile... ...

时序图绘制工具走马观花

为什么我会需要绘制时序图我司在做一些咋看之下比较复杂的需求的时候，都需要先写设计文档，不过我猜想这种规矩应该在很多公司都有才对，我并没有其它公司没有这种规矩的言外之意。然后呢，我个人比较习惯按照“从外到内”的方式来写设计文档，因此，在文档的开篇我总是会描述一下一个需求的全局视图，一般来说，就是用绘图的方式。对于一些复杂的活动需求里的流程，咋一看觉得会涉及到多个系统间的调用的时候，我就会选择画一幅时序图了。需要事先说明的是，我没有正儿八经地系统学习过UML方面的内容，所以我画出来的图都只是一些不算很规范的野鸡时序图，当然了，我也不知道这世界上到底有没有规范的时序图画法。为了画时序图，用过几款工具。它们的共同点，就是都是“语绘”的，也就是通过写代码的方式来描述所想要的图，然后让这些工具帮你把这张图给“画出来”。我个人更喜欢这种方式，而不是拖拖拉拉，不过这纯粹是个人喜好的问题而已。走马观花www.websequencediagrams.com是我接触到的第一个“语绘”时序图的工具。打开它之后，就会看到它的实例代码和效果图了，截图如下用这个网站的工具画出来的时序图会有一种【手绘】的感觉 sdedit是我第二款使用的绘图工具，是一款用Java开发的本地工具，只需要编写好一个.sd文件，然后用下列的命令处理即可 sdedit -t png -o a.png a.sdsdedit绘制时序图的代码的语法跟WebSequenceDiagrams不同，在Emacs中似乎也没有找到别人写好的适合编辑.sd文件的主模式，后来我自己定义了一个简陋的主模式来用，如下 (setq sdedit-highlights '(("Actor\\|Node" . font-lock-function-name-face)))(define-derived-mode sdedit-mode fundamental-mode "sdedit" "编辑.sd文件的主模式" (setq font-lock-defaults '(sdedit-highlights)));;; 代码是从下面这个网页给的例子改动来的;;; https://www.emacswiki.org/emacs/CompileCommand(add-hook 'sdedit-mode-hook (lambda () (unless (file-exists-p "Makefile") (set (make-local-variable 'compile-command) (let* ((buffer-name (buffer-name)) (base-name (car (split-string buffer-name "\\.")))) (format "/usr/local/bin/sdedit -t png -o %s.png %s.sd" base-name base-name))))))(add-to-list 'auto-mode-alist '("\\.sd$" . sdedit-mode))勉勉强强可以接受 sequencediagram.org则是最近刚发掘到的一个不错的绘制时序图的在线工具。它的绘制语法跟WebSequenceDiagrams是一样的，并且它还有一个不错的教程。打开它的网站后，点击左侧的这个图标便可以看到详尽的语法教程。 sequencediagram.org绘制出来的时序图是这三个工具中最符合我的审美的，今后应当会成为我绘制时序图的主力工具。阅读原文

使用 canvas 绘图

HTML5 添加的最受欢迎的功能就是<canvas>元素，这个元素负责在页面中设定一个区域，然后就可以通过 javascript 动态的在这个区域中绘制图形基本用法使用 canvas 元素，必须指定 width，height 属性开始标签和结束标签之间的内容，是后备信息。如果浏览器不支持 canvas，则显示该信息<canvas id=“drawing” width=“200” height=“200”> drawing something </canvas>要在画布（canvas）上绘图，需获取 2D 上下文。 var drawing = document.getElementById(“drawing”); if(drawing.getContext){ //必须先判断，因为有些浏览器并没有getContext方法 var context = drawing.getContext(“2d”); //更多操作 }2D 上下文原点坐标坐标原点位于 canvas 的左上角，原点为（0,0），越往右 x 值越大，越往下 y 值越大填充和描边2D 上下文绘图操作基本是两种：填充：用指定样式填充图形，操作结果取决于 fillStyle描边：只在图形边缘划线，操作结果取决于 strokeStyle将 context.fillStyle 或 context.strokeStyle 设为某个值后，之后所有的描边和填充操作都会使用对应的值，直到重新设置这两个值如何使用将与下面绘制矩形一同介绍绘制矩形矩形是唯一一种可以在 2D 上下文中绘制的形状，包含三个方法：fillRect() 、 strokeRect() 、 clearRect()接受参数都一样是 4 个参数，分别是：x 坐标，y 坐标，宽度，高度下面是使用的例子：var drawing = document.getElementById(“drawing”);if (drawing.getContext) { var context = drawing.getContext(“2d”); context.strokeStyle = “#ff0000”; context.strokeRect(10, 10, 50, 50); //绘制空心矩形（描边） context.fillStyle = “#0000ff”; context.fillRect(70, 10, 50, 50);//绘制实心矩形（填充） context.clearRect(80, 20, 20, 20);//清空某个区域}执行结果：第二个矩形中间的空白部分就是被清空了的绘制路径2D 上下文支持很多在画布上绘制路径的方法，通过路径可以创造出复杂的图形绘制路径的操作流程为：必须调用 beginPath(), 表示开始绘制新路径调用绘制路径的方法。如果想绘制一条连接到路径起点的线条，调用 closePath()对路径进行填充 fill() 或描边 stroke() 、或者创建一个剪切区域 clip()接下来让我们来绘制一个钟表首先了解下待会会使用到的绘制路径的方法：arc(x , y , radius , startAngle , endAngle , counterclockwise): 以圆心绘制一条弧线，半径为 radius，起始角度和结束角度lineTo(x,y)从上一点（也就是游标当前点）开始绘制一条直线，到 ( x,y ) 为止moveTo(x,y)将游标移动到 ( x , y ), 不画线除了这些之外，绘制路径还有其他一些方法：arcTo , bezierCurveTo , quadraticCurveTo ,rect,这些就请自行参与官方文档了 var drawing = document.getElementById(“drawing”); if (drawing.getContext) { var context = drawing.getContext(“2d”); //1.开始路径 context.beginPath(); //2.开始绘制路径 //绘制外圆 context.arc(100, 100, 99, 0, 2 * Math.PI, false); //绘制内圆 context.moveTo(194, 100);//先把游标移动到要内圆起点 context.arc(100, 100, 94, 0, 2 * Math.PI, false); //绘制分针 context.moveTo(100, 100); context.lineTo(100, 15); //绘制时针 context.moveTo(100, 100); context.lineTo(35, 100); //3.绘制路径完，进行描边 context.stroke(); }执行结果：注意：arc()中的参数度数是弧度而不是角度，1 弧度 = 180° / ，1° = /180 ，所以，旋转 360°，需要旋转 2 弧度绘制文本2D 绘图上下文也提供了绘制文本的方法： fillText() 和 strokeText()都有 4 个参数：要绘制的文本字符串，x 坐标 ,y 坐标，最大像素宽度（可选）在使用绘制文本方法之前，应该先设置下列 3 个属性：font，textAlign，textBaseLine让我们为上一个例子的钟表添加一个 12 的数字context.font = “bold 14px Arial”;context.textAlign = “center”;context.textBaseline = “middle”;context.fillText(“12”, 100, 20);运行结果：变换通过上下文的变换，可以把处理后的图像绘制到画布上。可通过如下方法来修改变换矩阵：rotate(angle):围绕原点旋转图像 angle 弧度。scale（scaleX，scaleY）：缩放图像translate(x,y)将坐标原点移到 x , ytransform(m1_1,m1_2,m2_1,m2_2,dx,dy):直接修改变换矩阵变换可能很简单。对于绘制表针来说，如果把原点变换到表盘中心，在绘制表针，就容易得多var drawing = document.getElementById(“drawing”); if (drawing.getContext) { var context = drawing.getContext(“2d”); //1.开始路径 context.beginPath(); //2.开始绘制路径 //绘制外圆 context.arc(100, 100, 99, 0, 2 * Math.PI, false); //绘制内圆 context.moveTo(194, 100);//先把游标移动到要内圆起点 context.arc(100, 100, 94, 0, 2 * Math.PI, false); context.translate(100, 100);//主要是这里将坐标原点移到(0,0)，所以接下来的计算都相对于圆心来计算 //绘制分针 context.moveTo(0, 0); context.lineTo(0, -85); //绘制时针 context.moveTo(0, 0); context.lineTo(-65, 0); //3.绘制路径完，进行描边 context.stroke(); }结果与上面一模一样，但是计算就要简单得多。对于上下文的属性与变换，可以使用save()来保存，当时的设置会被保存进一个栈结构。当想使用之前保存的设置，则调用restore()方法绘制图像2D 上下文内置了对图像的支持。drawImage()context.drawImage(img, 0, 0, 200, 200, 0, 0, 300, 300);//参数分别是：要绘制的图像、原图像的x、y、宽度、高度、目标图像的x、y、宽度、高度注意：图像需要预加载，或者在 img.onload 中执行 drawImage 才有效toDataURL()var drawing = document.getElementById(“drawing”);if (drawing.getContext) { var context = drawing.getContext(“2d”);}var src = drawing.toDataURL();//获得canvas中的图像数据var canvasImg = new Image();canvasImg.src = src;document.body.appendChild(canvasImg);使用图像数据2D 上下文有个长处，可以通过 getImageData()取得原始图像数据.这个方法非常有用。var imageData = context.getImageData(10,5,50,50);//(10,5)左上角，大小为50*50的区域的图像数据让我做一个灰阶过滤器：var drawing = document.getElementById(“drawing”);if (drawing.getContext) { var context = drawing.getContext(“2d”); var img = document.images[0]; context.drawImage(img, 0, 0); var imageData = context.getImageData(0, 0, img.width, img.height); var data = imageData.data; var red, green, blue, alpha, average; //对图像数据的red green blue 进行处理 for (var i = 0, len = data.length; i < len; i += 4) { red = data[i]; green = data[i + 1]; blue = data[i + 2]; alpha = data[i + 3]; average = Math.floor((red + green + blue) / 3); data[i] = red + 100; data[i + 1] = green + 100; data[i + 2] = blue + 100; } imageData.data = data; context.putImageData(imageData, 0, img.height);}结果：分别是处理前和处理后。图像数据除了做灰阶过滤器，还有很多其他功能，例如锐化、亮度之类的，有兴趣的可以到这里了解下：http://www.html5rocks.com/en/… ，请自备梯子其他：2d 上下文还有其他的以下功能：阴影、渐变、模式、合成，这些就不细讲了！: )GitHub：https://github.com/chen4342024个人博客：https://chen4342024.github.io…常用代码片段整理：https://chen4342024.github.io… ...

边城工具集：绘图及标注工具

写文档、写博客难免需要绘图，笔者在前端时间写专栏《JavaScript 全栈工程师养成记》的时候，就使用了大量的绘图工具来绘制插图，受到读者们的要求和鼓励，决定将自己使用的绘图工具和方法展示出来，供大家参考、批评、指正。根据笔者的习惯，介绍的工具几乎都是免费或个人使用免费的，如果有收费工具，笔者会特别说明。纸、笔和扫描软件最先介绍的工具，非常传统，就是纸和笔。不过纸笔绘制的内容要在呈现在电子文档中或者在网络上分享，还需要电子化，扫描仪固然是非常专业的设备，但不是人人都能找一这样的条件。不过智能手机几乎人人都有，安装一个扫描软件就能解决问题。扫描软件很多，笔者一直使用的是老牌软件“全能扫描王”。先秀两张图：纸笔是在思考问题时能使用的最直接，也最方便的工具。提笔便画，不受软件格式约束（笔者在使用软件时常常会被一些细节分散注意力，比如字体、颜色、线条粗细等）。当然纸笔绘制的一般都是草图，要想放在正式文稿当中还需要加工，这个时候就要用一些绘图类软件了。比如上面两张图，笔者要把它们绘制成正式文稿的话，使用脑图工具 MindMaster 来绘制第一张，使用 WPS 演示（或 PowerPoint）来绘制第二张。脑图工具：MindMaster脑图又称思维导图，是将思维过程绘制出来的最佳工具之一。笔者曾使用过多款思维导图工具，比如开源的 FreeMind，曾经具有免费版本的 XMind，在线的百度脑图，及至目前最常用的 MindMaster。比如前面提到的《JavaScript 全栈工程师养成记》，笔者就用脑力绘制了一个大纲脑图可以很好地表达具有分支结构的内容，也可以对其中一些节点进行连续关联。但是如果跨分支的关联节点太多，脑图就可能会画得比较乱，还是需要一些技巧和细致调整来保持脑图的整洁程度。用办公套件画示意图办公套件，当然是指 WPS 或 Microsoft Office。笔者近年来比较习惯使用 WPS，尤其是 WPS 2019 的界面的操作非常人性化，当然部分功能还不如 Microsoft Office 强大，但笔者认识常规应用上 WPS 的体验已经超过 Office 了。笔者养成这个习惯是因为 WPS 个人版本免费，虽然新买的电话赠送了 Office 2016 家庭版，但是用习惯了，只有在遇到 WPS 不能很好处理的问题时会换 Office 来处理。套件中，最常用的两个工具是幻灯片和电子表格。幻灯片本身的重点就在于示意，所以用它来绘制示意图非常合适，还是拿一张专栏中的插图来举例：而且还可以用来画一些简单的原型图：但如果是一些开头比较规则的图，不管是原型图还是示意图，都可以用电子表格来绘制，比如这样在“JavaScript/TypeScript 编写俄罗斯方块”系列文章中用的大部分插图都是电子表格绘制的，这是其中一张相关阅读JavaScript 版俄罗斯方块JavaScript 版俄罗斯方块 - 重构JavaScript 版俄罗斯方块 - 转换为 TypeScriptTypeScript(JavaScript) 版俄罗斯方块 — 深入重构代码（注意查看分支）除此之外，笔者还在视频《从JS到TS开发数独游戏（JS版）》的 2-2 节中利用电子表格讲解了洗牌算法。还有 TS 版在这里除此之外，绘制统计图形，更是电子表格的强项。当然如果想把统计图形绘制得漂亮一点，可以使用百度 ECharts，它官方示例中的数据都是可以修改的 —— 找个自己中意的示例，改下数据就好。强大的看图工具：FastStone Image ViewerFastStone Image Viewer，简称 FSIV，是笔者非常喜欢的一款看图工具，功能强大，而且免费。它提供好几种模式（列表、预览、窗口、全屏、幻灯片等），但这不是重点。重点是它还有很多常用的图片处理功能：常用的缩放、裁剪、旋转、翻转等，尤其是它的“任意角度旋转”功能，非常贴心的提供了根据用户绘制水平或垂直参考线来旋转，不需要去猜角度（菜单：编辑→放置→任意角度旋转）补光/减光：可以分别对阴暗区域和明亮区域进行亮度调整，可以调整对比度和饱和度编辑工具板：可以对图片添加矩形（正方形）、椭圆（圆）、线条、箭头、高亮区域、文本、插图等。不过笔者少用这个功能，因为有后面要介绍的 Snipaste 截图工具。调整色阶、曲线、锐化、模糊、去噪音等，尤其是“调整色彩”功能，可以在一个界面上调整亮度、对比度、伽玛、红绿蓝通道、色调和饱和度，都快赶上 Photoshop 了。几种效果：灰度、负片、怀旧（老照片）还有几种特效：浮雕、素描、油画等你以为这就完了，No, No, No，FSIV 还有强大的批处理功能，列表浏览模式下，多选几张图片，在右键菜单“工具”中就可以看到批量重命名和批量转换功能。批量重命名很灵活，可以指定自增序号的模板，还可以使用查找替换，恐怕比很多专门的重命名工具还专业批量转换就更专业了，转换图片格式这是最基本的，在高级属性里还可以调整大小、旋转、裁切、水印……举例来说，调整大小的时候可以按像素、百分比调整，还可以按一条边（可以是长边、短边、高、宽）为基础来调整。功能太多，读者可以自行研究。FastStone 还有非常厉害的打印功能。随便选一张图，点击打印（或 Ctrl+P），会弹出打印设置框，在这里可以按顺序增加若干张其它图片，然后打印成 PDF，非常方便（如果只是输出到打印机，批量或单张并没多大差别）。顺带说明一下，这家公司还出品了一个叫 FastStone Capture 的截图工具，也是非常好用的，可惜从 v5.4 开始收费。不过基本的截图功能 FSIV 也提供哦。还有一点需要说明的是，FastStone 的官网国内不能打开，大家在各软件站下载时请注意安全，笔者推荐使用电脑管家之类的具有软件管理功能的安全软件下载。截图工具 Snipaste截图工具很多，甚至 Windows 都自带截图，哪怕是老版 Windows，也可以用 PrintScreen 截全屏，用 Alt+PrintScreen 截当前窗口。何况还有 QQ 截图、浏览器截图、输入法截图等。在众多的截图工具中，笔者偏爱 Snipaste，因为它使用简单，功能全面。官网已经介绍得非常全面，我也不会比官网描述得更好。总的来说，笔者喜欢它主要因为以下几个功能：标注：线条、三种箭头、矩形、椭圆、文本、马赛克，粗细可调，颜色可调，透明度可调……截图后可以直接生成贴图窗口，把图片呈现在桌面上（就像便笺那样），可缩放（Ctrl+滚动）可调透明度（Shift+滚动）有取色功能说起来语言不多，用起来是真的强大。Snipates 现在还提供收费的专业版，其中增值的功能一般来说也不怎么需要，不过笔者为了支持作者继续开发，毫不犹豫的购买了专业版。绘制流程图、序列图等Visio？太贵，用不起。笔者曾经也用WPS演示来绘制流程图，简单的还行，复杂点的真心累。后来发现了在线的 ProcessOn，不过现在也已经收费了，免费用户有绘图量的限制。当然，不嫌麻烦的话，可以画完导出后删除再新建。后来在使用 Markdown 的过程中，笔者发现了通过文本描述来绘制流程图的神工具。先来看看效果这是来自“作业部落（CMD Markdown）”的截图，作业部落是个免费的在线 Markdown 编辑器，可在线保存，也提供了客户端下载。除了流程图，它还支持绘制序列图的甘特图，语法参考如下：流程图语法参考序列图语法参考甘特图语法参考除了作业部落，笔者还经常使用有道云笔记的 Markdown 功能。有道云笔记也提供了通过文本描述来绘制流程图、序列图和甘特图的功能。有这些工具，画图方便多了。其它工具美工把设计图交给前端的时候，前端会不断的问，这里距离多少，那里颜色值是什么……真的累。所以美工交设计图的时候，通常会进行标注，这类工具，最有名的当然是马克鳗，基础功能免费可用。除此之外腾讯 CDC 还出品过一款 Darado绘制原型图的工具比较多，但免费好用的不多。墨刀是一个在线的原型图工具，不仅可以画原型图，还可以绘制页面流，免费版受限。ER 图绘制工具，没找到免费好用的。PowerDesigner 应该是首选，据说 MySQL Workbench 也能画，没试过。笔者使用的绘图工具并不算多，但是日常工作也够用了。如果您有什么好的工具，也请向笔者推荐哦！ ...