と、よく言われました。で、今は、言う方に回りました。年功序列です(^_^;。
確かに、ページ一面を文字で埋め尽くされたドキュメントを見せられると、ちょっとげんなりします。
ExcelやWordなら、ドキュメントに図を埋めるのも簡単ですが、今時のIT業界でExcelやWordでドキュメントを作成するなんてことありえないでしょうから（ゴメンナサイ、嘘言いました）、HTMLに図を入れることを考えなければいけません。
このコンテンツでは、下記のような図をHTMLに埋め込む方法について、簡単に解説します。最近流行りのSVGに関する、さわりみたいなものです(^_^)
随分と前になりますが、「HTMLとSVGを融合させる」というコンテンツを作成しました。SVGがここまでメジャーになるとは思わない頃です（なったらいいなあと思っていた頃でもあります）。
最近は、随分メジャーになったので、これを発展させて見ました。
まずは、普通にSVGでなにか描いてみます。以前はXHTMLを使う必要があったので、少々敷居が高かったのですが、HTML5で標準タグとしてサポートされたので、少しだけ簡単になりました。
HTMLにインラインでSVGを埋め込み表示させるには、以下のようにします。
別ファイルとして読み込む場合は、以下のようにします。
左側の図はimg要素、右側の図はobject要素を使用しています。
実は、SVGにはJavascriptを埋め込めたりするのですが、これが使えるのはobject要素で表示した場合だけのようです。
object要素がどうしても使えないケース以外では、object要素での表示がお勧めです。
外部ファイルにした場合、HTML内のスタイルは反映されないので（まあ、当たり前ですね）、それぞれの要素にスタイルを指定する必要があります。
SVGは便利なのですが、テキストの扱いが意外と面倒です。
四角の中央にテキストを表示するだけでも、テキストの高さや幅を取得して、四角の中央に表示できる位置を算出する必要があります。
また、そもそもWebブラウザ側の対応もまだまだで、画像編集ソフトでよく使われる "Flowing text" にも対応していませんし、Webブラウザによっては、テキストのサイズ変更すら、正しくサポートしていません。
そこで、テキスト（やその他、単なる四角なども含めて）はHTMLにまかせ、HTMLでは難しい（不可能な）部分だけをSVGで処理することで、できるだけ楽をして図を書くことを考えます。
下の図は、昔のコンテンツで作成したサンプルです。
「くらすC」と「くらすD」をマウスでドラッグすると、コネクタが追随します。
このサンプルではカッコつけてコネクタとしていますが、2つのHTML要素を直線で結ぶだけであれば、非常に簡単に実現できます。
このコンテンツの最初に出てきたシーケンス図は、この方式を応用したものです。
下記が、最初のシーケンス図を描くためのスクリプトです。
スクリプトの使い方などは、シーケンス図を描く...を参照してください。