digraph G {
  compound=true;
  fontname="AVHershey Simplex";
  fontsize=16;
  bgcolor=black;
  color=white;
  fontcolor=white;
  dpi=300;
  

  node [shape=box; fontname="AVHershey Simplex"; fontsize=16;color=white;fontcolor=white];
  edge [fontname="AVHershey Simplex"; fontsize=16;color=white;fontcolor=white];

  pelican [label="Pelican", shape=none];
  
  subgraph cluster2 {
    rank=same;
    style=dotted;
    browser [label="Browser", shape=none];
    pagedjs [label="pagedjs", shape=none];
  }

  subgraph cluster0 {
    label="Content";
    style=dotted;
    content_markdown [label="Markdown"];
    content_images [label="Images"];
  }

  subgraph cluster1 {
    label="Style";
    style=dotted;
    styles_html [label="HTML templates"];
    styles_css [label="CSS Stylesheets"];
    styles_script [label="Javascripts"];
  }

  output_html [label="HTML"];

  output_pdf [label="PDF"];

  content_markdown -> pelican [ltail=cluster0];
  styles_css -> pelican [ltail=cluster1];
  
  pelican -> output_html;

  output_html -> browser;

  pagedjs -> browser [dir=both,label="  Paged.js manipulates the HTML,  \l  in the browser, to split the content   \l  into pages\l";labeldistance="2.0"];
  browser -> pagedjs;

  pagedjs -> output_pdf [ltail=cluster2;label="  Use print function of the\l  browser to make a PDF\l"];

}