本文目录一览：

• 1、web开发流程图 一般用什么软件
• 2、如何用JAVASCRIPT在页面上画流程图
• 3、webpack执行机制流程是怎么样的
• 4、js html 流程图 关系图
• 5、html+js画流程图,想显示如下流程图，不做拖拽保存功能，仅仅显示就可以。哪位能够给点思路或者例子？感谢

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】

结语

当然，每一个平台和工具都有它自己的特性，都会对你有所帮助

如何用JAVASCRIPT在页面上画流程图

只能用canvas了，

百-度 青春华航，这是我的博客，希望多多交流。

webpack执行机制流程是怎么样的

几乎所有业务的开发构建都会用到 webpack 。的确，作为模块加载和打包神器，只需配置几个文件，加载各种 loader 就可以享受无痛流程化开发。但对于 webpack 这样一个复杂度较高的插件集合，它的整体流程及思想对我们来说还是很透明的。那么接下来我会带你了解 webpack 这样一个构建黑盒，首先来谈谈它的流程。

准备工作

1. webstorm 中配置 webpack-webstorm-debugger-script

在开始了解之前，必须要能对 webpack 整个流程进行 debug ，配置过程比较简单。

先将 webpack-webstorm-debugger-script 中的软件外包企业公司 置于 webpack.config.js 的同一目录下，搭建好你的脚手架后就可以直接 Debug 这个 webstorm-debugger.js 文件了。

2. webpack.config.js 配置

估计大家对 webpack.config.js 的配置也尝试过不少次了，这里就大致对这个配置文件进行个分析。

var path = require('path');

var node_modules = path.resolve(__dirname, 'node_modules');

var pathToReact = path.resolve(node_modules, 'react/dist/react.min.js');

module.exports = {

// 入口文件，是模块构建的起点，同时每一个入口文件对应最后生成的一个 chunk。

entry: {

bundle: [

'webpack/hot/dev-server',

'webpack-dev-server/client?',

path.resolve(__dirname, 'app/app.js')

],

},

// 文件路径指向(可加快打包过程)。

resolve: {

alias: {

'react': pathToReact

}

},

// 生成文件，是模块构建的终点，包括输出文件与输出路径。

output: {

path: path.resolve(__dirname, 'build'),

filename: '[name].js',

},

// 这里配置了处理各模块的 loader ，包括 css 预处理 loader ，es6 编译 loader，图片处理 loader。

module: {

loaders: [

{

test: /\.js$/,

loader: 'babel',

query: {

presets: ['es2015', 'react']

}

}

],

noParse: [pathToReact]

},

// webpack 各插件对象，在 webpack 的事件流中执行对应的方法。

plugins: [

new webpack.HotModuleReplacementPlugin();

]

};

除此之外再大致介绍下 webpack 的一些核心概念:

loader : 能转换各类资源，并处理成对应模块的加载器。loader 间可以串行使用。

chunk : code splitting后的产物，也就是按需加载的分块，装载了不同的module。

对于module和chunk的关系可以参照webpack官方的这张图:

plugin : webpack 的插件实体，这里以 UglifyJsPlugin 为例。

function UglifyJsPlugin(options) {

this.options = options;

}

module.exports = UglifyJsPlugin;

UglifyJsPlugin.prototype.apply = function(compiler) {

compiler.plugin("compilation", function(compilation) {

compilation.plugin("build-module", function(module) {

});

compilation.plugin("optimize-chunk-assets", function(chunks, callback) {

// Uglify 逻辑

});

compilation.plugin("normal-module-loader", function(context) {

});

});

};

在 webpack 中你经常可以看到 compilation.plugin('xxx', callback) ，你可以把它当作是一个事件的绑定，这些事件在打包时由 webpack 来触发。

3. 流程总览

在具体流程学习前，可以先通过这幅 webpack整体流程图 了解一下大致流程(建议保存下来查看)。

shell 与 config 解析

