☰

從流程圖開始

tag-icon • tag-icon tikz-pgf flow-charts
從流程圖開始

有人可以幫我看一下下面的流程圖嗎？

在此輸入影像描述

微量元素：

\documentclass[tikz, border=6mm]{standalone}
\usetikzlibrary{arrows.meta, positioning, shadows}

\begin{document}
    \begin{tikzpicture}[
node distance = 5mm and 7mm,
   arr/.style = {-Triangle,very thick},
   box/.style = {rectangle, draw, semithick,
                 minimum height=9mm, minimum width=17mm,
                 fill=white, drop shadow},
                        ]
\node (n1) [box] {Task};
\node (n2) [box, below right=of n1] {Representation};
\node (n3) [box, above right=of n2] {Skils};
\node (n4) [box, below  left=of n2] {Difficulty};
\node (n5) [box, right=of n2] {Solution};
%
\draw[arr]   (n1) -| ([xshift=-3mm] n2.north);
\draw[arr]   (n3) -| ([xshift= 3mm] n2.north);
\draw[arr]   (n4) -| (n2);
\draw[arr]   (n2) -- (n5);
\end{tikzpicture}
    \end{document}

答案1

您可以執行以下兩項操作來使流程圖適合頁面：

  1. 透過scale=<percent>, transform shape向tikzpicture.這只會幫助一些人；最終你需要...
  2. 重新組織流程圖節點，使其適合。

在此輸入影像描述

這是代碼：

\documentclass{amsart}

\usepackage{tikz, lipsum}
\usetikzlibrary{positioning, decorations.pathreplacing, calc, arrows.meta, shapes.geometric}

\tikzset{
    bigbox/.style={draw, rounded corners, minimum width=2.5cm, minimum height=1.5cm},
    smallbox/.style={draw, rounded corners, minimum width=2cm, minimum height=1cm},
    bigcircle/.style={draw, circle, minimum size=2cm},
    bigellipse/.style={draw, ellipse, minimum width=3cm, minimum height=2.5cm},
    place/.style={inner sep=0pt, outer sep=0pt},
    fork/.style={decorate, decoration={show path construction, lineto code={
        \draw[rounded corners, ->](\tikzinputsegmentfirst)-|($(\tikzinputsegmentfirst)!.5!(\tikzinputsegmentlast)$)|-(\tikzinputsegmentlast);}
    }}
}

\begin{document}
\lipsum[1]
\[
\begin{tikzpicture}[scale=.8, transform shape, node distance=1cm, >=Latex]
  \node(A)[bigbox]{Text A};
  \node(B)[bigbox, right=of A]{Text B};
  \node[place](X)[right=3cm of B]{};
  \node(C)[smallbox, above=2.5mm of X]{Text C};
  \node(D)[smallbox, above=5mm of C]{Text D};
  \node(E)[smallbox, below=2.5mm of X]{Text E};
  \node(F)[smallbox, below=5mm of E]{Text F};
  \node(G)[bigbox, above=of D]{Text G};
  \node(H)[bigbox, right=of C]{Text H};
  \node(I)[bigbox, below=of H]{Text I};
  \node(J)[bigbox, below=of I]{Text J};
  \node(K)[bigcircle, below=of J]{Text K};
  \node(L)[bigbox, left=of K]{Text L};
  \node[place](Y)[left=3cm of L]{};
  \node(M)[bigbox, above=2.5mm of Y]{Text M};
  \node(N)[bigbox, below=2.5mm of Y]{Text N};
  \node(O)[bigellipse, left=3cm of Y]{Text O};
  \draw[->](A)--(B);
  \draw[fork](B.east)--(D.west);
  \draw[fork](B.east)--(C.west);
  \draw[fork](B.east)--(E.west);
  \draw[fork](B.east)--(F.west);
  \draw[->](D)--(G);
  \draw[->](C)--(H);
  \draw[->](H)--(I);
  \draw[->](I)--(J);
  \draw[->](J)--(K);
  \draw[->](K)--(L);
  \draw[fork](L.west)--(M.east);
  \draw[fork](L.west)--(N.east);
  \draw[fork](M.west)--(O.east);
  \draw[fork](N.west)--(O.east);
\end{tikzpicture}
\]
\lipsum[2]
\end{document}

答案2

「技巧」是使用例如類文章而不是獨立的文章。以下是您的繪圖如何適合這樣一個“標準頁面”，除了縮排程式碼之外沒有其他任何變更：

結果

