全角記号の「│」、「├」、「└」を使って構造を作り＜pre＞タグでくくる。
この時タグはdisplay:block;として下記のように記述すると、下図のような簡易図が表示できる。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <div><pre style="line-height : 100%;padding : 10px 10px;border-width : 2px;border-style : solid;border-color : rgb(3, 3, 3);width : 300px;float : left;display : block;">postmail │ postmail.html │ postmail.cgi │ check.cgi │ init.cgi ├ lib │ │ jcode.pm │ └ jcode │ ｜ *.pm ├ data │ │ log.cgi │ │ ses.cgi └ data │ mail.text │ reply.txt │ conf.html │ thx.html │ err1.html │ err2.html</pre></div> |
postmail │ postmail.html │ postmail.cgi │ check.cgi │ init.cgi ├ lib │ │ jcode.pm │ └ jcode │ ｜ *.pm ├ data │ │ log.cgi │ │ ses.cgi └ data │ mail.text │ reply.txt │ conf.html │ thx.html │ err1.html │ err2.html