每次在命令行输入 webpack 后，操作系统都会去调用 ./node_modules/.bin/webpack 这个 shell 脚本。这个脚本会去调用./node_modules/webpack/bin/webpack.js 并追加输入的参数，如 -p , -w 。(图中 webpack.js 是 webpack 的启动文件，而 $@ 是后缀参数)

在 webpack.js 这个文件中 webpack 通过 optimist 将用户配置的 webpack.config.js 和 shell 脚本传过来的参数整合成 options 对象传到了下一个流程的控制对象中。

1. optimist

和 commander 一样，optimist 实现了 node 命令行的解析，其 API 调用非常方便。

var optimist = require("optimist");

optimist

.boolean("json").alias("json", "j").describe("json")

.boolean("colors").alias("colors", "c").describe("colors")

.boolean("watch").alias("watch", "w").describe("watch")

...

获取到后缀参数后，optimist 分析参数并以键值对的形式把参数对象保存在 optimist.argv 中，来看看 argv 究竟有什么？

// webpack --hot -w

{

hot: true,

profile: false,

watch: true,

...

}

2. config 合并与插件加载

在加载插件之前，webpack 将 webpack.config.js 中的各个配置项拷贝到 options 对象中，并加载用户配置在 webpack.config.js 的 plugins 。接着 optimist.argv 会被传入到 ./node_modules/webpack/bin/convert-argv.js 中，通过判断 argv 中参数的值决定是否去加载对应插件。(至于 webpack 插件运行机制，在之后的运行机制篇会提到)

ifBooleanArg("hot", function() {

ensureArray(options, "plugins");

var HotModuleReplacementPlugin = require("../lib/HotModuleReplacementPlugin");

options.plugins.push(new HotModuleReplacementPlugin());

});

...

return options;

options 作为最后返回结果，包含了之后构建阶段所需的重要信息。

{

entry: {},//入口配置

output: {}, //输出配置

plugins: [], //插件集合(配置文件 + shell指令)

module: { loaders: [ [Object] ] }, //模块配置

context: //工程路径

...

}

这和 webpack.config.js 的配置非常相似，只是多了一些经 shell 传入的插件对象。插件对象一初始化完毕， options 也就传入到了下个流程中。

var webpack = require("../lib/webpack.js");

var compiler = webpack(options);

编译与构建流程

在加载配置文件和 shell 后缀参数申明的插件，并传入构建信息 options 对象后，开始整个 webpack 打包最漫长的一步。而这个时候，真正的 webpack 对象才刚被初始化，具体的初始化逻辑在 lib/webpack.js 中，如下:

function webpack(options) {

var compiler = new Compiler();

...// 检查options,若watch字段为true,则开启watch线程

return compiler;

}

...

webpack 的实际入口是 Compiler 中的 run 方法，run 一旦执行后，就开始了编译和构建流程 ，其中有几个比较关键的 webpack 事件节点。

compile 开始编译

make 从入口点分析模块及其依赖的模块，创建这些模块对象

build-module 构建模块

after-compile 完成构建

seal 封装构建结果

emit 把各个chunk输出到结果文件

after-emit 完成输出

1. 核心对象 Compilation

compiler.run 后首先会触发 compile ，这一步会构建出 Compilation 对象:

compilation类图

这个对象有两个作用，一是负责组织整个打包过程，包含了每个构建环节及输出环节所对应的方法，可以从图中看到比较关键的步骤，如 addEntry() , _addModuleChain() , buildModule() , seal() , createChunkAssets() (在每一个节点都会触发 webpack 事件去调用各插件)。二是该对象内部存放着所有 module ，chunk，生成的 asset 以及用来生成最后打包文件的 template 的信息。

2. 编译与构建主流程

在创建 module 之前，Compiler 会触发 make，并调用 Compilation.addEntry 方法，通过 options 对象的 entry 字段找到我们的入口js文件。之后，在 addEntry 中调用私有方法 _addModuleChain ，这个方法主要做了两件事情。一是根据模块的类型获取对应的模块工厂并创建模块，二是构建模块。

而构建模块作为最耗时的一步，又可细化为三步:

调用各 loader 处理模块之间的依赖

