流程图 - markdown

最新推荐文章于 2020-11-23 06:40:01 发布
最新推荐文章于 2020-11-23 06:40:01 发布
阅读量353 收藏
点赞数
分类专栏： js html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zjl199303/article/details/75007392
版权
js 同时被 2 个专栏收录
67 篇文章 0 订阅
订阅专栏
html5
6 篇文章 0 订阅
订阅专栏
<!DOCTYPE html >
< html lang= "en" >
< head >
< meta charset= "utf-8" >
< title > flowchart.js · Playground </ title >
< style type= "text/css" >
     . end-element { background-color : #333 ; color : #eee ; }
</ style >
< script src= " http://flowchart.js.org/flowchart-latest.js " ></ script >
<!-- <script src="../release/flowchart.min.js"></script> -->
< script >

     window . onload = function () {
          var btn = document . getElementById ( "run" ),
               cd1 = document . getElementById ( "code1" ), cd2 = document . getElementById ( "code2" ),
               chart ;

          ( btn .onclick = function () {
               var code = cd1 . value + cd2 . value ;
               if ( chart ) { chart . clean (); }
               chart = flowchart. parse ( code );
               chart .drawSVG( 'canvas' , {
                    // 'x': 30,
                    // 'y': 50,
                    'line-width' : 2 ,
                    'maxWidth' : 3 , //ensures the flowcharts fits within a certian width
                    'line-length' : 50 ,
                    'text-margin' : 10 ,
                    'font-size' : 14 ,
                    'font' : 'normal' ,
                    'font-family' : ' 微软雅黑 ' ,
                    'font-weight' : 'normal' ,
                    'font-color' : 'black' ,
                    'line-color' : 'black' ,
                    'element-color' : 'black' ,
                    'fill' : 'white' ,
                    // 'yes-text': 'yes',
                    // 'no-text': 'no',
                    'arrow-end' : 'block' ,
                    'scale' : 1 ,
                    'symbols' : {
                         'start' : {
                              'font-color' : 'red' ,
                              'element-color' : 'green' ,
                              'fill' : 'yellow'
                           },
                         'end' : {
                              'class' : 'end-element'
                         }
                    },
                    'flowstate' : {
                         'past' : { 'fill' : '#CCCCCC' , 'font-size' : 12 },
                         'current' : { 'fill' : 'yellow' , 'font-color' : 'red' , 'font-weight' : 'bold' },
                         'future' : { 'fill' : '#FFFF99' },
                         'request' : { 'fill' : 'blue' },
                         'invalid' : { 'fill' : '#444444' },
                         'approved' : { 'fill' : '#58C4A3' , 'font-size' : 12 , 'yes-text' : 'APPROVED' , 'no-text' : 'n/a' },
                         'rejected' : { 'fill' : '#C45879' , 'font-size' : 12 , 'yes-text' : 'n/a' , 'no-text' : 'REJECTED' }
                    }
               });

               $ ( '[id^=sub1]' ). click ( function (){
                    alert ( 'info here' );
               });
          })();

     };
</ script >
</ head >
< body >
< div >
< textarea id= "code1" style= " display : none ; width : 100 % ; " rows= "11" >
     start=>start: Start|past:> http://www.baidu.com[blank ]
     end=>end: End:> http://www.google.com
     op1=>operation: My Operation|past
     op2=>operation: Stuff|current
     sub1=>subroutine: My Subroutine|invalid
     cond=>condition: Yes or No?|approved:> http://www.google.com
     c2=>condition: Good idea|rejected
     io=>inputoutput: catch something...|request
</ textarea >
< textarea id= "code2" style= " display : none ; width : 100 % ; " rows= "11" >
     start->op1(right)->cond
     cond(yes, right)->c2
     cond(no)->sub1(left)->op1
     c2(yes)->io->end
     c2(no)->op2->end
</ textarea >
</ div >
< div >< button id= "run" type= "button" > Run </ button ></ div >
< div id= "canvas" ></ div >
</ body >
</html>



羽下佳人
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
将python代码转换为flowchart代码
qq_45423811的博客
05-15 682
将python代码转换为flowchart代码，无法输出flowchart代码（已解决）
流程图flow-chart 教程
missasd1的博客
01-24 2万+
一、 流程图的定义       流程图：                     一种显示 不同 流程 组合为一个过程 的图表。      流程图的组成：                               （1）带有箭头的有向连线                                  显示 流程的方向
flawchart.js笔记及语法
qssn的博客
03-18 1469
flawchart.js语法跟markdown流程图的语法很像。我也是查看网上资料的，参考链接在这：http://blog.csdn.net/aizhaoyu/article/details/44350821#comments//定义元素 st=>start: 开始|past:>http://www.google.com[blank] e=>end: 结束:>http://www.google.co
CodeVisual2FlowChartV5.3汉化破解版
12-07
这是一个代码维护与管理软件，它能够快速的分析你的源代码，并在流程图窗口中显示出目前代码的图示。该软件具有一个代码编辑器和一个流程图窗口。流程图的引擎很快，在你查看源代码的时候流程图就能够一点一点地显示出来了。你还可以输出流程图。该软件支持所有主要的编程语言，比如说VC、C、C++、Java、JavaScript、VB、BASIC、ASP、vbscript、Delphi、Pascal、PHP、Powerbuilder、Perl等! PS： 1、个人汉化，不足之处请见谅。 2、欢迎提汉化建议和意见。Email至pedoc@qq.com。
Flowchart to Code终于完成！
指尖上的探戈!
11-11 4481
可以创建流程图，并且生成代码， 算是AutoFlowchart的逆向版本！ www.ezprog.com中有下载
Python-markdown图片实用工具
08-10
"markdown-img-upload-master"这个文件名表明它是这个工具的主目录，可能包含了源代码、配置文件和其他相关资源。一般情况下，这样的项目结构会包含以下部分： 1. **源代码**：通常在`src`或`python`目录下，包含...
typora-Markdown
05-21
3. **流程图和序列图**：通过Mermaid语法，可以创建复杂的流程图和序列图，这对于描绘软件设计或工作流程非常有用。 4. **TOC（目录）**：通过插入`[TOC]`，Typora会自动生成文章的目录。 在了解这些基础知识后，...
vim-markdown-composer：一个用于Vim和Neovim的异步markdown预览插件
02-04
此外，由于其基于 Markdown-it 库，它也支持许多Markdown扩展语法，如表格、流程图、Mermaid 图表等。 ### 9. 故障排查与更新 如果遇到问题，可以检查 Vim/Neovim 的版本，确保满足插件的要求，并查看插件的官方...
typora-Markdown 编辑器 for Windows
02-20
3. **丰富的 Markdown 支持**：除了基本的 Markdown 语法外，Typora 还支持表格、代码块、数学公式、流程图、图表、嵌入多媒体等内容的插入，满足各种复杂的文档需求。 4. **快捷键支持**：为了提高效率，Typora ...
前端开源库-medium-editor-markdown
08-29
在提供的压缩包文件"medium-editor-markdown-master"中，通常会包含以下内容： 1. **源代码文件**：JavaScript和CSS文件，这是库的核心部分，包含了实现Markdown支持的所有逻辑和样式。 2. **示例**：可能包括演示...
flowchart.js
01-14
flowchart 流程显示工具类，基于javascript
流程图（Flowchart）
Expressing Youself Using Code
12-11 9919
简介到底如何画流程图呢？用PowerPoint么？Viso？好像都很难满足自己的需求。本文介绍一种比较“专业”的流程图生成方式— 使用dot语言来制作流程图。准备工作首先请确保你已经安装了Graphviz，如果没有安装请移步 http://www.graphviz.org/Download_windows.php注意到，Graphviz支持windows和linux，所以不用担心平台的问题。Grap
chrome svg 没眼色_将JavaScript代码转换为漂亮的SVG流程图——js2flowchart
weixin_39724266的博客
11-23 168
引言js2flowchart 是一个可视化库，可将任何JavaScript代码转换为漂亮的SVG流程图。你可以轻松地利用它学习其他代码、设计你的代码、重构代码、解释代码。这样一个强大的神器，真的值得你拥有，看下面截图就知道了，有没有很强大。Githubhttps://github.com/Bogdan-Lyashenko/js-code-to-svg-flowchart安装使用安装yarn add...
【Makedown Flow】使用 Flowchart.js 实现文本绘制简单 SVG 流程图表
描绘自己的王国……
01-30 6150
【Makedown Flow】使用 Flowchart.js 实现文本绘制简单 SVG 流程图表 SVG（Scalable Vector Graphics，可缩放矢量图形） 可缩放矢量图形（英语：Scalable Vector Graphics，SVG）是一种基于可扩展标记语言（XML），用于描述二维矢量图形的图形格式。SVG 由 W3C 制定，是一个开放标准。 SVG 主要支持以下几种显示对象:...
流程图(flowchart)语法
fevershen的专栏
07-20 1万+
转自：https://blog.csdn.net/ethmery/article/details/50670294 概述 流程图的语法大致分为两部分 - 定义元素 - 连接元素 语法 ```flow tag=&amp;gt;type: content:&amp;gt;url ... ... tag1(...)-&amp;gt;tag2(...)-&amp;gt;tag3(...) ``` 定义元素 t...
Flowchart.js首页、文档和下载 - 流程图插件 - 开源中国社区
01-26 448
Flowchart.js首页、文档和下载 - 流程图插件 - 开源中国社区 Flowchart.js首页、文档和下载 - 流程图插件 - 开源中国社区 poste...
Markdown 中的flow语法 flowchart.js 的基础教程
热门推荐
学习笔记
10-26 2万+
Markdown 中的Flow flowchart.js 的基础教程 JS Markdown 编辑器 https://stackedit.io/ 百度了下，看到网上关于 flow 的教程很少好像。写个简短的教程，我也是在使用中学习的。 CSDN中使用 Markdown 编辑器的前提是你打开了 markdown 编辑器 个人非常喜欢Markdown编辑器来写技术博客，...
flowchar.js使用指南
知行合一 止于至善
03-22 1万+
flowchar.js是一个javascript库，可以签到很多应用中直接使用，所以在很多类型的平台都是直接支持的，比如CSDN的markdown语法也是支持flowchart.js的，这篇文章的flowchart.js示例也都是使用mermaid方式直接指定并进行显示的。这样，用户就可以直接已DSL的方式非常容易地进行流程图的绘制了。
juypter markdown 画流程图
最新发布
09-04
使用Jupyter Markdown画流程图需要借助于一些扩展库或者工具。下面介绍一种常用的方法： 1. 首先，你需要安装jupyter_contrib_nbextensions这个库。打开终端或者命令提示符，输入以下命令安装库： ``` pip ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值