使用嵌套元素创建 TikZ 图片的最佳实践

Question 1

由于这是一个相当复杂的图表，我将在绘制过程中记录我的更改，因此如果我从头开始绘制它，这可能不是我的做法。整个策略是识别定位层次结构，并按照该层次结构放置内容。

第一个内部 tikzpicture 是“插图步骤 2”。此 tikzpicture 位于内，\node其base锚点位于2-center。内部 tikzpicture 有选项baseline=(2-methodology.base)。因此，在这个组中，我们必须有2-methodology.base。2-center这意味着该组中的所有节点都应相对于定位，2-methodology因此是应该首先定位的节点。事实上，该组中的所有内容都相对于定位，2-truepositive因此我们需要做的是2-methodology先放置（在2-center），然后2-truepositive相对于定位2-methodology（这可以通过反转两个节点的定位指令来实现）。之后，我们可以将该组的其余部分保留原样。为了模拟原始包含节点（2-picture），在这个组的末尾（原始节点所在的位置\end{tikzpicture}），我们使用一个fit节点来包含该组。它看起来足以容纳2-truepositive和2-topology。

现在，这是 tikzpictures 原始嵌套的一个结果。anchor=baseon2-picture传播到其子节点。由于我们已删除此继承，因此我们需要将其明确地放在那些未锚定的节点上。这就是所有example-image-a节点。

第二个内部 tikzpicture 是Illustration step 1。我们将采用类似的方法，但由于这个方法定义了一些长度，我们将子结构括在中scope。有点棘手的是，长度是使用其自己的子 tikzpicture ( \tikz\node[font={\sffamily}]{\dots};) 定义的。但是，在没有的情况下定义它\tikz似乎有效。

这个组似乎不需要其他任何东西，所以我们只需定义1-picture。fit 1-query这相当于在图表的其余部分用替换，但我在这里只进行最小的更改1-picture。1-query

继续进行“插图 3”，现在我们已经定义了一些样式，因此我们再次使用scope。

定位这个组有点棘手，因为内部和外部之间没有参考点。组的中间位于(3-center)，但如果不知道组有多大，就很难确保这一点。一种方法是在放置节点后测量它，并将该信息保存在文件中aux以供下次运行重复使用。另一种方法是使用矩阵。

或者，我们可以说顶部应该对齐，并且定位3-paper使得它的顶部与的顶部对齐，也就是说，2-picture。

让包含节点适合其所有子节点在这里是最棘手的。对于此图，我们可以挑选出极端节点（3-paper、3-sublabel-3-12、3-label-icon-3、3-label-2），但如果做不到这一点，就必须将它们全部列出。

接下来是“插图 4”。这个比“插图 3”简单，因为它tikzpicture被赋予了baseline相对于其子节点之一的明确位置。因此，和前面一样，我们首先定位相关的子节点，然后定位相对于该子节点的其他所有内容。

啊，其实它是\coordinate。所以我们可以全部4-anchor用替换4-center。

此坐标位于4-bars和的中间4-Typologie。同样，anchor=base外部节点的将向下传播，这意味着这两个节点已使用其基本锚点进行定位。这意味着在放置它们之前测量它们之间的距离很棘手。要么再次使用矩阵，要么通过文件在下一次运行时测量并使用该测量值aux，才能获得绝对准确的结果。

但是如果我们秉承定位的精神，我们可以将两者放置在与 4 锚点坐标相等的位置（好吧，除了考虑到我们正在使用锚点这一事实base，似乎需要进行一些调整）。这在垂直方向上工作正常，但在水平方向上却偏离了。为了修复水平方向，我们将放置4-anchor在与水平方向对齐4-center但垂直方向与对齐的位置4-caption.west，然后在放置4-bars和时，4-Typologie我们将它们的锚点设置为west并添加一点水平间距（1em 似乎差不多）。

此外，4-r-logo需要anchor=base。

现在来看看箭头。在这里，使用内部 tikzpictures 似乎最令人发指！您使用它们作为定义坐标的廉价方式，但是当您加载库时calc，您可以使用它来代替。

