• Diagrams

  • A Quarto tip a day - Diagrams

• This shows how to use fragments inside code/diagram segments: Fragment Layout Elements in Reveal.JS · quarto-dev/quarto-cli · Discussion #3685

• Non-quarto solutions:

  • Using code to generate graphs: GraphViz as figure when generated by R code · quarto-dev/quarto-cli · Discussion #5949
  • mapio/GraphvizAnim: A tool to create animated graph visualizations, based on graphviz.

Simplest way possible

• Multiple fragments one after the other with less and less invisible graph parts
  • style=invis: sum [label="∑", fillcolor="#27ae60", shape=circle, style=invis];¹

This makes everything invisible by default, uncommenting the lines makes the parts visible

digraph G {
    rankdir=LR;
    node [shape=circle, style=invis, fontcolor=white, fontsize=18, fillcolor="white", color="white"];
    edge [color="white", fontcolor="white"];
    graph [color="white"];
  
    
  subgraph cluster_1 {
    #label = "Inputs";
    // uncomment for visibility:
    node [fillcolor="#2c3e50", style="filled"]
    
    n0 [label=<1>];
    n1 [label=<x<SUB>1</SUB>>];
    n2 [label=<x<SUB>2</SUB>>];
    n3 [label=<x<SUB>n</SUB>>];

    { rank=same; n0; n1; n2; n3; }
  }
  
  subgraph arrows {
    // uncomment for visibility of arrows:
    edge [color="black", fontcolor="black"];
    node [style="filled", fillcolor="#27ae60"];
    
    
    n0 -> sum [label=<w<SUB>0</SUB>>];
    n1 -> sum [label=<w<SUB>1</SUB>>];
    n2 -> sum [label=<w<SUB>2</SUB>>];
    n3 -> sum [label=<w<SUB>n</SUB>>];
 
    sum [label="∑"];
  }
    
  subgraph end {
    // uncomment for visibility
    edge [color="black", fontcolor="black"];
    node [style="filled", fillcolor="#27ae60"];

    activation [label="∫", fillcolor="#f39c12", shape=circle];

    // Output node
    output [label="y", fillcolor="#8e44ad"];

    // Other edges
    sum -> activation;
    activation -> output;

   }

}