How to add a class/id for particular node - raphael

Question

I am using Adrai's flowchart. And I want to change different style of all nodes.
For layout I am using raphael.js.
Can anyone suggest me how could I achieve this.
Here is my code
<script>
window.onload = function () {
var diagram = flowchart.parse('st=>start: Start:>http://www.google.com[blank]\n' +
'e=>end:>http://www.google.com\n' +
'op1=>operation: My Operation1\n' +
'sub1=>subroutine: My Subroutine1\n' +
'cond1=>condition: Yes \n' +
'or No 1?\n:>http://www.google.com\n' +
'op2=>operation: My Operation2\n' +
'op3=>operation: My Operation3\n' +
'sub2=>subroutine: My Subroutine2\n' +
'cond2=>condition: Yes \n' +
'or No 2?\n:>http://www.google.com\n' +
'io=>inputoutput: catch something...\n' +
'' +
'st->op1->cond1\n' +
'cond1(yes, right)->io->e\n' +
'cond1(no)->op2->cond2\n' +
'cond2(yes, right)->io->e\n' + // conditions can also be redirected like cond(yes, bottom) or cond(yes, right)
'cond2(no)->op2');
diagram.drawSVG('diagram');
// you can also try to pass options:
diagram.drawSVG('diagram', {
'line-width': 3,
'line-length': 50,
'text-margin': 10,
'font-size': 14,
'font-color': 'black',
'line-color': 'black',
'element-color': 'black',
'fill': 'white',
'yes-text': 'yes',
'no-text': 'no',
'arrow-end': 'block'
});
};
</script>
Html
<div id="diagram">Diagram will be placed here</div>
For Ex.
This is my output and I want different design style for all nodes like start/condition/operation/end
Any help would appreciated.

Answer 1

May be a little late, but if I refer to the example provided on github (here: https://github.com/adrai/flowchart.js/blob/master/example/index.html ) you can set styles for different symbol types like this (extract from example)
chart.drawSVG('canvas', {
'line-width': 3,
'line-length': 50,
'text-margin': 10,
'font-size': 14,
'font-color': 'black',
'line-color': 'black',
'element-color': 'black',
'fill': 'white',
'yes-text': 'yes',
'no-text': 'no',
'arrow-end': 'block',
'symbols': {
'start': {
'font-color': 'red',
'element-color': 'green',
'fill': 'yellow'
}
}
Here the symbol 'start' is filled in yellow, text in red etc... I suppose you can add whatever style you want on other symbols (stop, op1, etc...).
Looking deeper in the code (https://github.com/adrai/flowchart.js/commit/8fddc7c8bf2a129f2fe9c4288b70218723d141c2) you can see the availables symbols are :
'start',
'end',
'condition',
'inputoutput',
'operation',
'subroutine'
Hope this helps a bit
Cheers

Answer 2

Notice this is only possible for symbol types.
It could be a lot more flexible if it could provide styles for specific IDs