事实上，现在所有内容都在主 tikzpicture 中（而不是隐藏在子 tikzpicture 中），您可以使用实际节点的锚点作为箭头源和目标，而不是猜测魔法数字（例如 +/- 6ex）。我还没有做出这种改变。

在上面的情况中，我有时会选择一种比嵌套 tikzpictures 更简单的定位方法。目前还不清楚您的定位是否必须完全按照您已有的方式进行，或者在易用性和精确定位之间是否存在操作空间。尽管如此，您可以通过在每个阶段识别相对于现有元素定位的元素的方法来删除所有嵌套的 tikzpictures。

最后，这是我的代码。

\documentclass[10pt, margin=10pt]{standalone}
%\url{http://tex.stackexchange.com/q/362307/86}
    \usepackage{graphicx}
    \usepackage{tikz}
        \usetikzlibrary{calc}
        \usetikzlibrary{positioning}
\usetikzlibrary{arrows.meta}
\usetikzlibrary{fit}
    \usepackage{calc}

\begin{document}
%% Constants definition %%
    %Length and coefficient%
    \newlength{\eboXbigUnit}
        \setlength{\eboXbigUnit}{5em}
    \newlength{\eboYbigUnit}
        \setlength{\eboYbigUnit}{6\baselineskip}
    \newlength{\eboInterlabelDistance}
        \setlength{\eboInterlabelDistance}{2.5\baselineskip}
    \newlength{\eboIconsUnit}
        \setlength{\eboIconsUnit}{\baselineskip}
    \newlength{\eboInterArrowLength}
        \setlength{\eboInterArrowLength}{1.5\baselineskip}
    \newlength{\eboLineWidth}
        \setlength{\eboLineWidth}{.33ex}

    \newcommand{\coefBoxWidth}{6.2}
    \newcommand{\coefBoxHeight}{3}
    %Colors%
    \definecolor{eboOrange}{RGB}{250,179,52}
    \definecolor{eboOrange21}{RGB}{253,215,145}
    \definecolor{eboOrange22}{RGB}{249,163,13}

    \definecolor{eboGrey20}{RGB}{235,234,233}
    \definecolor{eboGrey21}{RGB}{173,171,172}
    \definecolor{eboGrey22}{RGB}{118,115,116}

    \definecolor{eboBlack}{RGB}{35,31,32}

\begin{tikzpicture}[
    remember picture,
    inner sep=0pt,
    outer sep=0pt,
    eboStepLabel/.style={
        font={\sffamily\scriptsize},
        text=eboOrange,
        align=center,
        anchor=base,
    },
    eboMiddleArrow/.style={
        ->,
        draw=eboGrey21,
        line width=\eboLineWidth,
        line cap=round,
        line join = round,
        >={Straight Barb[line cap=round, line join=miter, angle=45:4*\the\eboLineWidth]}
    },
    iconGrey/.style={
        text=eboBlack,
    },
]

%%% TOP LABELS %%%  
% Label 1
    \node[
    eboStepLabel,
    ] 
    (1-caption)
    at (0,0)
    {1. Lorem ipsum\\
        dolor sit amet\strut};

% Label 2
    \node[
    eboStepLabel,
    right= \eboInterlabelDistance of 1-caption.east,
    anchor=west,
    ] 
    (2-caption)
    {2. consectetur adipiscing elit.\\
        Mauris eu varius eros\strut};

% Label 3
    \node[
    eboStepLabel,
    right= \eboInterlabelDistance of 2-caption.east,
    anchor=west,
    ] 
    (3-caption)
    {3. Ut convallis\\
        accumsan porttitor\strut};

% Label 4
    \node[
    eboStepLabel,
    right= \eboInterlabelDistance of 3-caption.east,
    anchor=west,
    ] 
    (4-caption)
    {4. Donec mollis in\\
        erat id sollicitudin\strut};

%%% ILLUSTRATIONS%%%    
% Illustration step 0
    \node (0-picture)[
        below left = \eboYbigUnit and 2.75\eboInterlabelDistance of 1-caption.south, 
        anchor=center
    ]
    {\includegraphics[width=2\baselineskip]{example-image-a}};

% Define center coordinate for illustration of steps 2 to 4
    \coordinate [below = \eboYbigUnit of 2-caption.south](2-center);
    \coordinate [below = \eboYbigUnit of 3-caption.south](3-center);
    \coordinate [below = \eboYbigUnit of 4-caption.south](4-center);

% Illustration step 2       
%        \begin{tikzpicture}[
%            inner sep=0pt, 
%            remember picture, 
%            baseline=(2-methodology.base)
%        ]
        %methodology
        \node[
            anchor=base,
            fill = eboGrey20,
            draw = eboGrey21,
            rectangle,
            minimum height = \coefBoxHeight\baselineskip,
            minimum width = \coefBoxWidth\baselineskip,
            line width = .5\eboLineWidth,
            rounded corners=\eboLineWidth,
        ] (2-methodology) at (2-center)
        {};

        %true positive
        \node[
            above = .5\baselineskip of 2-methodology.north,
            fill = eboOrange21,
            draw = eboOrange22,
            anchor=south,
            rectangle,
            minimum height = \coefBoxHeight\baselineskip,
            minimum width = \coefBoxWidth\baselineskip,
            line width = .5\eboLineWidth,
            rounded corners=\eboLineWidth
        ] (2-truepositive)
        {};

        \node[
            below right= .25\baselineskip and .25\baselineskip of 2-truepositive.north west,
            anchor = north west,
            align = left,
            font = {\sffamily\scriptsize},
            text = eboOrange22,
        ](2-truepositive-label)
        {Duis tempus};

        \coordinate (2-truepositive-articleL) at ($(2-truepositive.north west)!0.9!(2-truepositive.south west)$);
        \coordinate (2-truepositive-articleR) at ($(2-truepositive.north east)!0.9!(2-truepositive.south east)$);

        \foreach \pos in {0.125, 0.375, ..., 0.875} {
            \node[text=eboOrange,anchor=base]
            at ($(2-truepositive-articleL)!\pos!(2-truepositive-articleR)$)
            {\includegraphics[height=\baselineskip]{example-image-a}};
        };


        \node[
            below right= .25\baselineskip and .25\baselineskip of 2-methodology.north west,
            anchor = north west,
            align = left,
            font = {\sffamily\scriptsize},
            text = eboGrey21,
        ](2-methodology-label)
        {Dignissim};

        \node[
            below = .1\baselineskip of 2-methodology-label.south west,
            anchor = north west,
            align = left,
            font = {\sffamily\tiny},
            text = eboGrey21,
        ](2-methodology-label)
        {Nulla ut augue vehicula,\\
             tincidunt};

        \coordinate (2-methodology-articleL) at ($(2-methodology.north west)!0.9!(2-methodology.south west)$);
        \coordinate (2-methodology-articleR) at ($(2-methodology.north east)!0.9!(2-methodology.south east)$);

        \foreach \pos in {0.375, 0.625, 0.875} {
            \node[text=eboGrey21,anchor=base]
            at ($(2-methodology-articleL)!\pos!(2-methodology-articleR)$)
            {\includegraphics[height=\baselineskip]{example-image-a}};
        };

        % dots
        \node[
            below = .33\baselineskip of 2-methodology.south,
            anchor=north,
            text = eboGrey21,
            font = {\sffamily},
        ] (2-dots)
        {\dots};

        % topology
        \node[
            below = .33\baselineskip of 2-dots.south,
            anchor=north,
            fill = eboGrey20,
            draw = eboGrey21,
            rectangle,
            minimum height = \coefBoxHeight\baselineskip,
            minimum width = \coefBoxWidth\baselineskip,
            line width = .5\eboLineWidth,
            rounded corners=\eboLineWidth,
        ] (2-topology)
        {};

        \node[
            below right= .25\baselineskip and .25\baselineskip of 2-topology.north west,
            anchor = north west,
            align = left,
            font = {\sffamily\scriptsize},
            text = eboGrey21,
        ](2-topology-label)
        {Luctus rhoncus};

        \node[
            below = .1\baselineskip of 2-topology-label.south west,
            anchor = north west,
            align = left,
            font = {\sffamily\tiny},
            text = eboGrey21,
        ](2-topology-label)
        {Donec molestie mollis arcu\\
             eget consectetur};

        \coordinate (2-topology-articleL) at ($(2-topology.north west)!0.9!(2-topology.south west)$);
        \coordinate (2-topology-articleR) at ($(2-topology.north east)!0.9!(2-topology.south east)$);

        \foreach \pos in {0.625, 0.875} {
            \node[text=eboGrey21,anchor=base]
            at ($(2-topology-articleL)!\pos!(2-topology-articleR)$)
            {\includegraphics[height=\baselineskip]{example-image-a}};
        };
%        \end{tikzpicture}
        \node[
          %draw, line width=1mm, % Uncomment this to see the boundary
          inner sep=0pt, outer sep=0pt,
          fit=(2-topology) (2-truepositive)
    ] (2-picture)
    {%
    };

% Define center coordinate for illustration of step 1
    \path
    (2-picture.west)
    -|
    (1-caption.south)
    coordinate [midway] (1-center);

% Illustration step 1   
    \begin{scope}
    \newlength{\queryHeight}%
    \setlength{\queryHeight}{10.166\baselineskip}%
    \addtolength{\queryHeight}{\heightof{{\sffamily\dots}}}

    %\begin{tikzpicture}[inner sep=0pt]
        \node[
        fill = eboGrey21,
        draw = eboGrey22,
        rectangle,
        minimum height = \queryHeight,
        minimum width = \coefBoxWidth\baselineskip,
        line width = .5\eboLineWidth,
        rounded corners=\eboLineWidth,
        ] (1-query) at (1-center)
        {};
        \node[
        below right= .5\baselineskip and .25\baselineskip of 1-query.north west,
        anchor = north west,
        align = left,
        font = {\sffamily\scriptsize},
        text = eboGrey20,
        ](1-query-google)
        {\includegraphics[height=\baselineskip]{example-image-b}};
        \node[
        right= .25\baselineskip of 1-query-google.north east,
        anchor = north west,
        align = left,
        font = {\tiny\sffamily},
        text = eboGrey20,
        ](1-query-google)
        {$\cdot$~Duis vitae faucibus orci,\\
            venenatis nulla ac\\
            $\cdot$~Vivamus sit amet\\
            hendrerit dui};

        \coordinate (1-UL) at ($(1-query.north west)!0.2!(1-query.south west)$);
        \coordinate (1-UR) at ($(1-query.north east)!0.2!(1-query.south east)$);
        \coordinate (1-LL) at ($(1-query.north west)!1!(1-query.south west)$);
        \coordinate (1-LR) at ($(1-query.north east)!1!(1-query.south east)$);

        \foreach \x in {0.125,0.375,0.625,0.875}{
            \foreach \y/\yname in {0.166/a, 0.333/b, 0.5/c, 0.666/d , 0.833/e}{
                \coordinate (myL\yname) at ($(1-UL)!\y!(1-LL)$);
                \coordinate (myR\yname) at ($(1-UR)!\y!(1-LR)$);
                \node [text=eboGrey22] at ($(myL\yname)!\x!(myR\yname)$) {\includegraphics[height=\baselineskip]{example-image-a}};
            };
        };
        %\end{tikzpicture}
        \end{scope}
    \node[
      %draw, line width=1mm, % Uncomment this to see the boundary
      inner sep=0pt, outer sep=0pt,
      fit=(1-query)
      ](1-picture)
    {%
    };

    % Illustration 3        
    %\begin{tikzpicture}[
    %remember picture,
    %inner sep=0pt,
    \begin{scope}[
        categorizationLabel/.style={
            font={\sffamily\scriptsize},
            text=eboGrey22,
            align=left,
        },
        categorizationSublabel/.style={
            font={\sffamily\tiny},
            text=eboGrey21,
            align=left,
        },
        ]
        \node (3-paper) [text=eboOrange,anchor=north]
        at (3-center |- 2-picture.north)
        {\includegraphics[height=2\baselineskip]{example-image-a}};
        \node [
            below left = .333\baselineskip and .15\baselineskip of 3-paper.north east, 
            anchor=north west,
            text=eboGrey22,
        ]
        {\includegraphics[width=\baselineskip]{example-image-c}};

        %Type of paper  
        \node (3-label-1) [
            categorizationLabel, 
            below = \baselineskip of 3-paper.south west,
            anchor = base west
        ]
        {Proin sollicitudin};

        \node (3-label-icon-1)[
            left = .5em of 3-label-1.west,
            anchor=east,
            text=eboGrey22,
        ]
        {\includegraphics[height=2ex]{example-image-b}};

        \node (3-sublabel-1-11) [
            categorizationSublabel,
            below right = .05ex and .175em of 3-label-1.south west,
            anchor= north west,
        ]
        {\strut\includegraphics[height=1ex]{example-image} ipsum ac};

        \node (3-sublabel-1-21) [
            categorizationSublabel,
            below = .0ex of 3-sublabel-1-11.south west,
            anchor= north west,
        ]
        {\strut\includegraphics[height=1ex]{example-image} vestibulum};

        \node (3-sublabel-1-12) [
            categorizationSublabel,
            below = .0ex of 3-sublabel-1-21.south west,
            anchor= north west,
        ]
        {\strut\includegraphics[height=1ex]{example-image} suscipit};

        \node (3-sublabel-1-22) [
            categorizationSublabel,
            below = .0ex of 3-sublabel-1-12.south west,
            anchor= north west,
        ]
        {\strut\includegraphics[height=1ex]{example-image} venenatis};

        %Type of product    
        \node (3-label-2) [
            categorizationLabel, 
            below = 2.85\baselineskip of 3-label-1.west, 
            anchor=west,
        ]
        {Vulputate fringilla};

        \node (3-label-icon-2)[
            left = .5em of 3-label-2.west,
            anchor=east,
            text=eboGrey22,
        ]
        {\includegraphics[height=2ex]{example-image-b}};

        \node (3-sublabel-2-11) [
            categorizationSublabel,
            below right = .05ex and .175em of 3-label-2.south west,
            anchor= north west,
        ]
        {\strut\includegraphics[height=1ex]{example-image} condimentum};

        \node (3-sublabel-2-21) [
            categorizationSublabel,
            below = .0ex of 3-sublabel-2-11.south west,
            anchor= north west,
        ]
        {\strut\includegraphics[height=1ex]{example-image} scelerisque};

        \node (3-sublabel-2-12) [
            categorizationSublabel,
            below = 0.05ex of 3-sublabel-2-21.south west,
            anchor= north west,
        ]
        {\strut\includegraphics[height=1ex]{example-image} lacus};

        \node (3-sublabel-2-22) [
            categorizationSublabel,
            below = .0ex of 3-sublabel-2-12.south west,
            anchor= north west,
        ]
        {\strut\includegraphics[height=1ex]{example-image} pharetra};

        %Type of open-design    
        \node (3-label-3) [
            categorizationLabel, 
            below = 2.9\baselineskip of 3-label-2.west,
            anchor=west,
        ]
        {Fusce justo est};
        \node (3-label-icon-3) [
            left = .5em of 3-label-3.west,
            anchor=east,
            text=eboGrey22,
        ]
        {\includegraphics[height=2ex]{example-image-b}};

        \node (3-sublabel-3-11) [
            categorizationSublabel,
            below right = .05ex and .175em of 3-label-3.south west,
            anchor= north west,
        ]
        {\strut\includegraphics[height=1ex]{example-image} consequat};

        \node (3-sublabel-3-21) [
            categorizationSublabel,
            below = .0ex of 3-sublabel-3-11.south west,
            anchor= north west,
        ]
        {\strut\includegraphics[height=1ex]{example-image} nec facilisis};

        \node (3-sublabel-3-12) [
            categorizationSublabel,
            below = 0.05ex of 3-sublabel-3-21.south west,
            anchor= north west,
        ]
        {\strut\includegraphics[height=1ex]{example-image} sodales};
        %        \end{tikzpicture}
        \end{scope}
    \node[
      %draw, line width=1mm, % Uncomment this to see the boundary
      inner sep=0pt, outer sep=0pt,
      fit=(3-paper) (3-sublabel-3-12) (3-label-icon-3) (3-label-2)
    ] (3-picture)
    {%
    };


    % Illustration 4        
%        \begin{tikzpicture}[remember picture,baseline = (4-anchor)]
        \coordinate (4-anchor) at (4-center -| 4-caption.west);

        \node (4-bars) 
        at ($(4-anchor)+(1em,1.5\eboIconsUnit)$) [iconGrey,anchor=west] 
        {\includegraphics[width=2\eboIconsUnit]{example-image-b}};

        \node (4-r-logo) 
        at (4-bars.north east) [iconGrey,anchor=base] 
        {\includegraphics[width=\eboIconsUnit]{example-image-c}};

        \node[anchor=west] (4-Typologie)
        at ($(4-anchor)+(1em,-1.5\eboIconsUnit-.5\baselineskip)$) [%
            font={\sffamily\scriptsize},
            text=eboBlack,
            align=left%
        ]
        {Aenean:\strut};

        \node (4-DIY)[%
            font={\sffamily\scriptsize},
            text=eboGrey22,
            align=left,%
            below = 0pt of 4-Typologie.south west,
            anchor = north west
        ]
        {$\cdot$ Finibus elit\strut};

        \node (4-meta) [%
            font={\sffamily\scriptsize},
            text=eboGrey22,
            align=left,%
            below = 0pt of 4-DIY.south west,
            anchor = north west
        ]
        {$\cdot$  In orci varius\strut};

        \node (4-indus)[%
            font={\sffamily\scriptsize},
            text=eboGrey22,
            align=left,%
            below = 0pt of 4-meta.south west,
            anchor = north west
        ]
        {$\cdot$ Lobortis nunc\strut};

%        \end{tikzpicture}%
    \node (4-picture) at (4-center) [
          %draw, line width=1mm, % Uncomment this to see the boundary
      inner sep=0pt, outer sep=0pt,
      fit=(4-bars) (4-r-logo) (4-Typologie) (4-DIY) (4-meta) (4-indus)
    ]
    {%
    };

%%% ARROWS %%%
% Arrow 0 -> 1
    \draw[eboMiddleArrow] ($(0-picture.east)!.5!(1-picture.west)$) ++(-.5\eboInterArrowLength,0) -- ++(\eboInterArrowLength,0);

    % Arrows 1 -> 2
    \coordinate (12-arrow) at ($(1-picture.east)!.5!(2-picture.west)$);
    \draw[eboMiddleArrow] (12-arrow) ++(-.5\eboInterArrowLength,0) -- +(\eboInterArrowLength,0);
    \draw[eboMiddleArrow] (12-arrow) ++(-.5\eboInterArrowLength,0) -- +(\eboInterArrowLength,6ex);
    \draw[eboMiddleArrow] (12-arrow) ++(-.5\eboInterArrowLength,0) -- +(\eboInterArrowLength,-6ex);

% Arrow 2-3 
    \coordinate (23-middle) at ($(2-caption.east)!.5!(3-caption.west)$);
    \draw [eboMiddleArrow] (23-middle) ++(-.5\eboInterArrowLength,-2.2\eboIconsUnit) -- ++(\eboInterArrowLength,0);

    % Arrows 3 -> 4
    \coordinate (34-arrow) at ($(3-picture.east)!.5!(4-picture.base west)$);
    \draw [eboMiddleArrow] (34-arrow) ++(-.5\eboInterArrowLength,0) -- ++(\eboInterArrowLength,.75);
    \draw [eboMiddleArrow] (34-arrow) ++(-.5\eboInterArrowLength,0) -- ++(\eboInterArrowLength,-.75);

\end{tikzpicture}
\end{document}

Answer