Question

我正在使用Adrai的流程图。我想改变所有节点的不同风格。对于布局我使用的是raphael.js。

任何人都可以建议我如何实现这一目标。这是我的代码

<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>

对于前。

这是我的输出，我想要所有节点的不同设计风格，如start / condition / operation / end

enter image description here

任何帮助都会受到赞赏。

Answer 1

可能有点晚了，但如果我参考github上提供的示例（这里：https://github.com/adrai/flowchart.js/blob/master/example/index.html），您可以设置不同符号类型的样式，如下所示（从示例中提取）

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'
                        }
                      }

这里的符号'start'用黄色填充，文本用红色等填写......我想你可以在其他符号上添加你想要的任何样式（stop，op1等等）。

深入研究代码（https://github.com/adrai/flowchart.js/commit/8fddc7c8bf2a129f2fe9c4288b70218723d141c2），您可以看到可用的符号是：

'开始'，
'结束'
'状况'，
'输入 - 输出'，
'操作'，
'子程序'

希望这有点帮助

干杯

Answer 2

请注意，这仅适用于符号类型。如果可以为特定ID提供样式，它可以更加灵活

如何为特定节点添加类/ id

2 个答案: