documentclass{article}
usepackage{tikz}
begin{document}
usetikzlibrary{patterns,arrows,decorations.pathreplacing}

begin{figure}
newcommand{tikzmark}[1]{tikz[overlay, remember picture] coordinate (#1);}

tikzmark{begin}%
http:
tikzmark{schema}
//user:password@domain.com:port/resource
tikzmark{query}
?query=foo
tikzmark{fragment}
#fragment
tikzmark{end}

tikz[overlay,remember picture] {
  draw[decorate,decoration={brace,raise=5mm,amplitude=24pt}] (begin.north west) -- node [above=16mm] {URI} (end.north east) ;
  draw[decorate,decoration={brace,raise=2mm,amplitude=24pt,mirror}] (schema.south west) -- node[below of=begin, below=6mm] {Schema} (end.south east) ;
  draw[decorate,decoration={brace,raise=2mm,amplitude=6pt,mirror}] (fragment.south west) -- node[below of=begin, below=6mm] {Fragment} (end.south east) ;
}
end{figure}
end{document}

overbrace{URI}{underbrace{schema}{http:}underbrace{specific}{//underbrace{credentials}{user:pass}}}

documentclass{article}

usepackage{tikz}
usetikzlibrary{matrix}
usetikzlibrary{decorations.pathreplacing}

tikzstyle{overbrace text style}=[font=tiny, above, pos=.5, yshift=3mm]
tikzstyle{overbrace style}=[decorate,decoration={brace,raise=2mm,amplitude=3pt}]
tikzstyle{underbrace style}=[decorate,decoration={brace,raise=2mm,amplitude=3pt,mirror},color=gray]
tikzstyle{underbrace text style}=[font=tiny, below, pos=.5, yshift=-3mm]

begin{document}

begin{tikzpicture}

    matrix[name=M1, matrix of nodes, inner sep=0pt, column sep=0pt]{
      node (schema) [text=red] {http:vphantom{/}}; & node (schema-spezifisch) [text=black] {//}; & node (nutzerinfo) [text=orange] {user:passvphantom{/}}; & @ & node (host) [text=blue] {www.example.comvphantom{/}}; & : & node (port) [text=blue!40] {1234vphantom{/}}; & node (pfad) [text=red] {/directory/index.php}; & node (query) [text=purple] {?key=valuevphantom{/}}; & node (fragment) [text=green] {#anchorvphantom{/}};  \
    };

    draw [overbrace style] (schema.north west) -- (schema.north east) node [overbrace text style] {Schema};
    draw [overbrace style] (schema-spezifisch.north west) -- (fragment.north east) node [overbrace text style] {Schema-Spezifisch};
    draw [underbrace style] (nutzerinfo.south west) -- (nutzerinfo.south east) node [underbrace text style,text=orange] {Nutzerinfo};
    draw [underbrace style] (host.south west) -- (host.south east) node [underbrace text style,text=blue] {Host};
    draw [underbrace style] (port.south west) -- (port.south east) node [underbrace text style,text=blue!40,baseline] {Port};
    draw [underbrace style] (pfad.south west) -- (pfad.south east) node [underbrace text style,text=red] {Pfad};
    draw [underbrace style] (query.south west) -- (query.south east) node [underbrace text style,text=purple] {Query};
    draw [underbrace style] (fragment.south west) -- (fragment.south east) node [underbrace text style,text=green] {Fragment};

end{tikzpicture}

begin{tikzpicture}

    matrix[name=M2, matrix of nodes, inner sep=0pt, column sep=0pt]{
      node (URI) {http:}; & node (schema) [text=black] {//user:password@domain.com:port/resource?query=foo}; & node (fragment) {#fragment};  \
    };

    draw [overbrace style] (URI.north west) -- (fragment.north east) node [overbrace text style] {URI};
    draw [decorate,decoration={brace,raise=6mm,amplitude=3pt,mirror},color=gray] (schema.south west) -- (fragment.south east) node [font=tiny, below, pos=.5, yshift=-7mm] {Schema};
    draw [underbrace style] (fragment.south west) -- (fragment.south east) node [underbrace text style] {Fragment};

end{tikzpicture}

end{document}

usepackage{twoopt}
newcommandtwoopt{tikzoverbrace}[5][][]{draw [overbrace style,#1] (#3.north west) -- (#4.north east) node [overbrace text style,#2] {#5};}
newcommandtwoopt{tikzunderbrace}[5][][]{draw [underbrace style,#1] (#3.south west) -- (#4.south east) node [underbrace text style,#2] {#5};}

tikzoverbrace{schema-spezifisch}{fragment}{Schema-Spezifisch}

draw [overbrace style] (schema-spezifisch.north west) -- (fragment.north east) node [overbrace text style] {Schema-Spezifisch};

tikzunderbrace[][text=orange]{nutzerinfo}{nutzerinfo}{Nutzerinfo}

draw [underbrace style] (nutzerinfo.south west) -- (nutzerinfo.south east) node [underbrace text style,text=orange] {Nutzerinfo};