① web开发流程图 一般用什么软件
1. Codepen
Codepen应该是全世界最受欢迎的开发环境之一了。CSS技巧的作者Chris Coyier是Codepen的联合创始人之一，这也就是为什么这款app看起来那么豪华。除了视觉上的优秀效果，它可以生动地展现预览，当你修改了代码，就可以看到效果，使你能够更容易地找出变化。
Codepen用于CSS的预处理器包括SCSS、SASS，LESS和Stylus，用于JS的有CoffeeScript和LiveScript，用于HTML的包括Haml、Markdown、Slim和Jade。另外，它还包含了8个可用的内置的JS库。Codepen中合作和私人的“pens”需要付费使用。【前往Codepen】
2. JSFiddle
JSFiddle可以说是成就了开发环境的流行，它是第一个也是最出名的平台。JSFiddle有超过30个可以立即使用的JavaScript库，你还可以轻松的添加外部文件。在预处理方面，它有用于CSS的SCSS、用于JS的CoffeeScript以及用于HTML的简单Vanilla。
如果你在与其他开发者合作，我强烈建议你使用JSFiddle。在所有的开发环境中，JSFiddle的协作特性是同类型应用中最好的，而且区别于Codepen的是，它的这个特性是操作简单并且免费的。
但JSFiddle没有的是预览功能，你需要手动刷新页面。和其它开发平台相比，JSFiddle确实也比较慢。另外，JSFiddle还有一个不足就是它的执行键不是很灵敏，有时需要多点击几次才能够执行代码。【前往JSFiddle】
3. JS Bin
JS Bin是由JavaScript开发大师Remy Sharp创建的，他拥有一家专注于JavaScript和HTML5的web开发公司。JS Bin的JS预处理器包括CoffeeScript、TypeScript、Traceur、JSX以及可供使用的超过40个的JS库。你同样可以添加外部文件，但是必须在编辑器上手动操作。而用于CSS的预处理器，它提供了LESS。
JS Bin和以前开发平台的区别在于它允许你把文件下载到你的电脑上，这对于开发者，尤其是在离线状态下调试代码的程序员来说，是一个很不错的特点。你还可以创建私人的Bin空间，不过你需要对此付费。另外，JS Bin不支持协作功能。【前往JS Bin】
4. CSSDeck
CSSDeck已经存在一些年了，但它的影响力好像不是很大。不过，由于它的简洁性，它还是值得关注的。如果你不需要其它平台里那些复杂的功能，那CSSDeck就应该是你的选择。
CSSDeck的预处理器包括用于HTML的HAML、Markdown、Slim和Jade，用于CSS的LESS、Stylus、SASS和SCSS，以及用于JS的CoffeeScript。它还有几个可用的CSS和javascript库，对于没有的库，你只需要将其手动地添加到库的列表中就可以使用了。
CSSDeck虽然很简洁，但它有一个让我很吃惊的特性，就是它支持用户改变字体大小，这是一个简单却实用的功能。所以说，如果你在寻找有很多很炫的功能的开发平台，CSSDeck可能不适合你。它的简洁性让你更专注于最重要的事情，这也是它最大的特点。【前往CSSDeck】
5. Dabblet
当我还在使用十六进制颜色代码的时候，Dabblet的特性让我惊讶了，它的颜色预览居然显示在代码旁，这是我第一次见到这样的设置。虽然我不确定这是否是一个有用的特性，但是它的整洁性还是给我留下了很深的印象。
现在，Dabblet最棒的地方在于它允许用户以5个不同的视角进行预览，分别是CSS编辑器和效果，HTML编辑器和效果，CSS和HTML的编辑器和效果，JavaScript及运行结果，全部综合效果。这些功能在绝大部分的开发环境中都没有。
它也有不足，第一，Dabblet缺乏HTML和CSS的预处理器，这是令人困惑的。第二，它没有内置的JavaScript库，不过你可以通过手动插入JavaScript库来解决。第三，它的每个板块大小是固定的，无法作出调整，这和以前传统的调试平台是一样的。第四，它缺少一个用于演示其他用户作品的板块。【前往Dabblet】
6. Liveweave
Liveweave是一个拥有很多功能的开发平台，比如可以关闭的实时预览。你也可以为了保护视力，开启夜间模式，将所有界面都变暗。Liveweave提供了20多个JavaScript库，甚至还支持SVG。其内置的标尺使测量更加精确，更符合美学标准。
它还有一个吸引我眼球的地方，就是它的协作功能。如果你过去曾经使用过Teamviewer，你会发现它们是相似的。你需要做的事只是点击协作链接，你就可以分享来自于你到weave的链接了。
你甚至可以下载你的weave文件，并把它保存为单独的HTML文件或者保存为包含独立HTML、CSS和JS文件的zip压缩包。对了，Liveweave还有一个内置的Lorem Ipsum生成器。 【前往Liveweave】
结语
当然，每一个平台和工具都有它自己的特性，都会对你有所帮助
② 绘制Web工作流程图用SVG还是VML好
在WEB上使用二维图形编程的人员现在面临者一个两难的选择，是使用SVG，还是VML？二者的功能相似，可以满足大多数WEB二维图形应用的需求，但目前的情况是：VML只能在IE中使用，SVG被firefox，opera等浏览器的最新版本支持，并且是W3C制定的开放标准，但目前IE不内置支持SVG，只能通过ADOBE的SVG插件显示。国内有个多比矢量图控件是做web工作流程图的，他们做的就是兼容不同的浏览器，可以自动选择svg和vml。楼主可以网络下
③ 制作流程图的软件或工具有哪些
1、axure rp
Axure RP是美国Axure Software Solution公司旗舰产品，是一个专业的快速原型设计工具，让负责定义需求和规格、设计功能和界面的专家能够快速创建应用软件或Web网站的线框图、流程图、原型和规格说明文档。
作为专业的原型设计工具，它能快速、高效的创建原型，同时支持多人协作设计和版本控制管理。
2、Microsoft Office Visio
Office Visio 是office软件系列中的负责绘制流程图和示意图的软件，是一款便于IT和商务人员就复杂信息、系统和流程进行可视化处理、分析和交流的软件。
使用具有专业外观的 Office Visio 图表，可以促进对系统和流程的了解，深入了解复杂信息并利用这些知识做出更好的业务决策。
Microsoft Office Visio帮助您创建具有专业外观的图表，以便理解、记录和分析信息、数据、系统和过程。
3、亿图流程图制作软件
亿图流程图制作软件是一款类似Visio的流程图、网络图绘制软件，新颖小巧，功能强大，可以很方便的绘制各种专业的业务流程图，程序流程图，数据流程图，网络拓扑图等。
它在设计时采用全拖曳式操作，最大限度的简化用户的工作量，方便易用；提供各种图形模板库，方便专业人士的使用；提供强大的图文混排和所见即所得的图形打印；
另外为软件企业提供可以二次开发的图形控件，提高企业开发效率，节约开发成本，是一款实用的流程图软件和绘制流程图工具。
④ 应该如何制作web流程图
一、设计的任务：设计是一种审美活动，成功的设计作品一般都很艺术化。但艺术只是设计的手段，而并非设计的任务。设计的任务是要实现设计者的意图，而并非创造美。 网页设计的任务，是指设计者要表现的主题和要实现的功能。站点的性质不同，设计的任务也不同。从形式上，可以将站点分为以下三类。 第一类是资讯类站点，像新浪、网易、搜狐等门户网站。这类站点将为访问者提供大量的信息，而且访问量较大。因此需注意页面的分割、结构的合理、页面的优化、界面的亲和等问题。 第二类是资讯和形象相结合的网站，像一些较大的公司、国内的高校等。这类网站在设计上要求较高，既要保证资讯类网站的上述要求，同时又要突出企业、单位的形象。然而就现状上来看，这类网站有粗制滥造的嫌疑。 第三类则是形象类网站，比如一些中小型的公司或单位。这类网站一般较小，有的则有几页，需要实现的功能也较为简单，网页设计的主要任务是突出企业形象。这类网站对设计者的美工水平要求较高。 当然，这只是从整体上来看，具体情况还要具体分析。不同的站点还要区别对待。别忘了最重要的一点，那就是客户的要求，它也属于设计的任务。
⑤ Web开发需不需要UML，软件工程
Web技术的发展，使得管理系统的开发更方便、功能更强大，在此系统的开发过程中，Web技术起了一个骨架式的支持作用；与此同时组件技术的发展为系统的开放性、集成性提供了便利，有效合理地引入组件技术是当前Web系统开发与发展的一个方向；通过对系统的开发进行建模，形象直观的图形化表示，可以显示系统的流程与功能。选择有效的建模方法，充分利用Web技术与组件技术，提高软件的开发效率，提高的软件的可靠性和可维护性，是每个软件开发人员所关心的问题。
UML(Unified Modeling Language)是基于对象技术的标准建模语言，定义良好、易于表达、功能强大的特点使它在面向对象的分析与设计中更具优势。在基于Web技术和组件技术的系统建模中，它完善的组件建模思想和可视化建模的优势更利于系统开发人员理解程序流程和功能，进一步提高Web系统的开发效率以及Web组件的可重用性和可修复性。
本文将结合我们自主开发的活塞PDM系统中的项目审批流程的建模，介绍UML在基于WEB技术和组件技术的系统建模中的应用。
2、基于Web的应用系统结构
对于基于Web技术的应用系统，用户直接面对的是客户端浏览器，用户在使用系统时，请求之后的事务逻辑处理和数据的逻辑运算由服务器与数据库系统共同完成，对用户而言是完全透明的。运算后得到的结果再通过浏览器的方式返回给用户。这个过程可分成一些子步骤，每一个子步骤的完成可理解为通过一个单独的应用服务器来处理，这些应用服务器在最终得到用户所需的结论之前，相互之间还会进行一定的数据交流和传递。图1就是Web的应用结构简图。
随着Web应用技术的发展，对Web数据流程的解释上还会有相应的改进或补充。
3、Web应用系统的UML建模方法
页面、脚本、表单和框架是Web应用系统的关键部分，数据流程的模型化表示关键就是用UML对上述Web元素应用及其关系建模，下面对这几种元素的模型化表示作一个简要介绍。
(1)页面建模。用户在使用Web应用系统时，是通过页面进行系统的操作。在页面建模中可用两个类别模板《Client Page》和《Sever Page》分别表示客户端页面和服务器端页面。客户端页面的属性是页的作用域中定义的变量，方法是页面脚本中的函数；服务器页面的属性是页面脚本中的变量，方法是脚本中定义的函数。在使用页面信息传递时，还可能出现服务器页面的重定向，在UML建模中，用类别模板《redirect》来表示；对于客户端页面和服务器页面的构造关联用类别模板《bulid》表示，这种关联是一种单向关联，由服务器页面指向客户端页面，具体表示如图2所示。
在Web应用系统中，还会经常用到的就是超级链接，在UML建模中，用类别模板《link》表示超级链接，它的参数模拟为链接属性。
(2)表单建模。用户的要求一般通过表单与数据库交互。在UML建模中，表单用类别模板《form》表示，属性是表单中的域，表单没有方法。表单在处理请求时，要与Web页面交流数据，这个交流过程是用提交按钮submit来完成，为了在建模中表示这种关系，用类别模板《submit》表示。
(3)组件建模。在使用组件技术的Web应用系统建模中，对组件的建模是个重要环节，在UML基本的图形化建模元素中，设立了专门的组件图。组件在使用过程中，同样的分成了客户端组件(如Java Applet,ActiveX控件)和服务器端组件。在系统的UML模型化表示中，用类别模板《Client Component》表示客户端组件，用《Sever Component》表示服务器端组件。
(4)框架建模。框架通过定义类别模板元素《frameset》来实现，frameset指定并命名各个框架，每个框架容纳一个页面；框架的使用还涉及到目标target，建模时用《target》来表示。
4、UML在活塞PDM系统建模中的运用
活塞PDM系统是在传统PDM系统的基础上，引入了组件技术和Web技术，对数据流程的处理更趋于简易性和方便性。在对该系统的建模过程中，要体现整个系统前台与后台间数据交互的流程。在设计时，主要是考虑设计它的class diagram(类图)和component diagram(组件图),用这两类模型图来体现UML的用例驱动和系统组件结构的特性。由于在系统的开发中采用了模块化的设计方法，因此在构划模型图时，采用了先整体后局部的思路，首先考虑整个系统的案例图，再对子模块进行分析和设计，在每个子模块数据流的入口和出口设置模型图间数据交互的接口。下面以活塞PDM系统中项目审批流程子模块的建模为例说明UML在此系统建模中的应用。
4.1 项目审批流程
项目审批是项目管理流程的一部分，功能就是实现审批过程和数据传递的自动进行，取消了传统审批流程中大量纸质文件的使用。下面以活塞新产品开发的项目审批为例来说明UML对项目审批流程的建模方法。
活塞新产品开发的项目审批过程有7个环节组成，分别是项目申请、组织评审、制定实施方案、技术委员会及专家委员会评审、技术副总审核、总经理审核和董事会审核。通过这七个环节来决定一个项目实施的可行性或者合理性。
审批过程自动化的实现方法，是在Web技术和组件技术的基础上，对每一个环节设置了评审状态tag。当tag=1时，表明项目已通过该环节评审，可进入下步评审；当tag=0时，表明项目还未经过评审，或者未通过评审，需要返回去修改项目运行的可行性研究，等待再一次的评审。同时在每个环节进行评审时，还要考虑该项目是否已进入了下一级评审，如若项目已进行了下一级的评审，这时该环节的操作人员都无权再对该环节所填写的评审意见进行编辑。也就是在对每个环节进行维护时，还要考虑下一级的评审状态。
在建模之前，首先看一下项目审批流程图，如图3所示。
除了这七个审批环节，为了让用户及时了解交叉投入生产的项目审批或进展情况，提供了项目浏览功能，用户按照管理员所授予的权限，在权限范围内并且利用项目浏览子模块中提供的关键字段、项目评审状态或者进展状态进行分类检索。
在项目评审流程的每个环节，一般设置了两部分功能需求，即填写该环节评审的内容、编辑该环节评审的内容。
比如总经理评审环节，它的功能设置如图4所示。
为了实现网上审批的自动化，在整个流程的环节功能设置时，遵照了如下的规则要求：在每个环节的查看已填评审内容时，列出的项目都是正在等待进入该环节评审的项目，而不属于这种情形的项目在此环节中是显示不出来的；同样，对于在编辑此环节评审内容上，已经进行了下一级评审的项目也是不可能列出的，每个环节的负责人只可以对此环节以前的评审内容具有浏览功能，而不具备编辑功能。如果要查看整个项目的评审状况，在管理员授予项目浏览功能的权限下，通过项目浏览一项完成。
整个流程所包括的各个环节，在功能设置上是类似的，差异是评审环节在整个评审流程中所处的位置。在进行UML建模时采用了把这些环节分开的方法，先对每个环节建模，最后再把单个的环节模型图整合成一个完整流程的模型图。由于篇幅所限，下面以总经理评审的环节为例说明UML的建模方法。
4.2 总经理评审的类图(Class Diagram)
在项目审批流程中，设计了总经理审核环节的Class Diagram，如图（5）、图（6）、图(7)所示。图(6)和图(7)是图(5)的延续。该类图显示了总经理审核环节中各个页面之间的关系。为简化，在此类图中没有列出各个类的属性和方法。整个类图实现了查看已填写评审内容、填写总经理评审内容和编辑评审内容。
4.3 总经理评审的组件图(Component Diagram)
组件图是分析该环节所涉及的功能是如何实现的，这部分与具体的编码工作相关。总经理评审环节的模块组件图如图（8）所示。
4.4 由模型图到代码的转换
类图和组件图说明了在基于Web技术的信息交互流程，页面的超级链接和页间的重新导向在JSP代码设计中，由模型图就可以掌握它们之间交互的逻辑，这样使程序编写更富条理性和方便性。在实际工作中，可以设置为CRC卡，方便编程人员的使用。如若再比较详细地设计出对象图和顺序图，对于整个系统的类定义和方法设置，会提供更大的方便。
5、结束语
建模对系统的开发过程中起着很重要的作用，在系统的开发和维护中有必要建立系统的模型。UML是一种图示化的面向对象建模语言，它形象直观、应用广泛，并对Web技术和组件技术在系统开发中的建模方法有了比较合理有效的定义。在UML提供的各种模型图的基础上，还可以依照所有开发技术的特点对它的表示进行扩展，在本文的建模中就是用了UML的类别模块扩充机制，为某些模型元素添加新的语义，构造新的模型，来说明开发过程中的隐含特性。
通过利用UML建模，对基于Web的PDM系统中的项目审批流程进行了分析和设计，对整个流程的功能有了一个清晰的认识，利于开发人员对系统的开发与维护，同时可为系统的升级或者二次开发提供一个理论依据。
⑥ 流程图制作软件是什么
1、亿图图示
亿图图示是一款综合类办公绘图软件，拥有260+绘图类型，包括流程图、组织结构图、UML图、电路图、平面设置图等。从绘图类型数量上看，它在这7款流程图软件中居首位。
除了丰富的绘图类型，亿图图示在其他能力上也有不俗表现。比如多端运行，亿图图示同时兼容Windows、Mac、Linux，而且支持Web网页版，加上强大的云文档、社交分享功能，能够很好解决我们的办公协同问题。值得一提的是，亿图图示的社交分享功能还支持文件直接生成二维码，扫码即可分享。
⑦ 我是做web前端的，要实写一个流程图，不会写，没思路，求指教
如果这个流程图是固定的，也就是说是不会随着数据，改变位置的话，那就做五行七列的格子，然后往格子里加东西应该就可以了。像那个蓝色四个角，你可以在这个包裹电话的小盒子里，定位四个小正方形，定位到四个角上。
例外那个每个图标样式都是固定的上图下文，上图带四个小正方形的交互，并且大部分带箭头，可以写公共样式。像那些线，如果嫌麻烦，可以用图片代替，定位上去。
⑧ 流程图绘制软件
我在HotEssay网站里看到有九个可以画流程图的软件介绍，分别是七个国外的和两个国内的，由于篇幅的原因这里只能给你罗列了7个国外的流程图制作软件，你可以看一下，要想查看全文的话可以去HotEssay官网里去看1.LucidChartLucidChart是一个在线流程图绘制和协作应用软件，大家通过它可以方便快速的实现流程图表的绘制，同时还可以实现与他人进行实时的流程图绘制和修改功能，这对于正在完成GroupAssignment的小伙伴们来说简直是福音。如果你已经在Visio中会制好了图想要导入LucidChart的话非常方便，直接导入就可以啦。2.CacooCacoo也是一个在线的作图工具，用它你可以做出很多类型的图表，同时也支持多人协作哦。Cacoo还推出了一个模板商店，大家可以自己上传一些模板到商店里，而且大多数模板也是免费的。Cacoo虽然宣称是免费使用，但是免费用户提供的功能并不多，比如免费用户上传图片的大小不能超过512K，如果想使用一些稍微高级的功能，用户每个月就需要支付4.95美元。3.GliffyGliffy也是一个基于Web的在线作图应用，它可以帮助用户创建流程图、组织结构图、平面图、业务流程、网络图、技术图、线框图等等。Gliffy的基础版本免费。不过其在线制作的思维导图是公开的，高级版本有设置隐私权的权力。用户可以将其可以嵌入博客，公室应用软件中，有很好的兼容性。通过Gliffy编辑的流程图图片可输出SVG、GPEG格式。4.CreatelyCreately也是一款优秀的绘制产品图形的在线工具，绘制的图形更为丰富，支持UML图、Mindmap图、SWOT图、产品原型图、流程图等等数十种类型。Creately的提供的图形对象也很多，从简单的流程图到各种吸引人的剪贴画。而且多人协作也很方便，用户可以使用侧边栏来邀请其他人在线协作，历史版本的功能也可以使用。5.LovelyChartsLovelycharts提供功能强大的在线图表制作，Lovelycharts提供便捷的制作过程，主要有两大功能：Drag/Drop和Create/Connect。Drag/Drop提供用户从各大系列备用元素库中选用图标，并在区域内拖拉至合适位置；Create/Connect提供用户用箭头、线条等组建个元素间的关系，完成图表。6.MockingbirdMockingbird是一款基于Cappuccino开源框架下的产品原型设计工具，能够模拟桌面软件给予设计人员更快速的上手和实践。Mockingbird能够为用户提供了完全基于浏览器窗口的产品原型设计服务，由于Mockingbird采用了Cappuccino开源框架，能够较为逼真的模拟Axure这类桌面软件，给用户极大的亲切感。Mockingbird内置了常用的各种Web控件，包括Text、Link、Button、Image、List,Box等等，鼠标拖拽便可添加至画布中，Mockingbird也支持协作功能。7.DrawAnywhereDrawAnywhere也是一款在线流程图制作工具，它采用的是Flex技术架构，直观的类Windows可视化操作大大简化了操作的过程，用户可以从任意角度修改节点的形状并完善相关数据等等。
⑨ Webstorm 有哪些画流程图的插件
插图（画）是运用图案表现的形象，本着审美与实用相统一的原则，尽量使线条，形态清晰明快，制作方便。插图是世界都能通用的语言，其设计在商业应用上通常分为人物、动物、商品形象。
商品形象
商品形象是动物拟人化在商品领域中的扩展，经过拟人化的商品给人以亲切感。个性化的造型，有耳目一新的感觉，从而加深人们对商品的直接印象。
分类
以商品拟人化的构思来说，大致分为两类：
第一类为完全拟人化，即夸张商品，运用商品本身特征和造型结构作拟人化的表现。
第二类为半拟人化，即在商品上另加上与商品无关的手、足、头等作为拟人化的特征元素。
以上两种拟人化塑造手法，使商品富有人情味和个性化。通过动画形式，强调商品特征，其动作、言语与商品直接联系起来，宣传效果较为明显。
插图画家经常为图形设计师绘制插图或直接为杂志、报纸等媒体配画。他们一般是职业插图画家或自由艺术家，像摄影师一样具有各自的表现题材和绘画风格。对新形式、新工具的职业敏感和渴望，使他们中的很多人开始采用电脑图形设计工具创作插图。电脑图形软件功能使他们的创作才能得到了更大的发挥，无论简洁还是繁复绵密，无论传统媒介效果，如油画、水彩、版画风格还是数字图形无穷无尽的新变化、新趣味，都可以更方便更快捷地完成。数字摄影是摄影的最新发展。摄影师用数字照相机拍摄对象或通过扫描仪将传统的正片扫描进电脑，然后在电脑屏幕上调整、组合、创作新的视觉形象，最后通过胶片记录仪输出正片或负片。这种新的摄影技术完全改变了摄影的光学成像的创作概念，而以数字图形处理为核心，又称“不用暗房的摄影”。它模糊了摄影师、插图画家及图形设计师之间的界限，现今只要有才能，完全可以在同一台电脑上完成这三种工作。