從多個節點向一個節點繪製箭頭並用公共線連接

從多個節點向一個節點繪製箭頭並用公共線連接

我有多個區塊應該連接到「基本」區塊,就像 UML 圖中帶有「擴展」箭頭的區塊一樣(我只是透過在沒有 TeX 的情況下繪製來建立這個範例):

例子

我正在嘗試使用此程式碼與|-箭頭的公共線並將(270:10mm)其向下移動10mm

\tikzset{node distance=1.6cm, auto, every text node part/.style={align=center, font={\sffamily\small}}}
\tikzstyle{block} = [draw=myblack, fill=white, inner sep=0.3cm, outer sep=0.1cm, thick]

\begin{tikzpicture}
  \node[block] (base) {Base};
  \node[block, below=of base] (impl2) {Impl2};
  \node[block, left=of impl2] (impl1) {Impl1};
  \node[block, right=of impl2] (impl3) {Impl3};
  \draw[->] (impl1.north) |- (270:10mm) --++ (base.south);
  \draw[->] (impl2.north) |- (270:10mm) --++ (base.south);
  \draw[->] (impl3.north) |- (270:10mm) --++ (base.south);
\end{tikzpicture}

但我得到這張照片:

結果

如何用一條公共線正確連接多個箭頭?我很可能需要更改塊的數量及其位置,因此固定或硬編碼的線座標對我不起作用。

答案1

我會喜歡這樣,使用arrowsTikZ 庫。

在此輸入影像描述

\documentclass[border=1mm]{standalone}
\usepackage{tikz}
\usetikzlibrary{chains,arrows}
\tikzset{
  node distance=1.6cm,
  auto,
  every text node part/.style={
    align=center,
    font={\sffamily\small},
  }
}
\tikzstyle{block}=[
  draw=black,
  fill=white,
  inner sep=0.3cm,
  outer sep=0cm,
  thick,
]

\begin{document}
\begin{tikzpicture}
  \node[block] (base) {Base};
  \node[block, below=of base]  (impl2) {Impl2};
  \node[block, left= of impl2] (impl1) {Impl1};
  \node[block, right=of impl2] (impl3) {Impl3};
  \draw (impl1.north) |- (270:10mm) -|  (base.south);
  \draw[-latex] (impl2.north) --  (base.south);
  \draw (impl3.north) |- (270:10mm)  -| (base.south);
\end{tikzpicture}
\end{document}

編輯:這不是一個大問題,但如果放大箭頭,您會看到來自左右節點(沒有箭頭)的連接正在改變箭頭提示的視覺效果。見下文。

在此輸入影像描述在此輸入影像描述

因此,在這種情況下,只需將連接的端點向下移動一點([yshift=-1pt]base.south),例如,這樣邊緣就不會接觸到框架,箭頭尖端會更銳利。

  \draw (impl1.north) |- (270:10mm) -|  ([yshift=-1pt]base.south);
  \draw[-latex] (impl2.north) --  (base.south);
  \draw (impl3.north) |- (270:10mm)  -| ([yshift=-1pt]base.south);

答案2

這是我的建議。n形狀節點coordinate被定義在“十字路口”,以使程式碼易於閱讀。特殊箭頭是用以下樣式完成的,它依賴於arrows.metaTikZ庫:

extends/.style={->, >={Triangle[open, width=0.2cm, length=0.2cm]}}

請注意,它\tikzstyle已被棄用。用於block/.style={...}定義block樣式(見下文)。outer sep=0在我的block風格中,確保連接線不會在矩形邊框之前停止。我刪除了選項auto,因為這裡沒有使用它。

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

\begin{document}

\begin{tikzpicture}[
  node distance=1.6cm,
  every text node part/.style={align=center, font={\sffamily\small}},
  block/.style={draw=black, fill=white, inner sep=0.3cm, outer sep=0, thick},
  extends/.style={->, >={Triangle[open, width=0.2cm, length=0.2cm]}},
  ]
  \node[block] (base) {Base} coordinate[below=0.7cm of base.south] (n);
  \node[block, below=of base] (impl2) {Impl2};
  \node[block, left=of impl2] (impl1) {Impl1};
  \node[block, right=of impl2] (impl3) {Impl3};

  \draw (impl1.north) |- (n);
  \draw (impl2.north) |- (n);
  \draw (impl3.north) |- (n);
  \draw[extends] (n) -- (base.south);
\end{tikzpicture}

\end{document}

在此輸入影像描述

答案3

你的圖讓我在一棵樹上,箭頭方向相反:

在此輸入影像描述

它可以透過使用forest帶有選項的套件來簡單繪製forked edge

\documentclass[margin=3mm]{standalone}
\usepackage[edges]{forest}
\usetikzlibrary{arrows.meta}

\begin{document}
    \begin{forest}
for tree = {
% nodes
    draw,
    inner sep = 3mm,
    font = \sffamily\small,
% tree
   forked edge,
   l sep = 12mm,   % vertical distances between nodes
fork sep = 6mm,    % distances to connection point
   s sep = 12mm,   % horizontal distances between nodes
edge ={Stealth-}
           }% end for tree
[Base
    [Impl1]
    [Impl2]
    [Impl3]
]
    \end{forest}
\end{document}

相關內容