複数のノードから1つのノードに矢印を描き、共通線で結合します。

Question

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}

しかし、私はこの画像を取得しています:

複数の矢印を共通の線で正しく結合するにはどうすればよいでしょうか。おそらくブロックの数と位置を変更する必要があるため、固定またはハードコードされた線の座標は機能しません。

Answer 1

TikZ ライブラリを使用して、次のようにしますarrows。

\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);

Answer 2

nこれが私の提案です。コードを読みやすくするために、形状のノードをcoordinate「交差点」に定義します。特別な矢印は、arrows.metaTiに依存する次のスタイルで実行されます。けZライブラリ:

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

は非推奨であることに注意してください。スタイルを定義するには を\tikzstyle使用します(下記参照)。私のスタイルでは、接続線が四角形の境界線の前で止まらないようにします。ここでは使用されていないため、オプションを削除しました。block/.style={...}blockouter sep=0blockauto

\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}

Answer 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}