标签: flowchart

我们正在寻找一些可以动态创建流程图(图像)的代码/组件,最好是在.NET/C#中(尽管采用XML/JSON-feed的Silverlight/Flash组件也可以).

例如,我们有一个(商业)报价,在它成为最终版之前经过以下步骤:

请求 - >待定 - >准备修改 - >正在修订 - >最终

作为额外的一步,有可能从"修订后"回到"待定".

所以组件/代码应该绘制这样的东西(其中'Under revision'将是此引用的活动状态):

示例图表http://www.wowtah.nl/flowchart-example.gif 我们不仅仅创建静态GIF图像(并根据需要加载正确的图像)的原因是这些步骤可能因客户对我们产品的实现而异.因此,我们正在寻找一种向用户动态显示为其配置的工作流程步骤的方法.

任何帮助将不胜感激!

我正在尝试使用dot(版本2.28.0)来制作我的源代码的流程图.为此,我希望图形由子图组成,其中每个子图表示代码库中的源文件.在每个子图的顶部,应该有文件名作为节点,以视觉上容易区分的方式(即深蓝色背景上的粗体,白色文本).文件名节点下面应该是按照调用顺序表示该文件中的例程流的节点.

我现在的问题是我希望"文件名节点"和"例程节点"之间的距离小于各个"例程节点"之间的距离,而且,之间不应该有箭头.

我尝试将minlen属性用于将"文件名节点"连接到第一个"例程节点"的边缘,但是当我将其设置为低于1.0的值时,这两个节点彼此相邻而不是堆叠.

有没有办法让前两个节点比另外两个节点更接近,但是顶部/底部是否定向？

digraph "prog.c"
{
    edge [fontname="FreeSans",fontsize="12",labelfontname="FreeSans",labelfontsize="10"];
    node [fontname="FreeSans",fontsize="14",shape=record,height=0.2];
    compound=true;

    subgraph cluster_main {
        Node1_0 [label="main.c", shape=folder, fontcolor="white", style=filled, fillcolor="#00008b"];
        Node1_1 [label="routine1()"];
        Node1_2 [label="routine2()"];
        edge [color="transparent", minlen="0.5"]; // stacking not ok
        // edge [color="transparent", minlen="1.0"]; // stacking ok
        Node1_0 -> Node1_1 ;
        edge [color="black", minlen="1.0"];
        Node1_1 -> Node1_2 ;
    }
}

编辑:我应该注释掉导致不良结果的线而不是导致所需结果的线(我原本计划附加两个png用于澄清,但我不允许这样做作为新手); 所以这里是我实际想要修改的代码,前两个节点的距离与最后两个节点的距离不同(较小).

digraph "prog.c"
{
    edge [fontname="FreeSans",fontsize="12",labelfontname="FreeSans",labelfontsize="10"];
    node [fontname="FreeSans",fontsize="14",shape=record,height=0.2];
    compound=true;

    subgraph cluster_main {
        Node1_0 [label="main.c", shape=folder, fontcolor="white", style=filled, fillcolor="#00008b"];
        Node1_1 [label="routine1()"];
        Node1_2 [label="routine2()"];
        //edge [color="transparent", minlen="0.5"]; // stacking …

我需要使用C++代码自动构建流程图,理想情况下每个源文件一个流程图.是否有任何工具(最好是C++/Python,开源或高度可配置 - 所以我可以改变外观)我可以用来创建流程图？

有没有可用的工具可以用代码制作流程图或流程图。或者从代码中制作任何其他图，例如类图。

我正在寻找一个可以将C++代码转换为Flow chart&Psudocode的工具,我可以找到一个吗？

我刚加入了一个用Angular JS制作的项目,它有很多嵌套的承诺.有些任务似乎没有以正确的顺序发生,这导致某些对象在某些时候被覆盖.我需要检查如何/何时调用promises,首先返回,等等.所有这些承诺发生了什么的流程图woudl帮助了我很多,不幸的是我需要花费相当长的时间来手动完成它,所以我想知道是否有一种自动化工具.我一直在谷歌上看,但找不到那样的东西.欢迎任何关于如何跟踪承诺电话/回复的提示!

我正在使用流程图.js库来获取流程图的SVG 渲染。我需要在带有动态引导程序面板的弹出窗口中包含流程图渲染，但结果一团糟（盒子上的标签和小渲染：

我的代码是：

<div class="panel panel-default">   
  <div class="panel-body">      
    <div id="diagram"></div>    
    </div> 
</div>

<script type="text/javascript">

    $(document).ready(function () {
        var diagram = flowchart.parse('st=>start: Start:>http://www.google.com[blank]\n' +
            'e=>end:>http://www.google.com\n' +
            'op1=>operation: My Operation\n' +
            'op2=>operation: Stuff|current\n' +
            'sub1=>subroutine: My Subroutine\n' +
            'cond=>condition: Yes \n' + // use cond(align-next=no) to disable vertical align of symbols below
            'or No?\n:>http://www.google.com\n' +
            'c2=>condition: Good idea|rejected\n' +
            'io=>inputoutput: catch something...|request\n' +
            '\n' +
            'st->op1(right)->cond\n' +
            'cond(yes, right)->c2\n' + // conditions can also be redirected like cond(yes, …

使用 Mermaid js 制作流程图，似乎无法找到一种方法来将链接环绕到新的“行”可以这么说。文档和谷歌搜索没有让我找到任何地方。有谁知道是否可以创建一个链接来替换红线？

我正在寻找一个工具（最好是离线工作），但找不到任何工具。如何生成流程图。即一个方法或类的主要方法的流程图。

我知道序列图及其 IntelliJ 插件。但我正在寻找一种生成流程图而不是序列的工具。

我在 Obsidian 和 Wordpress 中使用 Mermaid。在这两个图中，下面的简短图表都有覆盖标题的连接箭头：

有没有办法在不使用 CSS 或更改为水平的情况下解决此问题？

<script src="https://cdnjs.cloudflare.com/ajax/libs/mermaid/9.0.1/mermaid.min.js"></script>

<div class="mermaid">
flowchart TD
    subgraph "your home"
        host(You open a connection to a home server)
    end
    subgraph "fast peering"
        host<-->fast1(I'm super close to the destination)
        fast1<--what a quick trip! -->server(destination server)
    end
    subgraph "slow peering"
        host<-->server2(I'm still far away)
        server2<-- this takes a few milliseconds-->server3(Still too far...)
        server3<-- this takes a few more milliseconds-->server4(are we there yet?)
        server4<-- this takes precious milliseconds-->server5(almost there!)
        server5<-- whew, finally! -->server
    end
</div>