%\documentclass[tikz, border=6mm]{standalone}

\documentclass[10pt]{article}
\usepackage{tikz}
\usetikzlibrary{arrows.meta, positioning, shadows}

\begin{document}
 Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do: once or twice she had peeped into the book her sister was reading, but it had no pictures or conversations in it, “and what is the use of a book,” thought Alice “without pictures or conversations?”

    \begin{tikzpicture}[
        node distance = 5mm and 7mm,
           arr/.style = {-Triangle,very thick},
           box/.style = {rectangle, draw, semithick,
                         minimum height=9mm, minimum width=17mm,
                         fill=white, drop shadow},
                                ]
        \node (n1) [box] {Task};
        \node (n2) [box, below right=of n1] {Representation};
        \node (n3) [box, above right=of n2] {Skils};
        \node (n4) [box, below  left=of n2] {Difficulty};
        \node (n5) [box, right=of n2] {Solution};
        %
        \draw[arr]   (n1) -| ([xshift=-3mm] n2.north);
        \draw[arr]   (n3) -| ([xshift= 3mm] n2.north);
        \draw[arr]   (n4) -| (n2);
        \draw[arr]   (n2) -- (n5);
    \end{tikzpicture}
    
    So she was considering in her own mind (as well as she could, for the hot day made her feel very sleepy and stupid), whether the pleasure of making a daisy-chain would be worth the trouble of getting up and picking the daisies, when suddenly a White Rabbit with pink eyes ran close by her. 
\end{document}

答案3

只需繞行移動

\tikzset{continue chain=going …}

您可以讓節點鏈在不同的點轉動。

程式碼

\documentclass[tikz]{standalone}
\usetikzlibrary{arrows.meta, positioning, chains, ext.paths.ortho, quotes, shapes.geometric}
\ExplSyntaxOn\makeatletter\tl_replace_once:Nnn\tikz@do@matrix@cont{\tikz@node@finish}{\tikz@alias\tikz@node@finish}\makeatother\ExplSyntaxOff
\tikzset{tight matrix/.style={every outer matrix/.append style={inner sep=+0pt, outer sep=+0pt}}}
\begin{document}
\begin{tikzpicture}[
  node distance = 5mm and 7mm,
  arr/.style = {-{Triangle[scale=.75]}, very thick},
  arr*/.style= {arr, rounded corners},
  box/.style = {rectangle, draw, semithick, rounded corners=3pt,
                minimum height=9mm, minimum width=17mm},
  boxie/.style={box, minimum height=7mm, minimum width=14mm},
  ell/.style = {box, shape=ellipse},
  start chain=ch going right,
  every join/.append style=arr,
  marker/.style={node font=\small, fill=white, inner sep=1pt, outer sep=8pt}
]
\node[box, on chain]       (n1) {Task};
\node[box, on chain, join] (n2) {Representation};
\matrix[node distance=1.5cm, on chain=ch, tight matrix]{
  \tikzset{start chain=m going below, node distance=3mm}
  \foreach \i in {1, ..., 4} \node[boxie, on chain]{};
\\};
\foreach[count=\i]\t in {4, 3, 2, 1}
  \path (n2) edge[arr*, horizontal vertical horizontal,
                  ortho/distance={\i==2||\i==3?4mm:3mm},
                  "$\t\,\%$" {left, marker, at end}] (m-\i);
\scoped[start chain=x going above]
  \chainin (m-begin) node[box, on chain, join] (top) {Hat};
\chainin (m-2);
\node[box, on chain, join] {Pi};

\tikzset{continue chain=going below}                           % ← turn down!
\node[box, on chain, join] {Pa};
\node[box, on chain, join] {Po};
\node[ell, on chain, join] {Ellie};

\tikzset{continue chain=going left}                            % ← turn left!
\node[box, on chain, join] (ta) {Turn};

\matrix[node distance=1.5cm, on chain=ch, tight matrix]{
  \tikzset{start chain=m going below, node distance=3mm}
  \foreach \i in {1, 2} \node[box, on chain]{};
\\};
\node[node distance=1.5cm, ell, on chain] {};
\foreach[count=\i]\t/\u in {A/C, B/D}
  \path[arr*, horizontal vertical horizontal]
      (ta) edge["$\t$" {right, marker, at end  }] (m-\i)
    (m-\i) edge["$\u$" {left,  marker, at start}] (ch-end);
\end{tikzpicture}
\end{document}

輸出

在此輸入影像描述

相關內容