How to add a class/id for particular node

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