1 edgeset, rankset, nodesep
Copy
digraph G { splines=ortho; edgesep=1; ranksep=0.2; nodesep=1 node [shape = circle]; node [fontname="Arial" fontsize="8" fixedsize="true" width="1.2" height="1.2"]; edge [arrowhead=vee; arrowsize="0.5"] n0 [label="Configuración \n de usuarios", color="#455A64"; style="filled"; fillcolor="#0097A7"; fontcolor="white"]; n1 [label="Grupos usuarios \n finanzas", color="#455A64"; style="filled"; fillcolor="#FFA000"; fontcolor="black"; fontcolor="white"]; n2 [label="Grupos usuarios \n gestión", color="#455A64"; style="filled"; fillcolor="#C2185B"; fontcolor="black"; fontcolor="white"]; n3 [label="Permisos", shape="box"; width="2.5"; height="0.3"; color="#455A64"]; n4 [label="Valores", shape="box"; width="2.5"; height="0.3"; color="#455A64"]; n5 [label="Agrupaciones \n de permisos", shape="box"; width="2.5"; height="0.3"; color="#455A64"; style="filled"; fillcolor="#4CAF50"; fontcolor="white"]; n6 [label="Preferencias \n y parámetros", shape="box"; width="2.5"; height="0.3"; color="#455A64"; style="filled"; fillcolor="#607D8B"; fontcolor="white"]; n7 [label="wic_conf", shape="box"; width="2.5"; height="0.3"; color="#00695C"]; n8 [label="usuario", shape="box"; width="2.5"; height="0.3"; color="#00695C"]; {rank=same; n1; n2; n0}; n1 -> n0 n0 -> n2 [dir="back"] n5 -> n1 n5 -> n2 n3 -> n4 [dir="back"] n5 -> n3 [dir="back"] n1 -> n6 [dir="back"] n2 -> n6 [dir="back"] n7 -> n8 [dir="back"] n0 -> n7 [dir="back"] n8 -> n6 [dir="back", style="invis"] n4 -> n0 [dir="back", style="invis"] }
Copy
let graph = new Ax.graph.GraphVizBuilder(); graph.lineStyle("ortho"); graph.edgeSeparation(1); graph.rankSeparation(0.2); graph.nodeSeparation(1); const defaultNode = graph.newAttrBuilder(); defaultNode.addShape("circle"); defaultNode.addFontName("Arial"); defaultNode.addFontSize(8); defaultNode.addFixedSize(true); defaultNode.addWidth(1.2); defaultNode.addHeight(1.2); graph.addDefaultNodeAttr(defaultNode.build()); const defaultEdge = graph.newAttrBuilder(); defaultEdge.addArrowHead("vee"); defaultEdge.addArrowSize(0.5); graph.addDefaultEdgeAttr(defaultEdge.build()); const simpleAttr = graph.newAttrBuilder(); simpleAttr.addShape("box"); simpleAttr.addWidth(2.5); simpleAttr.addHeight(0.5); simpleAttr.addColor("#00695c"); graph.addAttr("simpleAttr", simpleAttr.build()); const confUsu = graph.newAttrBuilder(); confUsu.addColor("#455A64"); confUsu.addStyle("filled"); confUsu.addFillcolor("#0097A7"); confUsu.addFontcolor("white"); graph.addAttr("confusu", confUsu.build()); const gfin = graph.newAttrBuilder(); gfin.addColor("#455A64"); gfin.addStyle("filled"); gfin.addFillcolor("#FFA000"); gfin.addFontcolor("white"); graph.addAttr("gfin", gfin.build()); const gGes = graph.newAttrBuilder(); gGes.addColor("#455A64"); gGes.addStyle("filled"); gGes.addFillcolor("#C2185B"); gGes.addFontcolor("white"); graph.addAttr("gGes", gGes.build()); const vP = graph.newAttrBuilder(); vP.addColor("#455A64"); vP.addShape("box"); vP.addWidth(2.5); vP.addHeight(0.3); graph.addAttr("vP", vP.build()); const aP = graph.newAttrBuilder(); aP.addColor("#455A64"); aP.addShape("box"); aP.addWidth(2.5); aP.addHeight(0.3); aP.addStyle("filled"); aP.addFillcolor("#4CAF50"); aP.addFontcolor("white"); graph.addAttr("aP", aP.build()); const pP = graph.newAttrBuilder(); pP.addColor("#455A64"); pP.addShape("box"); pP.addWidth(2.5); pP.addHeight(0.3); pP.addStyle("filled"); pP.addFillcolor("#607D8B"); pP.addFontcolor("white"); graph.addAttr("pP", pP.build()); const edgeBack = graph.newAttrBuilder(); edgeBack.addDir("back"); graph.addAttr("edgeBack", edgeBack.build()); const edgeBackInvis = graph.newAttrBuilder(); edgeBackInvis.addDir("back"); edgeBackInvis.addStyle("invis"); graph.addAttr("edgeBackInvis", edgeBackInvis.build()); graph.node("n0", "confusu", "Configuración \\n de usuarios"); graph.node("n1", "gfin", "Grupos usuarios \\n finanzas"); graph.node("n2", "gGes", "Grupos usuarios \\n gestión"); graph.node("n3", "vP", "Permisos"); graph.node("n4", "vP", "Valores"); graph.node("n5", "aP", "Agrupaciones \\n de permisos"); graph.node("n6", "pP", "Preferencias \\n y parámetros"); graph.node("n7", "simpleAttr", "wic_conf"); graph.node("n8", "simpleAttr", "usuario"); const r = graph.newRankBuilder("same"); r.addNode("n1"); r.addNode("n2"); r.addNode("n0"); graph.addRank(r); graph.edge("n1", "n0"); graph.edge("n0", "n2", "edgeBack"); graph.edge("n5", "n1"); graph.edge("n5", "n2"); graph.edge("n3", "n4", "edgeBack"); graph.edge("n5", "n3", "edgeBack"); graph.edge("n1", "n6", "edgeBack"); graph.edge("n2", "n6", "edgeBack"); graph.edge("n7", "n8", "edgeBack"); graph.edge("n0", "n7", "edgeBack"); graph.edge("n8", "n6", "edgeBackInvis"); graph.edge("n4", "n0", "edgeBackInvis");
Copy
digraph G { splines=ortho; edgesep=0.5; ranksep=0.2; nodesep=0.5 #overlap=scale; node [fontname="Arial" fontsize="10" shape="box" width=1.5 color="#616161"]; edge [arrowhead=vee; arrowsize="0.5"] rankdir=TB n1 [label="Artículo", color="#00695C"]; n2 [label="Variable logística VL"; color="#0097A7";]; n3 [label="Almacén"; color="#FFA000";]; n4 [label="Proveedores",style="filled"; fillcolor="#C2185B"; fontcolor="white"; ]; n5 [label="Niveles de stock"; style="filled"; fillcolor="#455A64"; fontcolor="white"; fillcolor="#0097A7"]; n6 [label="Reposición automática", style="filled"; fillcolor="#00BCD4"; fontcolor="white"]; n7 [label="Propuesta de reposición", style="filled"; fillcolor="#455A64"; fontcolor="white"; fillcolor="#4CAF50"]; n8 [label="Pedido de reposición", style="filled"; fillcolor="#455A64"; fontcolor="white"; fillcolor="#607D8B"]; point [shape="point"; label=""; height=0; width=0] subgraph clusterA { n1, n2, n3 } #subgraph clusterB { #n7, n8 } {rank=same; n8; n4}; #n4 -> n1; n1 -> point [ arrowhead="none" ]; n2 -> point[ arrowhead="none" ]; n3 -> point[ arrowhead="none" ]; point -> n5 n5 -> n6 -> n7 -> n8 n8 -> n4 n6 -> n8 n4 -> n1 }
Copy
let graph = new Ax.graph.GraphVizBuilder(); graph.lineStyle("ortho"); graph.edgeSeparation(0.5); graph.rankSeparation(0.2); graph.nodeSeparation(0.5); const defaultNode = graph.newAttrBuilder(); defaultNode.addShape("box"); defaultNode.addFontName("Arial"); defaultNode.addFontSize(10); defaultNode.addWidth(1.5); defaultNode.addColor("#616161"); graph.addDefaultNodeAttr(defaultNode.build()); const defaultEdgeAttr = graph.newAttrBuilder(); defaultEdgeAttr.addArrowSize(0.5); defaultEdgeAttr.addArrowHead("vee"); graph.addDefaultEdgeAttr(defaultEdgeAttr.build()); const edgeAtrrNoneArrow = graph.newAttrBuilder(); edgeAtrrNoneArrow.addArrowHead("none"); graph.addAttr("edgeAtrrNoneArrow", edgeAtrrNoneArrow.build()); const articuloAttr = graph.newAttrBuilder(); articuloAttr.addColor("#00695C"); graph.addAttr("articuloAttr", articuloAttr.build()); const logisAttr = graph.newAttrBuilder(); logisAttr.addColor("#0097A7"); graph.addAttr("logisAttr", logisAttr.build()); const almaAttr = graph.newAttrBuilder(); almaAttr.addColor("#FFA000"); graph.addAttr("almaAttr", almaAttr.build()); const proveAttr = graph.newAttrBuilder(); proveAttr.addStyle("filled"); proveAttr.addFillcolor("#C2185B"); proveAttr.addFontcolor("white"); graph.addAttr("proveAttr", proveAttr.build()); const staockAttr = graph.newAttrBuilder(); staockAttr.addStyle("filled"); staockAttr.addFillcolor("#0097A7"); staockAttr.addFontcolor("white"); graph.addAttr("staockAttr", staockAttr.build()); const automaAttr = graph.newAttrBuilder(); automaAttr.addStyle("filled"); automaAttr.addFillcolor("#00BCD4"); automaAttr.addFontcolor("white"); graph.addAttr("automaAttr", automaAttr.build()); const proprRepoAttr = graph.newAttrBuilder(); proprRepoAttr.addStyle("filled"); proprRepoAttr.addFillcolor("#4CAF50"); proprRepoAttr.addFontcolor("white"); graph.addAttr("proprRepoAttr", proprRepoAttr.build()); const pedRepoAttr = graph.newAttrBuilder(); pedRepoAttr.addStyle("filled"); pedRepoAttr.addFillcolor("#455A64"); pedRepoAttr.addFontcolor("white"); graph.addAttr("pedRepoAttr", pedRepoAttr.build()); const pointAttr = graph.newAttrBuilder(); pointAttr.addShape("point"); pointAttr.addHeight(0); pointAttr.addWidth(0); graph.addAttr("pointAttr", pointAttr.build()); graph.graphDirection("TB"); graph.node("n1", "articuloAttr", "Artículo"); graph.node("n2", "logisAttr", "Variable logística VL"); graph.node("n3", "almaAttr", "Almacén"); graph.node("n4", "proveAttr", "Proveedores"); graph.node("n5", "staockAttr", "Niveles de stock"); graph.node("n6", "automaAttr", "Reposición automática"); graph.node("n7", "proprRepoAttr", "Propuesta de reposición"); graph.node("n8", "pedRepoAttr", "Pedido de reposición"); graph.node("point", "pointAttr"); const sg_1 = graph.newSubGraphBuilder("clusterA"); sg_1.addNode("n1"); sg_1.addNode("n2"); sg_1.addNode("n3"); graph.addSubGraph(sg_1); const r3 = graph.newRankBuilder("same"); r3.addNode("n8"); r3.addNode("n4"); graph.addRank(r3); graph.edge("n1", "point", "edgeAtrrNoneArrow"); graph.edge("n2", "point", "edgeAtrrNoneArrow"); graph.edge("n3", "point", "edgeAtrrNoneArrow"); graph.edge("point", "n5"); graph.edge("n5", "n6"); graph.edge("n6", "n7"); graph.edge("n7", "n8"); graph.edge("n8", "n4"); graph.edge("n6", "n8"); graph.edge("n4", "n1");
2 left align
Copy
digraph { graph [fontsize=10 fontname="Verdana" compound=true]; node [shape=note width="1" height=".7" fontcolor="white" fontsize=10 fontname="Verdana" style=filled color="#e0e0e0" fillcolor="#e0e0e0"]; edge [color="#616161"]; overlap=scale; # (try to) stretch everything if edges overlap splines=ortho; rankdir=LR lista4 [label="Definición de: \l◦ maestro artículos\l◦ familias\l◦ unidades", shape="box" fontcolor="#616161" , color="#616161", fillcolor="#e0e0e0", width="1.3", fontsize="8", style="invis"]; lista3 [label="Definición de: \l◦ maestro empresa\l◦ secciones contables\l◦ proyectos contables \l◦ delegaciones \l◦ departamentos \l◦ almacenes\l", shape="box" fontcolor="#616161" , color="#616161", fillcolor="#e0e0e0", width="1.4", fontsize="8"]; lista2 [label="Definición de: \l◦ maestro terceros\l◦ relaciones contables\l◦ condiciones pago \l◦ direcciones \l◦ contactos", shape="box" fontcolor="#616161" , color="#616161", fillcolor="#e0e0e0", width="1.3", fontsize="8", style="invis"]; lista [label="Configuración de: \l◦ empresa\l◦ usuarios\l◦ referencias grupos \n ◦ impresoras", shape="box" fontcolor="#616161" , color="#616161", fillcolor="#e0e0e0", width="1.3", fontsize="8", style="invis"]; para [label="Parametrización", width="1.3"]; tercero [label="Terceros"]; empresa [label="Empresa", fillcolor="#00BCD4", color="#616161"]; articulos [label="Artículo"]; doc_compras [label="Documentos \n compra"]; doc_ventas [label="Documentos \n venta"]; para -> tercero -> empresa -> articulos articulos -> doc_compras [style="dashed"]; articulos -> doc_ventas [style="dashed"]; lista ->lista2 ->lista3 ->lista4 [style="invis"]; }
Copy
let graph = new Ax.graph.GraphVizBuilder(); graph.compound(true); graph.overlapStyle("scale"); graph.lineStyle("ortho"); graph.graphDirection("LR"); const defaultGraphAttr = graph.newAttrBuilder(); defaultGraphAttr.addFontSize(10); defaultGraphAttr.addFontName("Verdana"); graph.addDefaultGraphAttr(defaultGraphAttr.build()); const defaultNodeAttr = graph.newAttrBuilder(); defaultNodeAttr.addShape("note"); defaultNodeAttr.addHeight(0.7); defaultNodeAttr.addFontcolor("white"); defaultNodeAttr.addFontSize(10); defaultNodeAttr.addFontName("Verdana"); defaultNodeAttr.addStyle("filled"); defaultNodeAttr.addColor("#e0e0e0"); defaultNodeAttr.addFillcolor("#e0e0e0"); graph.addDefaultNodeAttr(defaultNodeAttr.build()); const defaultEdgeAttr = graph.newAttrBuilder(); defaultEdgeAttr.addColor("#616161"); graph.addDefaultEdgeAttr(defaultEdgeAttr.build()); const invisEdgeAttr = graph.newAttrBuilder(); invisEdgeAttr.addStyle("invis"); graph.addAttr("invisEdgeAttr", invisEdgeAttr.build()); const dashedEdgeAttr = graph.newAttrBuilder(); dashedEdgeAttr.addStyle("dashed"); graph.addAttr("dashedEdgeAttr", dashedEdgeAttr.build()); const listAttr = graph.newAttrBuilder(); listAttr.addShape("box"); listAttr.addFontcolor("#616161"); listAttr.addColor("#616161"); listAttr.addFillcolor("#e0e0e0"); listAttr.addWidth(1.3); listAttr.addFontSize(8); listAttr.addStyle("invis"); graph.addAttr("listAttr", listAttr.build()); const list3Attr = graph.newAttrBuilder(); list3Attr.addShape("box"); list3Attr.addFontcolor("#616161"); list3Attr.addColor("#616161"); list3Attr.addFillcolor("#e0e0e0"); list3Attr.addWidth(1.3); list3Attr.addFontSize(8); graph.addAttr("list3Attr", list3Attr.build()); const paraAttr = graph.newAttrBuilder(); paraAttr.addWidth(1.3); graph.addAttr("paraAttr", paraAttr.build()); const empresaAttr = graph.newAttrBuilder(); empresaAttr.addColor("#616161"); empresaAttr.addFillcolor("#00BCD4"); graph.addAttr("empresaAttr", empresaAttr.build()); graph.node("lista4", "listAttr", "Definición de: \\l◦ maestro artículos\\l◦ familias\\l◦ unidades"); graph.node("lista3", "list3Attr", "Definición de: \\l◦ maestro empresa\\l◦ secciones contables\\l◦ proyectos contables \\l◦ delegaciones \\l◦ departamentos \\l◦ almacenes\\l"); graph.node("lista2", "listAttr", "Definición de: \\l◦ maestro terceros\\l◦ relaciones contables\\l◦ condiciones pago \\l◦ direcciones \\l◦ contactos"); graph.node("lista", "listAttr", "Configuración de: \\l◦ empresa\\l◦ usuarios\\l◦ referencias grupos \\n ◦ impresoras"); graph.node("para", "paraAttr", "Parametrización"); graph.node("tercero", "", "Terceros"); graph.node("empresa", "empresaAttr", "Empresa"); graph.node("articulos", "", "Artículo"); graph.node("doc_compras", "", "Documentos \\n compra"); graph.node("doc_ventas", "", "Documentos \\n venta"); graph.edge("para", "tercero"); graph.edge("tercero", "empresa"); graph.edge("empresa", "articulos"); graph.edge("articulos", "doc_compras", "dashedEdgeAttr"); graph.edge("articulos", "doc_ventas", "dashedEdgeAttr"); graph.edge("lista", "lista2", "invisEdgeAttr"); graph.edge("lista2", "lista3", "invisEdgeAttr"); graph.edge("lista3", "lista4", "invisEdgeAttr");
3 layout=circle
Copy
digraph g1 { overlap = true; layout="circo"; node [shape = circle; style = filled; width="1.1"; fixedsize="true"; fontname="Arial"; fontsize="11" fontcolor="white"; color="#616161"]; edge [dir="none", color="#e0e0e0", fontname="Helvetica"]; N0 [label="Compras", fillcolor="#C2185B"]; N1 [label="Producción", fillcolor="#FFA000"]; N2 [label="Contabilidad \nfinanciera", fillcolor="#00BCD4"]; N3 [label="Logística", fillcolor="#9C27B0"]; N4 [label="Ventas", fillcolor="#4CAF50"]; N5 [label="Mantenimiento", fillcolor="#607D8B"]; N6 [label="Rercursos\n humanos", fillcolor="#FF6F00"]; N7 [label="CRM", fillcolor="#CDDC39"]; N0 -> N1 N1 -> N2 N2 -> N3 N3 -> N4 N4 -> N5 N5 -> N6 N6 -> N0 N1 -> N6 N2 -> N4 N6 -> N4 N0 -> N2 N3 -> N1 N3 -> N5 N5 -> N0 N6 -> N7 N0 -> N4 N1 -> N5 N2 -> N6 N3 -> N0 N4 -> N1 N5 -> N2 N6 -> N3 N7 -> N1 N7 -> N2 N7 -> N3 N7 -> N4 N7 -> N5 [ headlabel="\n ERP ",fontsize="70px", fontcolor="#C2185B"]; N7 -> N0 }
4 Distance, edges minlen and dir=back
Copy
digraph G { splines=ortho; node [shape = circle]; node [fontname="Arial" fontsize="8" fixedsize="true" width="1.2" height="1.2"]; edge [arrowhead=vee; arrowsize="0.5"] n8 [label="Depósitos y\n préstamos\n [tdepmovh]", color="#455A64"; style="filled"; fillcolor="#0097A7"; fontcolor="white"]; n2 [label="Cuentas de \n préstamos/depósitos\n [tdepmovd]", color="#455A64"; style="filled"; fillcolor="#FFA000"; fontcolor="black"; fontcolor="white"]; n4 [label="Operaciones financieras\n[toperfin]", shape="box"; width="2"; height="0.3"; color="#00695C"]; n5 [label="Empresas [cempresa]", shape="box"; width="2"; height="0.3"; color="#455A64"]; n6 [label="Cuentas de bancos propios \n[cbancpro]", shape="box"; width="2"; height="0.3"; color="#FF6F00"]; n9 [label="Tesorería", color="#FF6F00"]; {rank=same; n2; n8; n9}; n2 ->n8 -> n9 [minlen="7"] n6 -> n9 n6 -> n2 n6 -> n8 n2 -> n4 [dir="back"] n8 -> n4 [dir="back"] n9 -> n4 [dir="back"] n5 -> n6 n5 -> n2 n5 -> n9 }
5 Circles
Copy
digraph G { splines=ortho; node [shape = circle]; node [fontname="Arial" fontsize="8" fixedsize="true" width="1.2" height="1.2"]; n8 [label="Traspasos \n entre cuentas\n [ttramovd]", color="white"; style="filled"; fillcolor="#0097A7"; fontcolor="white"]; n1 [label="Tipo traspaso\n o cesión [ttramovd]", color="white"; style="filled"; fillcolor="#C2185B"; fontcolor="black"]; n2 [label="Cuentas\n intermedias\n [ttraempr]", color="white"; style="filled"; fillcolor="#FFA000"; fontcolor="black"]; n4 [label="Operaciones\n financieras\n[toperfin]", color="#00695C"]; n5 [label="Empresas\n [cempresa]", color="#455A64"]; n6 [label="Cuentas\n Bancos\npropios [cbancpro]", color="#FF6F00"]; n7 [label="Monedas y\n divisas\n [cmonedas]", color="#880E4F"]; {rank=same; n8}; {rank=same; n2}; {rank=same; n1;n2}; n1 -> n8 ; n2 -> n8 [fontname="Arial", fontsize="8", style=dashed, label="SOLO\n EMPRESAS\n DISTINTAS"]; n4 -> n8 ; n5 -> n8 ; n6 -> n8 ; n7 -> n8 ; }
Copy
let graph = new Ax.graph.GraphVizBuilder(); graph.lineStyle("ortho"); const defaultNodeAttr = graph.newAttrBuilder(); defaultNodeAttr.addShape("circle"); defaultNodeAttr.addFontName("Arial"); defaultNodeAttr.addFontSize(8); defaultNodeAttr.addWidth(1.2); defaultNodeAttr.addHeight(1.2); graph.addDefaultNodeAttr(defaultNodeAttr.build()); const edgeAttr = graph.newAttrBuilder(); edgeAttr.addFontName("Arial"); edgeAttr.addFontSize(8); edgeAttr.addStyle("dashed"); edgeAttr.addLabel("SOLO\\n EMPRESAS\\n DISTINTAS"); graph.addAttr("edgeAttr", edgeAttr.build()); const cuentTrasAttr = graph.newAttrBuilder(); cuentTrasAttr.addColor("white"); cuentTrasAttr.addStyle("filled"); cuentTrasAttr.addFillcolor("#0097A7"); cuentTrasAttr.addFontcolor("white"); graph.addAttr("cuentTrasAttr", cuentTrasAttr.build()); const n2Attr = graph.newAttrBuilder(); n2Attr.addColor("white"); n2Attr.addStyle("filled"); n2Attr.addFillcolor("#C2185B"); n2Attr.addFontcolor("black"); graph.addAttr("n2Attr", n2Attr.build()); const n3Attr = graph.newAttrBuilder(); n3Attr.addColor("white"); n3Attr.addStyle("filled"); n3Attr.addFillcolor("#FFA000"); n3Attr.addFontcolor("black"); graph.addAttr("n3Attr", n3Attr.build()); const n4Attr = graph.newAttrBuilder(); n4Attr.addColor("#00695C"); graph.addAttr("n4Attr", n4Attr.build()); const n5Attr = graph.newAttrBuilder(); n5Attr.addColor("#455A64"); graph.addAttr("n5Attr", n5Attr.build()); const n6Attr = graph.newAttrBuilder(); n6Attr.addColor("#FF6F00"); graph.addAttr("n6Attr", n6Attr.build()); const n7Attr = graph.newAttrBuilder(); n7Attr.addColor("#880E4F"); graph.addAttr("n7Attr", n7Attr.build()); graph.node("n1", "cuentTrasAttr", "Traspasos \\n entre cuentas\\n [ttramovd]"); graph.node("n2", "n2Attr", "Tipo traspaso\\n o cesión [ttramovd]"); graph.node("n3", "n3Attr", "Cuentas\\n intermedias\\n [ttraempr]"); graph.node("n4", "n4Attr", "Operaciones\\n financieras\\n[toperfin]"); graph.node("n5", "n5Attr", "Empresas\\n [cempresa]"); graph.node("n6", "n6Attr", "Cuentas\\n Bancos\\npropios [cbancpro]"); graph.node("n7", "n7Attr", "Monedas y\\n divisas\\n [cmonedas]"); const r1 = graph.newRankBuilder("same"); r1.addNode("n1"); graph.addRank(r1); const r2 = graph.newRankBuilder("same"); r2.addNode("n3"); graph.addRank(r2); const r3 = graph.newRankBuilder("same"); r3.addNode("n2"); r3.addNode("n3"); graph.addRank(r3); graph.edge("n2", "n1"); graph.edge("n4", "n1"); graph.edge("n3", "n1", "edgeAttr"); graph.edge("n5", "n1"); graph.edge("n6", "n1"); graph.edge("n7", "n1");
Copy
digraph G { splines=ortho;rankdir=TB; constraint=false node [fontname="Arial"; fontsize="10"; shape="circle"; fixedsize="true"; height="1.1"]; edge [arrowhead=vee] n1 [label="Tercero\n [ctercero]", color="white"; style="filled"; fillcolor="#FFA000"; fontcolor="white"]; n2 [label="País\n [ctiponac]", color="#880E4F"]; n3 [label="Contactos\n [ccontact]", color="white"; style="filled"; fillcolor="#C2185B"; fontcolor="white"]; n4 [label="Idioma\n [ctipoidi]", color="#00695C"]; n5 [label="Zona fiscal\n [ctax_zone]", color="#455A64"]; n20 [label="Empresa\n [cempresa]", color="white"; style="filled"; fillcolor="#0097A7"; fontcolor="white"; fixedsize="true"]; n6 [label="Calendario\n [ccalendah]", color="#FF6F00"]; n7 [label="Divisa\n [cmonedas]", color="#880E4F"]; n8 [label="Cambio\n [ctipocam]", color="#880E4F"]; n9 [label="Plan\n contable\n [cplacont]", color="#880E4F"]; n11 [label="Estado\n efectos\n [cefecest]", color="#880E4F"]; {rank=same; n1;n2;n3;n4;n5}; {rank=same; n20}; {rank=same; n6;n7;n8;n9;n11}; n1 -> n20 ; n2 -> n20 ; n3 -> n20 ; n4 -> n20 ; n5 -> n20 ; n6 -> n20 ; n7 -> n20 ; n8 -> n20 ; n9 -> n20 ; n20->n11 [dir="back"; arrowtail=vee]; }
Copy
let graph = new Ax.graph.GraphVizBuilder(); graph.lineStyle("ortho"); graph.constraint(false); graph.graphDirection("TB"); const defaultNodeAttr = graph.newAttrBuilder(); defaultNodeAttr.addShape("circle"); defaultNodeAttr.addFontName("Arial"); defaultNodeAttr.addFontSize(10); defaultNodeAttr.addHeight(1.1); defaultNodeAttr.addFixedSize(true); graph.addDefaultNodeAttr(defaultNodeAttr.build()); const defaultEdgeAttr = graph.newAttrBuilder(); defaultEdgeAttr.addArrowHead("vee"); graph.addDefaultEdgeAttr(defaultEdgeAttr.build()); const edgeAAttr = graph.newAttrBuilder(); edgeAAttr.addDir("back"); edgeAAttr.addArrowTail("vee"); graph.addAttr("edgeAAttr", edgeAAttr.build()); const oneColorNode = graph.newAttrBuilder(); oneColorNode.addColor("#880E4F"); graph.addAttr("oneColorNode", oneColorNode.build()); const oneColorNode2 = graph.newAttrBuilder(); oneColorNode2.addColor("#00695C"); graph.addAttr("oneColorNode2", oneColorNode2.build()); const oneColorNode3 = graph.newAttrBuilder(); oneColorNode3.addColor("#455A64"); graph.addAttr("oneColorNode3", oneColorNode3.build()); const oneColorNode4 = graph.newAttrBuilder(); oneColorNode4.addColor("#FF6F00"); graph.addAttr("oneColorNode4", oneColorNode4.build()); const centerNodeAttr = graph.newAttrBuilder(); centerNodeAttr.addColor("white"); centerNodeAttr.addStyle("filled"); centerNodeAttr.addFillcolor("#0097A7"); centerNodeAttr.addFontcolor("white"); centerNodeAttr.addFixedSize(true); graph.addAttr("centerNodeAttr", centerNodeAttr.build()); const n1NodeAttr = graph.newAttrBuilder(); n1NodeAttr.addColor("white"); n1NodeAttr.addStyle("filled"); n1NodeAttr.addFillcolor("#FFA000"); n1NodeAttr.addFontcolor("white"); graph.addAttr("n1NodeAttr", n1NodeAttr.build()); const n3NodeAttr = graph.newAttrBuilder(); n3NodeAttr.addColor("white"); n3NodeAttr.addStyle("filled"); n3NodeAttr.addFillcolor("#C2185B"); n3NodeAttr.addFontcolor("white"); graph.addAttr("n3NodeAttr", n3NodeAttr.build()); graph.node("n1", "n1NodeAttr", "Tercero\\n [ctercero]"); graph.node("n2", "oneColorNode", "País\\n [ctiponac]"); graph.node("n3", "n3NodeAttr", "Contactos\\n [ccontact]"); graph.node("n4", "oneColorNode2", "Idioma\\n [ctipoidi]"); graph.node("n5", "oneColorNode3", "Zona fiscal\\n [ctax_zone]"); graph.node("n6", "centerNodeAttr", "Empresa\\n [cempresa]"); graph.node("n7", "oneColorNode4", "Calendario\\n [ccalendah]"); graph.node("n8", "oneColorNode", "Divisa\\n [cmonedas]"); graph.node("n9", "oneColorNode", "Cambio\\n [ctipocam]"); graph.node("n10", "oneColorNode", "Plan\\n contable\\n [cplacont]"); graph.node("n11", "oneColorNode", "Estado\\n efectos\\n [cefecest]"); const r1 = graph.newRankBuilder("same"); r1.addNode("n1"); r1.addNode("n2"); r1.addNode("n3"); r1.addNode("n4"); r1.addNode("n5"); graph.addRank(r1); const r2 = graph.newRankBuilder("same"); r2.addNode("n6"); graph.addRank(r2); const r3 = graph.newRankBuilder("same"); r3.addNode("n7"); r3.addNode("n8"); r3.addNode("n9"); r3.addNode("n10"); r3.addNode("n11"); graph.addRank(r3); graph.edge("n1", "n6"); graph.edge("n2", "n6"); graph.edge("n3", "n6"); graph.edge("n4", "n6"); graph.edge("n5", "n6"); graph.edge("n7", "n6"); graph.edge("n8", "n6"); graph.edge("n9", "n6"); graph.edge("n10", "n6"); graph.edge("n6", "n11", "edgeAAttr");
6 Workflow
Copy
digraph { rankdir="TB"; splines=ortho; nodesep=2 node [shape=box fontname="Arial" fontsize="10" fixedsize="true"]; cuenta_1 [label="Cuenta \n Financiera", color="#455A64"; style="filled"; fillcolor="#0097A7"; fontcolor="white"; width="1.2" height=".5"] cuenta_2 [label="Cuenta \n Depósito", color="#455A64"; style="filled"; fillcolor="#FFA000"; fontcolor="black"; width="1.2" height=".5"]; numero_1 [label="--------- x --------- \n 572_2\n579xxx \n --------- x --------- "; width="1.2" height=".7" fontsize="10"] numero_2 [label="--------- x --------- \n572_1 \n 579xxx \n --------- x ---------"; width="1.2" height=".7" fontsize="10"] numero_int_1 [label="--------- x --------- \n572_2 \n 579xxx \n --------- x ---------"; width="1.2" height=".7" fontsize="10"] numero_int_2 [label="--------- x --------- \n 572_1\n579xxx \n --------- x --------- "; width="1.2" height=".7" fontsize="10"] numero_int_3 [label="--------- x --------- \n 572_1\n579xxx \n --------- x --------- "; width="1.2" height=".7" fontsize="10" color="grey"] cuenta_1 -> cuenta_2 cuenta_1 -> numero_2 [label="Operación\n Flujo" fontname="Arial" fontsize="10"] cuenta_2 -> numero_1 [label="Operación\n Flujo" fontname="Arial" fontsize="10"] numero_1 -> numero_int_1 [label="Operación\n Flujo" fontname="Arial" fontsize="10"] numero_2 -> numero_int_2 [label="Operación\n Flujo" fontname="Arial" fontsize="10"] numero_int_2 -> numero_int_3 [style="dashed" label="Operación\n Flujo\n Interés Préstamo" fontname="Arial" fontsize="10" color="grey"] { rank=same; cuenta_1; cuenta_2;} { rank=same; numero_int_1; numero_int_2;} }
Copy
let graph = new Ax.graph.GraphVizBuilder(); graph.lineStyle("ortho"); graph.nodeSeparation(2); graph.graphDirection("TB"); const defaultNodeAttr = graph.newAttrBuilder(); defaultNodeAttr.addShape("box"); defaultNodeAttr.addFontName("Arial"); defaultNodeAttr.addFontSize(10); defaultNodeAttr.addFixedSize(true); graph.addDefaultNodeAttr(defaultNodeAttr.build()); const opFluEdgeAttr = graph.newAttrBuilder(); opFluEdgeAttr.addLabel("Operación\\n Flujo"); opFluEdgeAttr.addFontName("Arial"); opFluEdgeAttr.addFontSize(10); graph.addAttr("opFluEdgeAttr", opFluEdgeAttr.build()); const opFluIpEdgeAttr = graph.newAttrBuilder(); opFluIpEdgeAttr.addLabel("Operación\\n Flujo\\n Interés Préstamo"); opFluIpEdgeAttr.addStyle("dashed"); opFluIpEdgeAttr.addFontName("Arial"); opFluIpEdgeAttr.addFontSize(10); opFluIpEdgeAttr.addColor("grey"); graph.addAttr("opFluIpEdgeAttr", opFluIpEdgeAttr.build()); const nniNodeAttr = graph.newAttrBuilder(); nniNodeAttr.addWidth(1.1); nniNodeAttr.addHeight(0.7); nniNodeAttr.addFontSize(10); graph.addAttr("nniNodeAttr", nniNodeAttr.build()); const ni3NodeAttr = graph.newAttrBuilder(); ni3NodeAttr.addWidth(1.1); ni3NodeAttr.addHeight(0.7); ni3NodeAttr.addFontSize(10); ni3NodeAttr.addColor("grey"); graph.addAttr("ni3NodeAttr", ni3NodeAttr.build()); const c1NodeAttr = graph.newAttrBuilder(); c1NodeAttr.addWidth(1.2); c1NodeAttr.addHeight(0.5); c1NodeAttr.addFontcolor("white"); c1NodeAttr.addColor("#455A64"); c1NodeAttr.addStyle("filled"); c1NodeAttr.addFillcolor("#0097A7"); graph.addAttr("c1NodeAttr", c1NodeAttr.build()); const c2NodeAttr = graph.newAttrBuilder(); c2NodeAttr.addWidth(1.2); c2NodeAttr.addHeight(0.5); c2NodeAttr.addFontcolor("black"); c2NodeAttr.addColor("#455A64"); c2NodeAttr.addStyle("filled"); c2NodeAttr.addFillcolor("#FFA000"); graph.addAttr("c2NodeAttr", c2NodeAttr.build()); graph.node("c1", "c1NodeAttr", "Cuenta \\n Financiera"); graph.node("c2", "c2NodeAttr", "Cuenta \\n Depósito"); graph.node("n1", "nniNodeAttr", "--------- x --------- \\n 572_2\\n579xxx \\n --------- x --------- "); graph.node("n2", "nniNodeAttr", "--------- x --------- \\n572_1 \\n 579xxx \\n --------- x ---------"); graph.node("ni1", "nniNodeAttr", "--------- x --------- \\n572_2 \\n 579xxx \\n --------- x ---------"); graph.node("ni2", "nniNodeAttr", "--------- x --------- \\n 572_1\\n579xxx \\n --------- x --------- "); graph.node("ni3", "ni3NodeAttr", "--------- x --------- \\n 572_1\\n579xxx \\n --------- x --------- "); const r1 = graph.newRankBuilder("same"); r1.addNode("c1"); r1.addNode("c2"); graph.addRank(r1); const r2 = graph.newRankBuilder("same"); r2.addNode("ni1"); r2.addNode("ni2"); graph.addRank(r2); graph.edge("c1", "c2"); graph.edge("c1", "n2", "opFluEdgeAttr"); graph.edge("c2", "n1", "opFluEdgeAttr"); graph.edge("n1", "ni1", "opFluEdgeAttr"); graph.edge("n2", "ni2", "opFluEdgeAttr"); graph.edge("ni2", "ni3", "opFluIpEdgeAttr");
7 Expression Flow
Copy
digraph axionalterm { ordering=out compound=true overlap=scale; splines=ortho; rankdir=LR graph[ fontname="Verdana", shape="tab"]; node [shape=record, fontsize=12, fontname="Verdana", style=filled, fillcolor="#FAFAFA" ]; edge [style=dashed]; origin [style=invis] form [label="Form - UI"] term [label="Terminal\nEngine", shape=cylinder] eval [label="Eval\nExpression", shape=circle] col_hide_cond [label = "Hide Condition \napps_wms_formatl \ncol_hide_cond", style=filled, fillcolor="#90CAF9"] group_cond [label = "Hide Condition\napps_wms_formatg\ngroup_cond", style=filled, fillcolor="#B39DDB"] button_cond [label = "Button condition\napps_wms_formatg_buttons\nbutton_cond", style=filled, fillcolor="#EF9A9A"] sql_action_exec [label = "Statements \napps_wms_formath\nsql_action_exec", style=filled, fillcolor="#80CBC4" ] sql_action_cancel [label = "Interrupt \napps_wms_formath\nsql_action_cancel", style=filled, fillcolor="#80CBC4"] col_after_sql [label = "Interrupt \napps_wms_formatl\ncol_after_sql", style=filled, fillcolor="#90CAF9"] col_default [label = "Default value \napps_wms_formatl \ncol_default", style=filled, fillcolor="#90CAF9"] sref_help_cond [label = "Validate Condition\napps_wms_formatl \nsref_help_cond", style=filled, fillcolor="#90CAF9"] col_check_exp [label = "Check Condition\napps_wms_formatl \ncol_check_exp", style=filled, fillcolor="#90CAF9"] button_action [label = "Button action\napps_wms_formatg_buttons\n button_action", style=filled, fillcolor="#EF9A9A"] parser1 [label="Variable Parser\nEngine", shape=cylinder] parser2 [label="Variable Parser\nEngine\n@", shape=cylinder] soap[label="http/SOAP"] jdbc[label="JDBC", shape=cylinder, style=filled, fillcolor="#0277BD", fontcolor="#FFFFFF"] LOCAL[label="LOCAL/JAVA-UEL"] value [label="Value"] subgraph cluster_user { label="User" style=filled fillcolor="#EEEEEE" shape=polygon origin } subgraph cluster_frontend { label="Terminal Server" style=filled fillcolor="#EEEEEE" newrank=true form term eval parser1 parser2 LOCAL value subgraph cluster_vars { style=filled fillcolor="#CFD8DC" label="Form Variables" rank=same subgraph cluster_UEL_SQL_DATA { style=filled fillcolor="#FAFAFA" label = "UEL/SQLDATA" col_default } subgraph cluster_UEL_SQL_EXPR { style=filled fillcolor="#FAFAFA" label = "UEL/SQLEXPR" col_check_exp } subgraph cluster_SQL_EXISTS { style=filled fillcolor="#FAFAFA" label = "SQLEXISTS" sref_help_cond } subgraph cluster_UEL { style=filled fillcolor="#FAFAFA" label = "UEL" button_cond group_cond col_hide_cond } subgraph cluster_SQL_XSQL { style=filled fillcolor="#FAFAFA" label = "SQL/XSQL" col_after_sql button_action sql_action_exec sql_action_cancel } } } subgraph cluster_backend { style=filled fillcolor="#EEEEEE" label="Backend Server" newrank=true soap jdbc } origin -> form[label="User input"] form -> term term -> eval eval -> sref_help_cond[lhead=cluster_SQL_EXISTS] eval -> sql_action_exec[lhead=cluster_SQL_XSQL] eval -> group_cond[lhead=cluster_UEL] eval -> col_default[lhead=cluster_UEL_SQL_DATA] eval -> col_check_exp[lhead=cluster_UEL_SQL_EXPR] sql_action_exec -> parser2[ltail=cluster_SQL_XSQL, color="#FF0000"] group_cond -> parser1[ltail=cluster_UEL color="#0000FF"] sref_help_cond -> parser2 [color="#FF0000"] col_check_exp -> parser1 [color="#0000FF"] col_check_exp -> parser2 [color="#FF0000"] col_default -> parser1 [color="#0000FF"] col_default -> parser2 [color="#FF0000"] parser1 -> LOCAL [color="#0000FF"] parser2 -> soap [color="#FF0000"] soap -> jdbc [color="#FF0000"] LOCAL -> value jdbc -> value value -> term term->form }
8 Lines
Copy
digraph ladder { ranksep=".35"; nodesep=".1"; # Define the defaults graph [fontname="'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif"] ; node [shape=point, color="#8699a3", fontsize=10 fontname="'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif"] edge [dir=none fontsize=10 fontname="'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif", fontcolor="#34495e", arrowsize=0.7] # Column labels user [shape=rect, style="rounded,filled", fillcolor="#3ab882", color="#3ab882", fontcolor="#FFFFFF", label="User"] browser [shape=rect, style="rounded,filled", fillcolor="#8e7cc3", color="#8e7cc3", fontcolor="#FFFFFF", label="Browser"] server [shape=rect, style="rounded,filled", fillcolor="#fcb738", color="#fcb738", fontcolor="#FFFFFF", label="Server"] database [shape=rect, style="rounded,filled", fillcolor="#e06666", color="#e06666", fontcolor="#FFFFFF", label="Database"] # Draw the 4 column headings, no line { rank=same; edge[style=invis] user -> browser -> server -> database } # Draw vertical columns user -> u1 [style=invis] u1 -> u2 -> u3 -> u4 -> u5 -> u6 -> u7 -> u8 -> u9 -> u10 -> u11 -> u12 -> u13 -> u14 -> u15 -> u16 -> u17 -> u18 -> u19 -> u20 -> u21 -> u22 [weight=1000, color="#8699a3", style="dotted"] browser -> b1 [style=invis] b1 -> b2 -> b3 -> b4 -> b5 -> b6 -> b7 -> b8 -> b9 -> b10 -> b11 -> b12 -> b13 -> b14 -> b15 -> b16 -> b17 -> b18 -> b19 -> b20 -> b21 -> b22 [weight=1000, color="#8699a3", style="dotted"] server -> s1 [style=invis] s1 -> s2 -> s3 -> s4 -> s5 -> s6 -> s7 -> s8 -> s9 -> s10 -> s11 -> s12 -> s13 -> s14 -> s15 -> s16 -> s17 -> s18 -> s19 -> s20 -> s21 -> s22 [weight=1000, color="#8699a3", style="dotted"] database -> d1 [style=invis] d1 -> d2 -> d3 -> d4 -> d5 -> d6 -> d7 -> d8 -> d9 -> d10 -> d11 -> d12 -> d13 -> d14 -> d15 -> d16 -> d17 -> d18 -> d19 -> d20 -> d21 -> d22 [weight=1000, color="#8699a3", style="dotted"] # Now each step in the ladder { rank=same; u2 -> b2 [dir=forward label="access URL" color="#3ab882" ] } { rank=same; b3 -> s3 [dir=forward label="request form" color="#8e7cc3" ] } { rank=same; b4 -> s4 [dir=back label="return form\n(including helper relations)" color="#fcb738" ] } { rank=same; u5 -> b5 [dir=back label="display form" color="#8e7cc3" ] } { rank=same; u6 -> b6 [dir=forward label="input form fields" color="#3ab882" ] } b7 -> b8 [dir=forward label="evaluate dynamic\nfield helpers" color="#8e7cc3"] { rank=same; u9 -> b9 [dir=forward label="while typing on\na field with helper" color="#3ab882" ] } { rank=same; b10 -> s10 [dir=forward label="request matching data" color="#8e7cc3" ] } { rank=same; s11 -> d11 [dir=forward label="execute autocomplete\nSQL statement" color="#fcb738" ] } { rank=same; s12 -> d12 [dir=back label="return matching datalist\nas ResultSet" color="#e06666" ] } { rank=same; b13 -> s13 [dir=back label="return matching data\nas JSON Array" color="#fcb738" ] } { rank=same; u14 -> b14 [dir=back label="display coincidences" color="#8e7cc3" color="#8e7cc3" ] } { rank=same; u15 -> b15 [dir=forward label="ends typing on\nthe field with helper" color="#3ab882" ] } { rank=same; b16 -> s16 [dir=forward label="request data validation" color="#8e7cc3" ] } { rank=same; s17 -> d17 [dir=forward label="execute verification\nSQL statement" color="#fcb738" ] } { rank=same; s18 -> d18 [dir=back label="return matching row\nas ResultSet" color="#e06666" ] } { rank=same; b19 -> s19 [dir=back label="return validate result and \nrelated data as JSON" color="#fcb738" ] } b20 -> b21 [dir=forward label="Fill related data" color="#8e7cc3" ] { rank=same; u22 -> b22 [dir=back label="display validation result" color="#8e7cc3" ] } }
9 Tasklist example
This is an optional brief description of the task list
Date | Module | Title | Description | Status | |
---|---|---|---|---|---|
06-11-2019 | SD | Ventas y distribución | This is a brief description of the task | Approved | |
This is an example with a status="Approved". |
Copy
<svg:svg height="130" width="500"> <svg:defs> <svg:linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%"> <svg:stop offset="0%" style="stop-color:rgb(82,45,168);stop-opacity:1" /> <svg:stop offset="100%" style="stop-color:rgb(223,64,251);stop-opacity:1" /> </svg:linearGradient> </svg:defs> <svg:ellipse cx="20" cy="20" rx="20" ry="20" fill="url(#grad1)" /> <svg:text fill="#ffffff" font-size="15" font-family="Verdana" x="17" y="25">1</svg:text> Sorry, your browser does not support inline SVG. </svg:svg>
10 Clusters same rank
Copy
digraph { ranksep="0.5"; nodesep="1"; #rankdir="LR"; newrank=true; # Define the defaults graph [fontname="'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif"] ; node [shape=note, width=1.2, fontsize=10 fontname="Arial"] edge [arrowsize="0.7"] # Nodes Pedido_compras [ style="filled", fillcolor="#e0e0e0", color="#616161", fontcolor="black", label="Pedido \n de compras"] #Pedido_arrow [ shape=rarrow, style="filled", fillcolor="#e0e0e0", color="#616161", fontcolor="black", label=" "] Pedido_ventas [ style="filled", fillcolor="#e0e0e0", color="#616161", fontcolor="black", label="Pedido \n de ventas"] Albaran_ventas [ style="filled", fillcolor="#e0e0e0", color="#616161", fontcolor="black", label="Albarán \n de ventas"] #Albaran_arrow [ shape=rarrow, style="filled", fillcolor="#e0e0e0", color="#616161", fontcolor="black", label=" "] Albaran_compras [ style="filled", fillcolor="#4CAF50", color="#616161", fontcolor="white", label="Albarán \n de compras"] Factura_ventas [ style="filled", fillcolor="#e0e0e0", color="#616161", fontcolor="black", label="Factura \n de ventas"] #Factura_arrow [ shape=rarrow, style="filled", fillcolor="#e0e0e0", color="#616161", fontcolor="black", label=" "] Factura_compras [ style="filled", fillcolor="#e0e0e0", color="#616161", fontcolor="black", label="Factura \n de compras"] subgraph clusterA { label="Empresa 1" graph[style=dashed color="#616161" fontsize=8] Pedido_compras, Albaran_compras, Factura_compras } subgraph clusterB { label="Empresa 2" graph[style=dashed color="#616161" fontsize=8] Pedido_ventas, Albaran_ventas, Factura_ventas } {rank=same; Pedido_compras; Pedido_ventas } {rank=same; Albaran_compras; Albaran_ventas } {rank=same; Factura_ventas; Factura_compras } Pedido_compras -> Pedido_ventas Albaran_compras -> Albaran_ventas [dir="back"] Factura_compras -> Factura_ventas [dir="back"] Pedido_ventas -> Albaran_ventas Albaran_ventas -> Factura_ventas Pedido_compras -> Albaran_compras [style="dashed" arrowhead="none"] Albaran_compras -> Factura_compras [style="dashed" arrowhead="none"] }
Copy
let graph = new Ax.graph.GraphVizBuilder(); graph.rankSeparation(0.5); graph.edgeSeparation(1); graph.newRankDir(true); //set default attributes const defaultGraph = graph.newAttrBuilder(); defaultGraph.addFontName("'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif"); graph.addDefaultGraphAttr(defaultGraph.build()); const defaultNode = graph.newAttrBuilder(); defaultNode.addShape("note"); defaultNode.addFontSize(10); defaultNode.addFontName("Arial"); graph.addDefaultNodeAttr(defaultNode.build()); const defaultEdge = graph.newAttrBuilder(); defaultEdge.addArrowSize(0.7); graph.addDefaultEdgeAttr(defaultEdge.build()); //set attributes const nodeAttr = graph.newAttrBuilder(); nodeAttr.addStyle("filled"); nodeAttr.addFillcolor("#e0e0e0"); nodeAttr.addColor("#616161"); nodeAttr.addFontcolor("black"); graph.addAttr("nodeAttr", nodeAttr.build()); const albComp = graph.newAttrBuilder(); albComp.addStyle("filled"); albComp.addFillcolor("#4CAF50"); albComp.addColor("#616161"); albComp.addFontcolor("white"); graph.addAttr("albComp", albComp.build()); const subGraphAttr = graph.newAttrBuilder(); subGraphAttr.addStyle("dashed"); subGraphAttr.addColor("#616161"); subGraphAttr.addFontSize(8); graph.addAttr("subGraph", subGraphAttr.build()); const edgeDir = graph.newAttrBuilder(); edgeDir.addDir("back"); graph.addAttr("edgeDir", edgeDir.build()); const edgeArrow = graph.newAttrBuilder(); edgeArrow.addArrowHead("none"); edgeArrow.addStyle("dashed"); graph.addAttr("edgeArrow", edgeArrow.build()); //add nodes in the graph graph.node("Pedido_compras", "nodeAttr", "Pedido de compras"); graph.node("Pedido_ventas", "nodeAttr", "Pedido de ventas"); graph.node("Albaran_ventas", "nodeAttr", "Albarán de ventas"); graph.node("Albaran_compras", "albComp", "Albarán de compras"); graph.node("Factura_ventas", "nodeAttr", "Factura de ventas"); graph.node("Factura_compras", "nodeAttr", "Factura de compras"); // create a subgraph and add nodes and attribute const sg_1 = graph.newSubGraphBuilder("clusterA"); sg_1.addNode("Pedido_compras"); sg_1.addNode("Albaran_compras"); sg_1.addNode("Factura_compras"); sg_1.setAttrSubGraph("subGraph"); sg_1.setLabel("Empresa 1"); graph.addSubGraph(sg_1); const sg2 = graph.newSubGraphBuilder("cluster_2"); sg2.addNode("Pedido_ventas"); sg2.addNode("Albaran_ventas"); sg2.addNode("Factura_ventas"); sg2.setAttrSubGraph("subGraph"); sg2.setLabel("Empresa 2"); graph.addSubGraph(sg2); //Rank example const r = graph.newRankBuilder("same"); r.addNode("Pedido_compras"); r.addNode("Pedido_ventas"); graph.addRank(r); const r2 = graph.newRankBuilder("same"); r2.addNode("Albaran_compras"); r2.addNode("Albaran_ventas"); graph.addRank(r2); const r3 = graph.newRankBuilder("same"); r3.addNode("Factura_ventas"); r3.addNode("Factura_compras"); graph.addRank(r3); //set the edge of the graph graph.edge("Pedido_compras", "Pedido_ventas"); graph.edge("Albaran_compras", "Albaran_ventas", "edgeDir"); graph.edge("Factura_compras", "Factura_ventas", "edgeDir"); graph.edge("Pedido_ventas", "Albaran_ventas"); graph.edge("Albaran_ventas", "Factura_ventas"); graph.edge("Pedido_compras", "Albaran_compras", "edgeArrow"); graph.edge("Albaran_compras", "Factura_compras", "edgeArrow");
11 Document layout
Copy
digraph G { labelloc = t // t: splines=ortho; newrank=true; edge [style=dashed]; node [fontname="Arial"] rankdir=TB subgraph cluster_pedido { label="ACUERDO DE COMPRA" style=filled fillcolor="#B3E5FC" fontname="Arial" fontsize="10" subgraph cluster_peden { style=filled fillcolor="#CFD8DC" label=" Cabecera " a[style="invis"; width="3.2" height="0.2"] } subgraph cluster_pedlin { style=filled fillcolor="#FAFAFA" label = " Líneas de artículos \n-----------------------" b[style="invis" ] } subgraph cluster_pedfam { style=filled fillcolor="#FAFAFA" label = " Líneas de familias \n-----------------------" c[style="invis"] } } a -> b [style="invis"] a -> c [style="invis"] } }
12 Direct SVG graph
Copy
<svg version="1.1" x="0px" y="0px" viewBox="0 0 310.679 310.679" style="enable-background:new 0 0 310.679 310.679;" xml:space="preserve"> <g> <path style="fill:#009638;" d="M193.208,220.93l39.811,68.956c46.424-26.861,77.66-77.054,77.66-134.546h-79.612 C231.066,183.367,215.84,207.836,193.208,220.93z"/> <path style="fill:#FF6D68;" d="M155.339,79.614c13.797,0,26.728,3.691,37.869,10.136l39.811-68.956 C210.168,7.573,183.638,0.001,155.338,0.001c-28.299,0-54.828,7.571-77.679,20.792l39.812,68.956 C128.611,83.305,141.544,79.614,155.339,79.614z"/> <path style="fill:#FFC843;" d="M233.019,20.794L193.208,89.75c22.631,13.095,37.858,37.563,37.858,65.591h79.612 C310.679,97.848,279.442,47.655,233.019,20.794z"/> <path style="fill:#BF534F;" d="M117.471,89.75L77.659,20.794C31.235,47.655,0,97.848,0,155.34h79.612 C79.612,127.313,94.84,102.844,117.471,89.75z"/> <path style="fill:#0071CE;" d="M79.612,155.34H0c0,57.492,31.235,107.685,77.658,134.545l39.812-68.956 C94.839,207.835,79.612,183.367,79.612,155.34z"/> <path style="fill:#5E96DC;" d="M155.339,231.066c-13.796,0-26.729-3.691-37.869-10.137l-39.812,68.956 c22.852,13.222,49.381,20.793,77.68,20.793c28.3,0,54.831-7.571,77.68-20.793l-39.811-68.956 C182.068,227.376,169.136,231.066,155.339,231.066z"/> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> </svg>
13 Auto edges
Copy
digraph D { rankdir=TB compound=true; overlap=scale; # (try to) stretch everything if edges overlap AStore1 [style=filled; color="#BDBDBD"]; MStore1 [style=filled; color="#BDBDBD"]; subgraph cluster_auto { label="Recount" color="#00000" fontcolor="#00000" fillcolor="#FBC02D"; style=filled; AStore1; AStore1 [label="Store"]; } subgraph cluster_manual { label="Inventory" color="#00000" fontcolor="#00000" fillcolor="#CDDC39"; style=filled; MStore1; MStore1 [label="Store"]; } AStore1 -> AStore1 [color="#757575"; label="Expected quantity\n informed"]; MStore1 -> MStore1 [color="#757575" label="Expected quantity\n NOT informed"]; }
Copy
let graph = new Ax.graph.GraphVizBuilder(); graph.graphDirection("TB"); graph.compound(true); graph.overlapStyle("scale"); const astroreAttr = graph.newAttrBuilder(); astroreAttr.addColor("#BDBDBD"); astroreAttr.addStyle("filled"); graph.addAttr("astroreAttr", astroreAttr.build()); const astroreEdgeAttr = graph.newAttrBuilder(); astroreEdgeAttr.addColor("#757575"); astroreEdgeAttr.addLabel("Expected quantity\\n informed"); graph.addAttr("astroreEdgeAttr", astroreEdgeAttr.build()); const mstroreEdgeAttr = graph.newAttrBuilder(); mstroreEdgeAttr.addColor("#757575"); mstroreEdgeAttr.addLabel("Expected quantity\\n NOT informed"); graph.addAttr("mstroreEdgeAttr", mstroreEdgeAttr.build()); const subGraph1Attr = graph.newAttrBuilder(); subGraph1Attr.addColor("#00000"); subGraph1Attr.addFontcolor("#00000"); subGraph1Attr.addFillcolor("#FBC02D"); subGraph1Attr.addStyle("filled"); graph.addAttr("subGraph1", subGraph1Attr.build()); const subGraph2Attr = graph.newAttrBuilder(); subGraph2Attr.addColor("#00000"); subGraph2Attr.addFontcolor("#00000"); subGraph2Attr.addFillcolor("#CDDC39"); subGraph2Attr.addStyle("filled"); graph.addAttr("subGraph2", subGraph2Attr.build()); graph.node("AStore1", "astroreAttr", "Store"); graph.node("MStore1", "astroreAttr", "Store"); graph.edge("AStore1", "AStore1", "astroreEdgeAttr"); graph.edge("MStore1", "MStore1", "mstroreEdgeAttr"); const sg_1 = graph.newSubGraphBuilder("clusterA"); sg_1.addNode("AStore1"); sg_1.setAttrSubGraph("subGraph1"); sg_1.setLabel("Recount"); graph.addSubGraph(sg_1); const sg_2 = graph.newSubGraphBuilder("clusterB"); sg_2.addNode("MStore1"); sg_2.setAttrSubGraph("subGraph2"); sg_2.setLabel("Inventory"); graph.addSubGraph(sg_2);
14 Example horizontal diagram
Copy
15 Directed graphs
Copy
digraph { main->parse->execute; main->init; main->cleanup; execute->make_string; execute->printf init->make_string; main->printf; execute->compare; }
Copy
let graph = new Ax.graph.GraphVizBuilder(); graph.edge("main", "init"); graph.edge("main", "parse"); graph.edge("main", "cleanup"); graph.edge("main", "printf"); graph.edge("init", "make_string"); graph.edge("parse", "execute"); graph.edge("execute", "make_string"); graph.edge("execute", "printf"); graph.edge("execute", "compare");
16 Node shapes and colors
GraphViz is incredibly flexible. There are 59 built-in node shapes available, and you can also edit colors and styles however you like:
Copy
digraph G { size ="4,4"; main [shape=doubleoctagon]; main -> parse [weight=8]; parse -> execute; main -> init [style=dotted]; main -> cleanup; execute -> { make_string; printf} init -> make_string; edge [color=red]; // so is this main -> printf [style=bold,label="100 times"]; make_string [label="make a\nstring"]; node [shape=star,style=filled,color=".7 .3 1.0"]; execute -> compare; }
Copy
let graph = new Ax.graph.GraphVizBuilder(); const starNode = graph.newAttrBuilder(); starNode.addShape("star"); starNode.addStyle("filled"); starNode.addColor("violet"); graph.addAttr("starNode", starNode.build()); const redEdgeAttr = graph.newAttrBuilder(); redEdgeAttr.addColor("red"); graph.addAttr("redEdgeAttr", redEdgeAttr.build()); const timesEdgeAttr = graph.newAttrBuilder(); timesEdgeAttr.addColor("red"); timesEdgeAttr.addLabel("100 times"); graph.addAttr("timesEdgeAttr", timesEdgeAttr.build()); const dottedEdgeAttr = graph.newAttrBuilder(); dottedEdgeAttr.addStyle("dashed"); graph.addAttr("dottedEdge", dottedEdgeAttr.build()); const mainAttr = graph.newAttrBuilder(); mainAttr.addShape("doubleoctagon"); graph.addAttr("mainAttr", mainAttr.build()); graph.node("make_string", "", "mkae a\\nstring"); graph.node("main", "mainAttr"); graph.node("compare", "starNode"); graph.edge("main", "parse"); graph.edge("main", "init", "dottedEdge"); graph.edge("main", "cleanup"); graph.edge("main", "printf", "timesEdgeAttr"); graph.edge("parse", "execute"); graph.edge("execute", "make_string"); graph.edge("execute", "printf"); graph.edge("execute", "compare", "redEdgeAttr"); graph.edge("init", "make_string");
17 Subgraphs
Subgraphs are an important tool in GraphViz that are best used to illustrate clusters of nodes.
Copy
digraph { subgraph cluster_0 { label="Subgraph A"; a -> b; b -> c; c -> d; } subgraph cluster_1 { label="Subgraph B"; a -> f; f -> c; } }
Copy
let graph = new Ax.graph.GraphVizBuilder(); graph.edge("a", "f"); graph.edge("a", "b"); graph.edge("b", "c"); graph.edge("c", "d"); graph.edge("f", "c"); const sg_1 = graph.newSubGraphBuilder("clusterA"); sg_1.addNode("a"); sg_1.addNode("b"); sg_1.addNode("c"); sg_1.addNode("d"); sg_1.setLabel("Subgraph A"); graph.addSubGraph(sg_1); const sg_2 = graph.newSubGraphBuilder("clusterB"); sg_2.addNode("f"); sg_2.setLabel("Subgraph B"); graph.addSubGraph(sg_2);
18 Record-based nodes
In contrast the polygon or shape based nodes we see above, you can create tabular “record” nodes that are split into several blocks.
Copy
digraph structs { node[shape=record] struct1 [label="<f0> left|<f1> middle|<f2> right"]; struct2 [label="{<f0> one|<f1> two}" shape=Mrecord]; struct3 [label="hello\nworld |{ b |{c|<here> d|e}| f}| g | h"]; struct1:f1 -> struct2:f0; struct1:f0 -> struct3:f1; }