Flowchart.js is a great tool for creating quick, simple flowcharts in a-the-keeps you out of a WYSIWYG, and keeps you R productive. No more drawing lines, no more determining how to draw a shape, no more deciding relative size and distance. Flowchart.js makes it easy to prototype new concepts and confirm product flows. Built in JavaScript, the library was complete with HTML rendering and a standard grammar and syntax for creating your flows .
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title>Flowchart.js Example Project</title></Head><Body><DivID= "Chart"></Div><Scripttype= "Text/javascript"src= "//cdnjs.cloudflare.com/ajax/libs/raphael/2.2.7/raphael.min.js"></Script><Scripttype= "Text/javascript"src= "//cdnjs.cloudflare.com/ajax/libs/flowchart/1.6.6/flowchart.min.js"></Script><Scripttype= "Text/javascript"src= "//cdnjs.cloudflare.com/ajax/libs/axios/0.17.1/axios.min.js"></Script><Scripttype= "Text/javascript"src= "Script.js"></Script></Body>
Axios.get ('/data/additional-sample.txt '). Then ({data}) = { = flowchart.parse (data); Fc.drawsvg (' chart '); });Flowchart 1:
start=>startend=endoperation=operation:operation examplesubroutine= subroutine:subroutine examplecondition=>condition:true or False? inputoutput=inputoutput:input output examplestart->operation->conditioncondition (yes) ->subroutine->endcondition (NO)->inputoutput->end
Flowchart 2:
S=>Start:user wouldlike to use the Applicatione =End:user is authenticatede2= End:user is a authenticatedo1 in with E- mail and PASSWORDC1=>condition:email is valid? C2=>condition:password is valid? io1=inputoutput:username or password is invalid, notify users->o1->c1c1 (yes)- >c2c1 (No)->io1->e2c2 (yes),ec2 (NO)->io1->e2
St=>start:i Wan 't to go off with 4 friendscond1=>condition:vegans?cond2=>condition:vegetarians?cond3= >condition:kosher?e1=>end:veggie sushie2=>end:pizzae3=>end:oysterse4=>end:sarge' s Deli (Open Hours) Io1= Inputoutput:argue about bestoptionstcond1cond1 (yes) E1cond1 (No),cond2cond2 (yes),e2cond2 (No),cond3cond3 (yes)->io1- >e4cond3 (NO)->e3
[Javascirpt] developer-friendly Flow Charts with Flowchart.js
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
