Keywords

begin calc code containers distance docs document Dupplicated fontenc from geometric https node orange positioning rote shapes stalone stealth style tikz tikzpicture visualstudio software

% Dupplicated from https://code.visualstudio.com/docs/remote/containers
\documentclass[11pt]{standalone}
\usepackage[T1]{fontenc}
\usepackage{tikz}
\usetikzlibrary{calc,positioning,shapes.geometric}
\begin{document}
  \begin{tikzpicture}[
    >=stealth,
    node distance=1cm,
    orange/.style={
      minimum width = 11em,
      fill=orange!50,
      draw=red!40,
      text width = 0.35\textwidth,
      text centered,
    },
    database/.style={
      cylinder,
      cylinder uses custom fill,
      cylinder body fill=green!60!black!50,
      cylinder end fill=green!10,
      shape border rotate=90,
      aspect=0.25,
      draw
    }
  ]
   
    \node[rounded corners, %fill=black,
    text depth = 5em,
    draw=blue!80,
    % double distance =1pt,    %% here
    %font=\Large, 
    minimum height= 20em,
    minimum width= 20em,
    label={[anchor=north, color=blue!90, inner sep=0pt, xshift=3em, yshift=-1em] north west:{Local OS}}]  (dw){};
    
        \node[rounded corners, %fill=black,
    text depth = 5em,
    draw=blue!80,
    % double distance =1pt,    %% here
    %font=\Large, 
    minimum height= 20em,
    minimum width= 30em,
    label={[anchor=north, color=blue!90, inner sep=0pt, xshift=3em, yshift=-1em] north west:{Container}},
    right = of dw]  (container){};
    \node[ %fill=black,
    draw=blue!90,
    text centered,
    text width = 0.20\textwidth,
    fill=blue!50,
    minimum height= 7em,
    minimum width= 15em,
    label={[anchor=north, inner sep=0pt, yshift=-0.2em] north:{\Large \textcolor{white}{VS Code}}}] at ([yshift=2em] dw.center) (code){};
    \node[orange] at ([yshift=-1.25em] code.center) (t1) {Theme/UI Extension} ;
    \node[orange] at ([yshift= 0.75em] code.center) (t2) {Theme/UI Extension};
  
    \node[ %fill=black,
    draw=blue!90,
    text centered,
    text width = 0.20\textwidth,
    fill=blue!50,
    minimum height= 7em,
    minimum width= 15em,
    label={[anchor=north, inner sep=0pt, yshift=-0.2em] north:{\Large \textcolor{white}{VS Code Server}}}] at ([xshift=10em, yshift=2em] container.west) (codeserver){};
    \node[orange] at ([yshift=-1.25em] codeserver.center) (we1) {WorkSpace Extension} ;
    \node[orange] at ([yshift= 0.75em] codeserver.center) (we2) {WorkSpace Extension};
    
    % Data Sources
      
    % Source Code
    \node[database] (db1) at ([yshift=-5em] code.south) (scOS) {Source Code};
    \node[database, opacity=0.6] (db1) at ([yshift=-5em] codeserver.south) (scContainer) {Source Code};
    % Container Stuff

    % Container widgets
        % Configuration Files and Plugin box
    \node[
    draw=black!10,
    text centered,
    fill=green!30,
    minimum width= 10em] at ([xshift=7em, yshift=-3em] codeserver.north east) (tp){Terminal Processes};
        \node[
    draw=black!10,
    text centered,
    fill=green!30,
    minimum width= 10em] at ([xshift=7em, yshift=-5em] codeserver.north east) (ra){Running Application};
            \node[
    draw=black!10,
    text centered,
    fill=green!30,
    minimum width= 10em] at ([xshift=7em, yshift=-7em] codeserver.north east) (debug){Debugger};
    
     \node[database] (db1) at ([yshift=2em, xshift=7em] codeserver.north east) (fs) {File System};
     
     % Connect and labels
    
    % Arrows 
    \draw[->, very thick, draw=blue!40] (code.east) -> (codeserver.west);
    % Labels
    \node[rounded corners, %fill=black,
    draw=none,
    minimum height= 2em,
    fill = white,
    % double distance =1pt,    %% here
    %font=\Large, 
    text width = 0.11\textwidth,
    text centered,
    minimum width=1.5em,
    xshift=3.75em] at (code.east) (dw1){Exposed port};
    
    \draw[->, very thick, draw=blue!40] (scOS.east) -> (scContainer.west);
    \node[rounded corners, %fill=black,
    draw=none,
    minimum height= 2em,
    fill = white,
    % double distance =1pt,    %% here
    %font=\Large, 
    text width = 0.11\textwidth,
    text centered,
    minimum width=1.5em,
    xshift=8.25em] at (scOS.east) (dw1){Volume Mount};
    \draw[->, very thick, draw=blue!40] (codeserver) -> (fs.west);
    \draw[->, very thick, draw=blue!40] (codeserver) -> (tp);
    \draw[->, very thick, draw=blue!40] (codeserver) -> (ra.west);
    \draw[->, very thick, draw=blue!40] (codeserver) -> (debug.west);
    \end{tikzpicture}
\end{document}
Created By David Li
2020
Created using saber