标签: flowchart
流程图"为每个"循环循环,没有可变增量
推荐指数
解决办法
查看次数
jsPlumb:如何使流程图连接器避免交叉元素？
是否可以使jsPlumb流程图连接器不跨越可连接的项目或指定的元素(在示例中:带有'item'类的元素)？
默认流程图行为:
期望的结果:
这是我试过的:
编辑澄清
HTML
<div id="root">
<div class="item" id="item1">Item 1</div>
<div class="item" id="item2">Item 2</div>
<div class="item" id="item3">Item 3</div>
<div class="item" id="item4">Item 4</div>
<div class="item" id="item5">Item 5</div>
</div>
JS
jsPlumb.connect({
source: $('#item2'),
target: $('#item7'),
anchors: [ "Continuous" ],
connector:[ "Flowchart" ],
paintStyle: {
strokeStyle: "#000000",
lineWidth:1
}
});
基本上让jsPlumb引擎(SVG或canvas)知道相关的DOM元素并有一个避免对象的方案
推荐指数
解决办法
查看次数
保存并加载jsPlumb流程图,包括精确的锚点和连接
这是我正在构建的流程图编辑器的jsFiddle.
这是使用"添加决策"+"添加任务",连接和移动元素可以轻松创建的示例.
现在是困难的部分:我希望能够保存并加载确切的流程图.为此,我开始在Stackoverflow 上使用类似的线程.
为此,我添加了"保存"和"加载"按钮,用于将流程图导出/导入JSON(在保存后显示在jsFiddle中的textform中 - 相同的textform可用于加载).
该保存功能:
function saveFlowchart(){
var nodes = []
$(".node").each(function (idx, elem) {
var $elem = $(elem);
var endpoints = jsPlumb.getEndpoints($elem.attr('id'));
console.log('endpoints of '+$elem.attr('id'));
console.log(endpoints);
nodes.push({
blockId: $elem.attr('id'),
nodetype: $elem.attr('data-nodetype'),
positionX: parseInt($elem.css("left"), 10),
positionY: parseInt($elem.css("top"), 10)
});
});
var connections = [];
$.each(jsPlumb.getConnections(), function (idx, connection) {
connections.push({
connectionId: connection.id,
pageSourceId: connection.sourceId,
pageTargetId: connection.targetId
});
});
var flowChart = {};
flowChart.nodes = nodes;
flowChart.connections = connections;
flowChart.numberOfElements = numberOfElements; …推荐指数
解决办法
查看次数
在Graphviz中创建直边
我想使用Graphviz创建一个流程图(类似于Visio).这是一个示例图.
digraph start_up {
node [style = rounded];
node [shape = rect] start end;
node [style = ""];
node [shape = diamond] "USB\nCommand\nArrived";
start -> "Initialize\nCode";
"Initialize\nCode" -> "USB\nCommand\nArrived";
"USB\nCommand\nArrived" -> "USB\nCommand\nArrived" [label="No" tailport=w headport=n];
"USB\nCommand\nArrived" -> "Has USB 3.0\nInterface Been\nSelected" [label = "Yes"];
"Has USB 3.0\nInterface Been\nSelected" -> end
}
问题是当我在Graphviz中渲染这个由"USB\nCommand\nArrived" -> "USB\nCommand\nArrived" [label="No" tailport=w headport=n];
看起来非常难看的行创建时.我不介意曲线,但这条线看起来变形了.您可以在此处查看Graphviz创建的内容
有没有办法让这个看起来更好？
推荐指数
解决办法
查看次数
在线流程图工具(从私人wiki运行)
是否有一些流程图工具可以(或可以制作)与自托管的wiki集成？
要求:
- 基本功能(例如,绘制一些框和一些箭头)
- 我强烈希望它是视觉的(即,不会在文本中写出然后被转换)
- 允许动态编辑
- 重要的是该工具可以集成到wiki中(例如,作为某个地方的额外面板)
- 可以从个人服务器运行
- 自由
我在这里查看了有关图表工具的其他线程,但它们是桌面应用程序,驻留在第三方服务器上的在线应用程序,或者是花钱.
[编辑]感谢您的回复,但我希望它们能够动态编辑(我已将其添加到要求中).我的意思是我想整合(或从私人服务器运行)一些在线协作图表工具.虽然我可以创建一个在Graphviz中制作的JPG并上传它,但这不容易编辑.我必须在某个地方上传源文件,有人必须下载和编辑,然后上传新的JPG.
推荐指数
解决办法
查看次数
在开始编码之前你做了多少计划？
当您开始一个新项目时,您如何计划它或需要多长时间？
伪？流程图？
你是否试着提前考虑所有课程？
TBH,我从不计划任何事情.当我遇到问题时,我会直截了当地思考解决方案.主要是因为我提前几次尝试计划,我总是会忘记一些重要的事情,因此规划的逻辑将是有缺陷的.
推荐指数
解决办法
查看次数
源文件中的流程图生成器
我正在寻找一种工具,让我为给定的项目生成流程图.通过查看代码很难理解其他代码,流程图可能非常有用.
我的项目是VS 2010专业版.
推荐指数
解决办法
查看次数
我怎样才能在流程图中表示中断(对于微控制器)？
有没有人有任何视觉例子？
推荐指数
解决办法
查看次数
流程图功能编程语言
流程图绘制.这种古老的旧习惯已经使用了1000多年,被强加给我们贫穷的学生,没有任何用处(或者我认为是这样).它可能适用于命令式,顺序运行的语言,但我心爱的函数式编程呢？
可悲的是,我被迫为我的程序创建一个流程图(用Haskell编写).
我想这很容易:
main :: IO ()
main = do
someInput <- getLine
let upped = map toUpper someInput
putStrLn upped
这只是3个有序的步骤,获取数据,高位输出,输出它.
这次事情变得更糟:
main :: IO ()
main = do
someInput <- fmap toUpper getLine
putStrLn someInput
或者像这样:
main :: IO ()
main = interact (map toUpper)
好的,那就是IO,你可以像命令式语言那样处理它.纯函数怎么样？
一个实际的例子:
onlyMatching :: String -> [FilePath] -> [FilePath]
onlyMatching ext = filter f
where f name = lower ('.' : ext) == (lower . takeExtension $ name)
lower = map toLower
你将如何描绘最后一个？
推荐指数
解决办法
查看次数
如何对齐美人鱼流程图节点中的文本？
我想对齐 Mermaid 流程图节点中的文本，以便 和Thinkpad能够iPad对齐。我尝试\t在它们之前插入 a 但它们只是呈现为文本。
flowchart TD
A[Christmas] -->|Get money| B(Go shopping)
B --> C{Let me think}
C -->|One| D["Laptop: Thinkpad\nTablet: iPad"]
style D text-align:left
C -->|Two| E[iPhone]
C -->|Three| F[fa:fa-car Car]
链接到实时编辑器
推荐指数
解决办法
查看次数