|
| 1 | +\documentclass[tikz,dvisvgm,border=10pt]{standalone} |
| 2 | +\usetikzlibrary{shapes.geometric,shapes.symbols,shapes.callouts,shapes.multipart,shapes.misc,arrows,positioning,fit,backgrounds,shadows} |
| 3 | + |
| 4 | +\begin{document} |
| 5 | +\begin{tikzpicture}[ |
| 6 | + % Define styles for nodes with enhanced colors |
| 7 | + doc/.style={draw, minimum width=5cm, minimum height=2cm, align=center, fill=blue!20, text=blue!80!black, font=\bfseries, rounded corners=3mm, drop shadow}, |
| 8 | + container/.style={draw=blue!50!black, fill=blue!10, fill opacity=0.15, inner sep=10mm, rounded corners=8mm, thick, dashed}, |
| 9 | + package/.style={draw, fill=blue!5, fill opacity=0.7, inner sep=3mm, rounded corners, text=blue!60!black, thick}, |
| 10 | + process/.style={draw, minimum width=2cm, minimum height=1cm, align=center, fill=blue!10, text=blue!60!black, font=\small\sffamily, rounded corners=2mm}, |
| 11 | + cylnode/.style={draw, cylinder, shape border rotate=90, aspect=0.3, minimum height=1cm, minimum width=2cm, align=center, fill=cyan!30, text=cyan!60!black, font=\small\sffamily}, |
| 12 | + dashboard/.style={circle, draw, minimum size=1cm, fill=green!20, text=green!60!black, font=\small\sffamily\bfseries}, |
| 13 | + document/.style={draw, shape=tape, tape bend top=none, minimum width=2cm, minimum height=1cm, align=center, dashed, fill=purple!10, text=purple!70!black, font=\small\sffamily\itshape}, |
| 14 | + thick_arrow/.style={->, line width=1mm, draw=blue!70!black}, |
| 15 | + arrow/.style={->, >=stealth, draw=gray!70!black}, |
| 16 | + title/.style={font=\bfseries\sffamily, align=center, text width=4cm, text=blue!70!black}, |
| 17 | + label/.style={font=\small\sffamily\itshape, inner sep=2pt, text=purple!80!black}, |
| 18 | + filename/.style={font=\small\sffamily\itshape, text=orange!70!brown} |
| 19 | +] |
| 20 | + |
| 21 | +% Add a background for the entire diagram |
| 22 | +\begin{scope}[on background layer] |
| 23 | + \fill[rounded corners=10mm, gray!5] (-2,-8) rectangle (16,4.5); |
| 24 | +\end{scope} |
| 25 | + |
| 26 | +% Create environment steps first |
| 27 | +\node[dashboard] (checkout) at (5,0) {Git}; |
| 28 | +\node[process, below=0.8cm of checkout] (detect) {Detect\\Dependencies}; |
| 29 | +\node[process, below=0.8cm of detect] (setup) {Setup Environment\\(Python/R)}; |
| 30 | +\node[cylnode, below=0.8cm of setup] (cache) {Cache\\Environment}; |
| 31 | + |
| 32 | +% Environment connections |
| 33 | +\draw[arrow] (checkout) -- (detect); |
| 34 | +\draw[arrow] (detect) -- (setup); |
| 35 | +\draw[arrow] (setup) -- (cache); |
| 36 | + |
| 37 | +% Custom environment script - with label higher |
| 38 | +\node[document] (customenv) at ([xshift=-3cm]setup.west) {setup-env-ci.sh}; |
| 39 | +\draw[arrow, draw=purple!50!black] (customenv) -- (setup) node[pos=0.35, above=12pt, label] {Customize}; |
| 40 | + |
| 41 | +% Environment setup container with title above |
| 42 | +\node[title] at (checkout.north) [above=5mm] {Environment Setup \\\textcolor{orange!70!brown}{(global-env.yml)}}; |
| 43 | + |
| 44 | +% Use layers to put containers in the background - adjusted fit |
| 45 | +\begin{scope}[on background layer] |
| 46 | + \node[package, fill=blue!5] (env) [fit=(checkout) (detect) (setup) (cache) (customenv)] {}; |
| 47 | +\end{scope} |
| 48 | + |
| 49 | +% Create render steps first - explicitly aligned with env.east anchor |
| 50 | +\path (env.east) ++(3cm,0) coordinate (render_start); |
| 51 | +\node[process, fill=blue!20] (restore) at ([yshift=3cm]render_start) {Restore\\Environment}; |
| 52 | +\node[process] (quarto) at ([yshift=-0.8cm]restore.south) {Setup Quarto}; |
| 53 | +\node[process] (compile) at ([yshift=-0.8cm]quarto.south) {Render\\Documents}; |
| 54 | +\node[process] (artifact) at ([yshift=-0.8cm]compile.south) {Upload as\\Artifact}; |
| 55 | +\node[process, fill=green!30, text=green!60!black, font=\small\sffamily\bfseries] (deploy) at ([yshift=-0.8cm]artifact.south) {Deploy to\\GitHub Pages}; |
| 56 | + |
| 57 | +% Render connections |
| 58 | +\draw[arrow] (restore) -- (quarto); |
| 59 | +\draw[arrow] (quarto) -- (compile); |
| 60 | +\draw[arrow] (compile) -- (artifact); |
| 61 | +\draw[arrow] (artifact) -- (deploy); |
| 62 | + |
| 63 | +% Custom render script - with label higher and inverted direction |
| 64 | +\node[document] (customrender) at ([xshift=2.5cm]compile.east) {setup-render-ci.sh}; |
| 65 | +\draw[arrow, draw=purple!50!black] (customrender) -- (compile) node[pos=0.35, above=12pt, label] {Customize}; |
| 66 | + |
| 67 | +% Render and deploy container with title above |
| 68 | +\node[title] at (restore.north) [above=5mm] {Render \& Deploy \\\textcolor{orange!70!brown}{(publish-render.yml)}}; |
| 69 | + |
| 70 | +% Use layers to put containers in the background - adjusted fit |
| 71 | +\begin{scope}[on background layer] |
| 72 | + \node[package, fill=blue!10] (render) [fit=(restore) (quarto) (compile) (artifact) (deploy) (customrender)] {}; |
| 73 | +\end{scope} |
| 74 | + |
| 75 | +% Main flow connections |
| 76 | +\draw[thick_arrow] (env.east) -- (render.west |- env.east); |
| 77 | + |
| 78 | +% Finally create the main workflow container around everything |
| 79 | +\begin{scope}[on background layer] |
| 80 | + % Create invisible nodes to capture the title areas |
| 81 | + \node[opacity=0] (env_title_anchor) at ([yshift=10mm]checkout.north) {}; |
| 82 | + \node[opacity=0] (render_title_anchor) at ([yshift=10mm]restore.north) {}; |
| 83 | + |
| 84 | + % Make container fit these invisible nodes too, ensuring it goes high enough |
| 85 | + \node[container, fit=(env_title_anchor) (render_title_anchor) (env) (render)] (workflow_container) {}; |
| 86 | + |
| 87 | + % Place the title well above the container with colored filename |
| 88 | + \node[font=\bfseries\Large, text=blue!70!black, align=center] at ([yshift=10mm]workflow_container.north) {Main Workflow \\\textcolor{orange!70!brown}{(build.yml)}}; |
| 89 | +\end{scope} |
| 90 | + |
| 91 | +\end{tikzpicture} |
| 92 | +\end{document} |
0 commit comments