webpack 提供的一个很大的便利就是能将所有资源都整合成模块，不仅仅是 js 文件。所以需要一些 loader ，比如 url-loader ，jsx-loader ， css-loader 等等来让我们可以直接在源文件中引用各类资源。webpack 调用 doBuild() ，对每一个 require() 用对应的 loader 进行加工，最后生成一个 js module。

Compilation.prototype._addModuleChain = function process(context, dependency, onModule, callback) {

var start = this.profile +new Date();

...

// 根据模块的类型获取对应的模块工厂并创建模块

var moduleFactory = this.dependencyFactories.get(dependency.constructor);

...

moduleFactory.create(context, dependency, function(err, module) {

var result = this.addModule(module);

...

this.buildModule(module, function(err) {

...

// 构建模块，添加依赖模块

}.bind(this));

}.bind(this));

};

调用 acorn 解析经 loader 处理后的源文件生成抽象语法树 AST

Parser.prototype.parse = function parse(source, initialState) {

var ast;

if(!ast) {

// acorn以es6的语法进行解析

ast = acorn.parse(source, {

ranges: true,

locations: true,

ecmaVersion: 6,

sourceType: "module"

});

}

...

};

遍历 AST，构建该模块所依赖的模块

对于当前模块，或许存在着多个依赖模块。当前模块会开辟一个依赖模块的数组，在遍历 AST 时，将 require() 中的模块通过addDependency() 添加到数组中。当前模块构建完成后，webpack 调用 processModuleDependencies 开始递归处理依赖的 module，接着就会重复之前的构建步骤。

Compilation.prototype.addModuleDependencies = function(module, dependencies, bail, cacheGroup, recursive, callback) {

// 根据依赖数组(dependencies)创建依赖模块对象

var factories = [];

for(var i = 0; i dependencies.length; i++) {

var factory = _this.dependencyFactories.get(dependencies[i][0].constructor);

factories[i] = [factory, dependencies[i]];

}

...

// 与当前模块构建步骤相同

}

3. 构建细节

module 是 webpack 构建的核心实体，也是所有 module的 父类，它有几种不同子类：NormalModule , MultiModule ,ContextModule , DelegatedModule 等。但这些核心实体都是在构建中都会去调用对应方法，也就是 build() 。来看看其中具体做了什么:

// 初始化module信息，如context,id,chunks,dependencies等。

NormalModule.prototype.build = function build(options, compilation, resolver, fs, callback) {

this.buildTimestamp = new Date().getTime(); // 构建计时

this.built = true;

return this.doBuild(options, compilation, resolver, fs, function(err) {

// 指定模块引用，不经acorn解析

if(options.module options.module.noParse) {

if(Array.isArray(options.module.noParse)) {

if(options.module.noParse.some(function(regExp) {

return typeof regExp === "string" ?

this.request.indexOf(regExp) === 0 :

regExp.test(this.request);

}, this)) return callback();

} else if(typeof options.module.noParse === "string" ?

this.request.indexOf(options.module.noParse) === 0 :

options.module.noParse.test(this.request)) {

return callback();

}

}

// 由acorn解析生成ast

try {

this.parser.parse(this._source.source(), {

current: this,

module: this,

compilation: compilation,

options: options

});

} catch(e) {

var source = this._source.source();

this._source = null;

return callback(new ModuleParseError(this, source, e));

}

return callback();

}.bind(this));

};

对于每一个 module ，它都会有这样一个构建方法。当然，它还包括了从构建到输出的一系列的有关 module 生命周期的函数

js html 流程图 关系图

没有例子，不太明白你想要什么。。。。从图看职能是ps出来的切到网站上

不过做图表的特效倒是有，和你给的不太一样

你看看这个是不是你想要的效果

下面是合集地址

html+js画流程图,想显示如下流程图，不做拖拽保存功能，仅仅显示就可以。哪位能够给点思路或者例子？感谢

圆形可以用div或span，然后用CSS样式中的border-radius，箭头可以用图片，差不多的箭头旋转后就可以达到效果