如何制作如以下示例中的小图形？

Question

我实际上在整个论坛中搜索了一个例子，但我不知道如何创建这样的图形。

有没有办法创造这样的东西？

Answer 1

可能有几种方法可以做到这一点，但搜索这样的事情可能会很棘手，部分原因是许多问题就像你的一样：一个图像，以及“我该怎么做？”的问题。当然，很可能没有人问过如何制作这样的图表。

话虽如此：在我睡觉前快速进行丑陋的破解。for 循环中的数字（0.12、0.63 等）对应于 URL 节点左下角和右下角之间的分数水平距离，可能需要对其进行一些微调。

\documentclass[border=5mm]{standalone}
\usepackage{url}
\usepackage{tikz}
\usetikzlibrary{calc}
\begin{document}
\begin{tikzpicture}
\node [inner xsep=0pt,name=foo] {\url{https://username:[email protected]:5000/api/person?id=1234#email}};

\foreach [remember=\xb as \xa (initially 0)] \xb/\txt in {
   0.12/Schema,
   0.63/Authority,
   0.79/Path,
   0.91/Query,
   1/Fragment}
{
\draw ($(foo.south west)!\xa!(foo.south east)$) |- coordinate [pos=0.75] (m)
      ($(foo.south west)!\xb!(foo.south east) + (-1pt,-5pt)$) --
      ($(foo.south west)!\xb!(foo.south east) + (-1pt,0)$);

\draw (m) -- ++(0,-5pt) node[below, font=\scriptsize\sffamily] {\txt};
} 

\end{tikzpicture}
\end{document}

Answer 2

这是替代方案Torbjørn 的精彩回答基于托比昂的非常有用的命令\tikznode优点是您可以更轻松地控制垂直条的位置，因为它们由节点决定，但缺点是它（目前？）不能与\url。（编辑：缩短了代码，遵循了（猜猜是谁 ;-) Torbjørn T 的建议。开头和结尾的较短的腿是故意的，但是，如果你不喜欢它们，可以替换\strut为\vphantom{x}。）

\documentclass{article}
\usepackage{tikz}
\usetikzlibrary{positioning}
\newcommand{\tikznode}[2]{\tikz[remember picture,baseline=(#1.base),inner sep=0pt] \node (#1) {#2};}
\begin{document}
\texttt{\tikznode{0}{\strut}https:/\tikznode{1}{/}username:password\@server.com:5000\tikznode{2}{/}api/person\tikznode{3}{?}id=1234\tikznode{4}{\#}email\tikznode{5}{\strut}}
\begin{tikzpicture}[overlay,remember picture,font=\sffamily]
 \coordinate[below=4pt of 0.south] (B);
 \foreach [count=\X from 0, count=\Z] \Y in {Schema,Authority,Path,Query,Fragment}
 {\draw ([xshift=-1pt]\Z.south) -- ([xshift=-1pt]\Z.south |-B) -| ([xshift=1pt]\X.south)
 coordinate[pos=0.25](M-\X);
 \draw (M-\X) -- ++(0,-3pt) node[below]{\Y};}
\end{tikzpicture}
\end{document}

Answer 3

这是一种使用装饰将 url 排版为单独节点的方法text effects along path，然后可以使用它来定位括号。

\documentclass[tikz,border=2]{standalone}
\usetikzlibrary{calc,decorations.pathreplacing,decorations.text}
\begin{document}
\begin{tikzpicture}
\path [decoration={
    text effects along path,
    text={https://username:[email protected]:5000/api/person?id=1234\#email},
    text effects/.cd,
        text along path,
        path from text,
        character count=\n,
        every character/.style={
            font=\tt, name=n\n, 
            text height=0.666em, text depth=0.125em, 
            minimum height=0}}, 
        decorate] (0,0);
\foreach \i/\j/\name in {
  1/8/Schema,9/41/Authority,42/52/Path,53/60/Query,61/66/Fragment}
  \draw [decoration={brace, mirror, amplitude=6}, decorate]
    ($(n\i.south west)+(0.05,0)$) -- ($(n\j.south east)-(0.05,0)$)
      node [midway, below=8, font=\scriptsize\sffamily] {\name};
\end{tikzpicture}
\end{document}