全角記号の「│」、「├」、「└」を使って構造を作り＜pre＞タグでくくる。
この時タグはdisplay:block;として下記のように記述すると、下図のような簡易図が表示できる。
<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