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

}

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");

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
    
}

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");

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"];
}

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");

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

    }

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 
    
    }

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

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");

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


}

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");

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

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");

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


}

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" ]  }
    
}

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

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"]
}

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");

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"]
    }
}

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

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"];
    
}

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

digraph {
  main->parse->execute;
  main->init;
  main->cleanup;
  execute->make_string;
  execute->printf
  init->make_string;
  main->printf;
  execute->compare;
}

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");

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

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");

digraph {
  subgraph cluster_0 {
    label="Subgraph A";
    a -> b;
    b -> c;
    c -> d;
  }

  subgraph cluster_1 {
    label="Subgraph B";
    a -> f;
    f -> c;
  }
}

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

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