adrai / flowchart.js Goto Github PK
View Code? Open in Web Editor NEWDraws simple SVG flow chart diagrams from textual representation of the diagram
Home Page: http://flowchart.js.org/
License: MIT License
Draws simple SVG flow chart diagrams from textual representation of the diagram
Home Page: http://flowchart.js.org/
License: MIT License
For example, after start, 2 operations run in parallel and then re-join to a 3rd operation
First: congrats on this project!
Raphael is quite long and not intuitive. A better choice would be SVG.js
http://documentup.com/wout/svg.js
I also made an adapter for Raphael->SVG.js for this project and the output is encouraging - not perfect
changes:
<script src="raphaela.js"></script>
<script src="svg.js"></script>
<script src="flowchart.js"></script
and raphaela.js (Raphael adaptor)
var Raphael = function(container, options){
this.paper = SVG(container)
this.registerFont = function(font){
//
return;
}
}
Raphael.prototype.text = function(x, y, text){
console.log(x,y)
var text= this.paper.text(text)
//text.move(x,-text.height)
text.getBBox= function(){
return this.tbox()
}
return text
}
Raphael.prototype.rect = function(x, y, width, height, round){
var rect = this.paper.rect(width, height)//.move(x,y-10)
if (round) rect.radius(round)
rect.insertBefore = function(obj){
this.parent().add(obj)
this.back()
}
rect.getBBox= function(){
return this.tbox()
}
return rect
}
Raphael.prototype.set = function(){
var gr = this.paper.group()
gr.getBBox= function(){
var box = this.tbox()
return box
}
gr.push = function(obj){
this.add(obj)
}
gr.transforma =function(trans){
trans = trans.substring(1)
var coords = trans.split(",")
this.move(parseInt(coords[0]),parseInt(coords[1]))
}
return gr
}
Raphael.prototype.path = function(path,pathValues){
console.log(path)
console.log(pathValues)
for (ndx in pathValues){
var str = "{"+ndx+"}"
path = path.replace(str,pathValues[ndx])
}
console.log(path)
var rect = this.paper.path(path).fill("none")//.move(0,-10)
rect.insertBefore = function(obj){
this.parent().add(obj)
this.backward()
}
rect.getBBox= function(){
return this.tbox()
}
return rect
}
Raphael.prototype.setSize = function(width, height){
this.paper.size(width,height)
}
Raphael.prototype.setViewBox = function(x, y, w, h, fit){
this.paper.viewbox(x, y, w, h) // , fit
}
I would have attached the output, but is too long. please pm me if you are unable to see it from these instructions.
One more thing: "transform" has to be written as "transforma" in flowchart.js because it interferes with SVG.js and has to be treated by raphaela.
Is it possible to let a line jump over an other line?
Hi,
I've received an answer regarding that issue.
I don't want to dive into the code for nothing, so is it possible to easily ,modify it so it will support multiple exists from a node.
I'm absolutely loving this library, and it's the only thing that's keeping me from using it.
Many Thanks!
hello , when i run the example,show the error 'Uncaught TypeError: Cannot set property 'next' of undefined'.i couldn't find the reason.
Could be my fault, but if i use:
var diagram = flowchart.parse('st=>start: start:>\n' +
'e1=>end: end:>\n' +
'e2=>end: end:>\n' +
'cond1=>condition: A = 1:>\n' +
'cond2=>condition: A = 2:>\n' +
'cond3=>condition: B = 1:>\n' +
'cond4=>condition: B = 2:>\n' +
'io1=>inputoutput: result 1\n' +
'io2=>inputoutput: result 2\n' +
'' +
'st->cond1\n' +
'cond1(yes, bottom)->cond3\n' +
'cond1(no, right)->cond2\n' +
'cond2(yes, bottom)->cond4\n' +
'cond3(yes, bottom)->io1->e1\n' +
'cond3(no, right)->cond4\n' +
'cond4(yes, bottom)->io2->e2\n');
diagram.drawSVG('diagram');
I tried line-length to increase space, but it didn't work. Thanks!
In the configuration json can there be a parameter "class" that would be applied to the SVG elements generated. This could allow further styling (I'm mainly thinking about background images - which CSS should be able to handle). Where would that code get added?
hello ,
i m searching for some js which draw flow chart , i found this one is best representation .
i download flowchart_master from here but .
even demo.html is not working .
i m tired i can't figure it out.
pl give me workable demo source .
or pl tell me what should i do please
Is it possible to resolve these overlapping lines... the last set assign referal should goto save activation_id but I'm seeing overlapping lines which is confusing...
https://www.dropbox.com/s/ky7oi5fxqecrkci/Screenshot%202014-08-05%2016.42.47.png
st=>start: Create New Multisite Site
e=>end
op1=>operation: Check if URL has activation ID
sub1=>subroutine: Create Activation ID
sub2=>subroutine: Create User
sub3=>subroutine: Create Domain
sub4=>subroutine: Create Subscription
sub5=>subroutine: Assign Referal
cond=>condition: Yes or No?:
cond2=>condition: User Exists?:
io=>inputoutput: Save activation_id in plugin
io2=inputoutput: Get User
st->op1->cond
cond(yes)->io->e
cond(no)->sub1(right)->cond2
cond2(no)->sub2(right)->sub3
cond2(yes)->sub3->sub4->sub5->io
index.html in folder example has in the current version
<script src="../bin/flowchart-latest.js"></script>
<!--<script src="../release/flowchart-1.4.0.min.js"></script>-->
which should be
<!--<script src="../bin/flowchart-latest.js"></script>-->
<script src="../release/flowchart-1.4.0.min.js"></script>
there is no bin folder in the current version
I am seeing this error show up in the logs from rapheal.js on rendering the example you guys have. I have included rapheal.js already.
Error: Invalid value for attribute preserveAspectRatio="meet"
Is this something you guys have noticed? Also I am seeing weird behavior where the same content is being rendered differently (non deterministic). See below. I will dig deeper into this issue but if you have any pointers it will be great.
st=>start: Start
p1=>operation: DFA gets action
p2=>operation: DFA changes state
p3=>operation: DFA stops
p4=>operation: Send action to server
p5=>operation: Save robot data
p6=>operation: Set this action unavailable
cond1=>condition: Has action?
cond2=>condition: DFA can stop?
cond3=>condition: Action succ?
e=>end
st->p1->cond1
cond1(yes)->p4
cond1(no)->p2
p2(right)->p1
p4->cond3
cond3(no)->p1
cond3(yes,bottom)->p6
p6(right)->p1
cond2(no)->p1
cond2(yes)->p5
p5->e
you can try code above.
It would be better if you could support Hand Theme as in js-sequence-diagrams.
Thanks
Improvement request:
Ability to change the colour of following elements inside the flow.
Use case:
Draw the flow chart for a current instance of a workflow. Have 3 colors:
Hi,
I want to add different styles for start/end/condition/operation/inputoutput/subroutine
How can I do this. Is it possible to add selector(class)/id for particular node that I can use to style css for particular node.
I hope you understand my query?
Any help would appreciated.
Is it possible to specify the directionality of individual condition branches such that a "yes" branch may go right in one case but down in another? I'm trying to design my flowchart so that the success path is a straight line down and error conditions exit right. If this isn't currently possible, could the functionality be added? Thanks!
I saw you separate the library to some js files, can I know how do you merge them into 1 when release? any tool support to do that?
Trying to get the basic example to work with no luck.
this is what is in the body of my page:
<div id="diagram">Diagram will be placed here</div>
<script>
var diagram = flowchart.parse('st=>start: Start:>http://www.google.com[blank]\n' +
'e=>end:>http://www.google.com');
diagram.drawSVG('diagram');
</script>
Always get the following error no matter what is inside the parse()
.
TypeError: Cannot read property 'key' of null
at getDisplaySymbol (http://localhost:3000/include/plugins/flowchart/1.4.2/flowchart.js:1205:28)
at constructChart (http://localhost:3000/include/plugins/flowchart/1.4.2/flowchart.js:1236:26)
at Object.chart.drawSVG (http://localhost:3000/include/plugins/flowchart/1.4.2/flowchart.js:1269:11)
How do I solve this and what is the least I need to create a flowchart?
I'm right now using Stackedit to write a flowchart, And love it so far, but I'd love the ability to publish straight to tumblr.
I've already got Mathjax working on my blog, do you know how I could get flowchartjs working on my blog?
Thanks
rt ..i want add some key word different color .thx ..
Hi Adrai,
Thanks for creating this awesome tool!
I have some flowcharts where I need to add some text along some of the arrows (like labels along the arrow) and some where I need to display the arrow using a specific/different color. I see in your example that you are able to add text to the arrows going out of a condition box, but did not see any way to add a text for an arrow going out of an operation box, which is what I need to do. Can you please advise how I might be able to add text label to an arrow after operation box and to maybe change its color as well.
Once again, thanks a lot for creating this.
Cheers!
What are the rules for multiple line or creating line breaks? Or can there be some added?
It seems it can be done because it works in the example but I haven't been able to get it to work elsewhere.
When depicting control flowing right or downwards, the diagram renders fine. However, when you attempt to force a leftwards operation, the arrow comes out wonky. Screenshot:
Code:
st=>start: Start:>http://www.google.com[blank]
e=>end:>http://www.google.com
op1=>operation: My Operation
sub1=>subroutine: My Subroutine
cond=>condition: Yes
or No?:>http://www.google.com
io=>inputoutput: catch something...
st->op1->cond
cond(yes)->io->e
cond(no,left)->sub1(left)->op1
could you consider removing the version number of release
folder, just difference each version by tags so that we can add your lib on https://cdnjs.com with git auto-update.
thank you very much!
cdnjs/cdnjs#5056
Hi,
Nice job!! ;)
I'm trying to do a flowchart with 2 conditions but I can't place box where i need:
My code:
st=>start: Start|past
e=>end: End
op1=>operation: op1
text center|past
op2=>operation: op2|current
cond1=>condition: cond1|approved
cond2=>condition: cond2|approved
sub1=>subroutine: sub1|future
st(right)->op1(right)->cond1
cond1(no)->op2
cond2(no)->op2
cond1(yes, right)->cond2
cond2(yes, right)->sub1
op2(right)->sub1(right)->e
And I'd like to have this position:
is it possible to do it?
More over I'd like to center some text inside a box, is it possible too?
Thanks,
Best regards,
It seems just yes/no decision, is it possible a one/two/three decision?
Tried this one on the web site:
st=>start: Start:>http://www.google.com[blank]
e=>end:>http://www.google.com
op1=>operation: My Operation
sub1=>subroutine: My Subroutine
cond=>condition: Is it fun?:>http://www.google.com
io=>inputoutput: catch something...
st(right)->op1(right)->cond
cond(yes, right)->sub1(right)->op1
cond(no)->io(right)->e
Start to op1 draws downwards, expected to draw to the right
It would be nice to store the text that flowchart parses within a div element. Then, you could just pull the innerHTML contents of that div to parse. It would make using this library much easier. I've tried to do this by pulling the contents of a div and passing that to flowchart but it complains
Uncaught TypeError: Cannot read property 'key' of null (Line 1205 flowchart.js)
I believe this is because the innerHTML doesn't actually have \n line breaks. Do you know of an easy way to implement this or could flowchart.js not require the line breaks? Maybe have an alternate method to break lines such as a semicolon?
Hi sir,
I found your codes helpful for my project.
I hope you can help me with my problem.
Is there a way to change the direction of "operation"? its default is always going down which Im having a problem, I need to turn the arrow line of the "operation" to turn "right"
like the "condition" you can modify it like "cond(yes,right)".
here is my code:
st=>start: Start
e=>end
op1=>operation: 1.0 Open SAP GT
op2=>operation: 2.0 Search Account in GT
op3=>operation: 1.1 Inform immediate superior and let them contact the Resolver Group
op4=>operation: 1.3 Wait for the response
cond1=>condition: Any issues on the system?
sub1=>subroutine: Resolver Group to handle the request
st->op1->cond1
cond1(yes,right)->op3
cond1(no)->op2
op3->sub1->op4->op1
on the following input..
st=>start: Create New Multisite Site
e=>end
op1=>operation: Check if URL has activation ID
sub1=>subroutine: Create Activation ID
sub2=>subroutine: Create User
sub3=>subroutine: Create Domain
sub4=>subroutine: Create Subscription
sub5=>subroutine: Assign Referal
cond=>condition: Yes or No?:
cond2=>condition: User Exists?:
io=>inputoutput: Save activation_id in plugin
io2=inputoutput: Get User
st->op1->cond
cond(yes)->io->e
cond(no)->sub1(right)->cond2
cond2(no)->sub2(right)->io2
cond2(yes)->io2->sub3->sub4->sub5
particularly sticking io2 in the last line breaks things
any idea why?
I haven't dug into the code yet but it would be good if the join symbol code could work out which path goes back up the tree and then draw that coming out the side of the conditional. If you have a look at the attached flowchart you'll see a while statement that would be better expressed with the yes line coming out the side.
Hi
Great work here. Any plans to allow users to define their own decisions i.e "hire, fire, put on probation" instead of "yes no"? This would also mean extending from the two choices to multiple.
Hello,
I bet it's more a Raphael problem than Flowchart, but the rendered SVG doesn't include the xmlns:xlink
to the svg tag.
It should add xmlns:xlink="http://www.w3.org/1999/xlink"
to validate.
Is there a parameter to add this to the rendered svg ?
How to add a comment or a tip beside a flow box?
Is there a way to specify the fill for a particular node/vertex?
I know you can specify the fill option, but is there a way to specify one cell to be filled with a different a colour?
I get the following error
Uncaught TypeError: Cannot set property 'direction' of undefined flowchart-1.2.2.min.js:5
n flowchart-1.2.2.min.js:5
(anonymous function) (index):273
I'm getting this error:
Uncaught TypeError: Cannot set property 'next' of undefined
on this row:
realSymb[next] = getSymbol(nextSymb);
What could be the reason?
Is there anyway or example you could share to add additional symbols. Basically I want to set different border and background colors for conditional element and IO box types.
I tried adding additional shapes, but couldn't figure out how to utilize it with condition elements especially.
Thanks for your help Adrai.
Hello,
Have you thought of including an optional editor?
I've been using it with Ace (Ajax.org Cloud9 Editor) and with an angular module as well.
<div id="flow-ace-code" ng-model="flowAceCode",style="height:500px;" ui-ace="{theme:'twilight',mode:'html',onLoad: aceFlowCodeLoaded, onChange: aceFlowCodeChanged}"></div>
<button ng-click="updateFlowChart()">Update flow chart</button>
<div id="flowchart-div"></div>
And in an angular controller:
var self = this;
//- ... Your controller code
$scope.updateFlowChart = function() {
if($scope.flowAceCode) {
if(self.chart) self.chart.clean();
self.chart = flowchart.parse($scope.flowAceCode);
self.chart.drawSVG('flowchart-div', {
...
});
} else if(self.chart)
self.chart.clean();
};
The power of this library relies on the fact that you can write your own syntax highlighter.
Cheers!
I am getting the chart's code via JQuery's get() to load. Unfortunately, the flowchart does not render properly.
The JS code looks like this:
""""
$(document).ready(function() {
var url = "sample.txt";
$.ajax({
url : url,
dataType : "text",
success : function(data) {
var chart = flowchart.parse(data);
chart.drawSVG('canvas');
}
});
});
""""
The sample.txt contents looks like this:
""""
st=>start: Start:>http://www.google.com[blank]
e=>end:>http://www.google.com
op1=>operation: My Ooooperation
sub1=>subroutine: My Subroutine
cond=>condition: Yes
or No?:>http://www.google.com
io=>inputoutput: catch something...
st->op1->cond
cond(yes)->io->e
cond(no)->sub1(right)->op1
""""
I can see st and op1 being rendered but the rest is missing.
There are no console errors logged and the parse() function evaluates without any errors.
Do you have any hints what to check?
Thanks.
s=>start: Start
e=>end:
condition0=>condition: If
condition1=>condition: If
condition2=>condition: If
condition3=>condition: If
s->condition0
condition0(yes)->e
condition0(no)->condition1
condition1(yes)->e
condition1(no)->condition2
condition2(yes)->e
condition2(no)->condition3
condition3(yes)->e
condition3(no)->e
checked with given example i.e index.html
After clicking more number of times on run on flowchart is getting change ... which is issue !
Please any solution for that..
Thanks in advance ! :)
hi,
I used flowchart in stackedit, I found below input could generate some
lines pass through operation/subroutines, any solution to solve it?
enter=>start: Start
return=>end: End
is_lastpkt=>condition: Is it last packet?
is_fastpath=>condition: Should it enter fastpath?
is_arp=>condition: is it a ARP packet?
prepare_one=>subroutine: prepare to receive it
process_arp=>operation: handle ARP
drop=>operation: drop it!
push_them_to_user=>subroutine: call user callback
enter->is_lastpkt
is_lastpkt(yes)->push_them_to_user->return
is_lastpkt(no,bottom)->is_fastpath
is_fastpath(yes)->prepare_one->is_lastpkt
prepare_one->drop
is_fastpath(no,bottom)->is_arp
is_arp(no,bottom)->drop->is_lastpkt
is_arp(yes)->process_arp->is_lastpkt
Thanks
Yu
so i'm pretty happy how this flowchart looks:
(click to see in original size)
but it's really itching me to modify the following:
/ 250 Ok. /
should be shorter/ 250 Done. /
should be longer< ^DATA > no
should be shorteri naively thought that if we could just inject modification values from the flowchart syntax - cause "fixing" the whole auto layout algorithm probably would never work for every chart -, we then would only need to add this modification value to the line length in code... well, i got the first part done:
diff --git a/release/flowchart-1.3.4.js b/release/flowchart-1.3.4.js
index fe6051a..b76c816 100644
--- a/release/flowchart-1.3.4.js
+++ b/release/flowchart-1.3.4.js
@@ -446,6 +446,7 @@
this.symbol = symbol;
this.connectedTo = [];
this.symbolType = options.symbolType;
+ this.lineLengthMod = options.lineLengthMod;
this.flowstate = (options.flowstate || 'future');
this.next_direction = options.next && options['direction_next'] ? options['direction_next'] : undefined;
@@ -1381,14 +1382,17 @@
chart.symbols[symbol.key] = symbol;
- } else if (line.indexOf('->') >= 0) {
+ } else if (/-[\{-\d\}]*>/.test(line)) {
// flow
- var flowSymbols = line.split('->');
- for (var i = 0, lenS = flowSymbols.length; i < lenS; i++) {
- var flowSymb = flowSymbols[i];
+ var flowSymbols = line.split(/-[\{]*([-\d]*)[\}]*>/);
+
+ for (var j = 0, lenS = flowSymbols.length; j < lenS; j+=2) {
+ var i = j/2;
+ var flowSymb = flowSymbols[j];
var realSymb = getSymbol(flowSymb);
var next = getNextPath(flowSymb);
+ realSymb.lineLengthMod = parseInt(flowSymbols[j+1], 10) || 0;
var direction = null;
if (next.indexOf(',') >= 0) {
@@ -1401,8 +1405,8 @@
chart.start = realSymb;
}
- if (i + 1 < lenS) {
- var nextSymb = flowSymbols[i + 1];
+ if (j + 2 < lenS) {
+ var nextSymb = flowSymbols[j + 2];
realSymb[next] = getSymbol(nextSymb);
realSymb['direction_' + next] = direction;
direction = null;
that allows to do:
foo->bar-{10}>zap-{-20}>fop
and in (javascript) code we have for the bar
object lineLengthMod:10
and for zap
object lineLengthMod:-20
attributes.
for the second part i just could not findout where to modify the (first) line (segment) lengths in the spots i wanted to, so i'm giving up for now and hope someone else can figure it out. 😍
ps. source for the image can be found at http://ix.io/edM
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.