nDiki : SVG

SVG - Scalable Vector Graphics

スポンサード リンク

2006年1月21日 (土)

SVG ドローツール Inkscape 0.43

InkscapeSodipodi からフォークしたドローツールである。 ロジック的な作図については最近もっぱら JUDE/Community を使っているが、やはりフリーハンドなドローツールも1つ使えるようにしておきたい。

以前少し使ってみた Sodipodi よりは使い勝手が良い感じ。 今度はこれを使ってみようかな。

やっぱりマウスが欲しくなってきた。

スポンサード リンク
[ 1月21日全て ]

2010年8月13日 (金)

今日のさえずり: __FILE__ と __LINE__ を吐かせる日

naney:4896054531

2010年08月13日

  • 09:37 RT @shuzo_matsuoka: おい!13日の金曜日たん!気にするな!大丈夫!!僕がついていれぞ!はい!でもさらに仏滅!でも気にしない!
  • 09:47 今日は #C78 あたりをチェックしていれば動きがわかるのかな?
  • 09:49 京浜東北線時間調整につき山手線にスイッチ。
  • 09:54 「お、望遠レンズ?」とおもったら水筒。
  • 10:02 今週なら覗いたんだけどな。 http://movapic.com/...
  • 10:19 Windows Update がかかっているのでスロースタート中。
  • 11:15 夜はみんなで @as_tone の家に移動してデバッグ? RT @as_tone: 弁当忘れた…夜の分も…
  • 12:24 #C78 同じ話題が何度も何度も出てくるので辛い。
  • 12:26 家から持ってきたバームクーヘン冷蔵庫に入れておくの忘れてた。1片は今食べてもう1片は冷蔵庫へ。
  • 12:39 Inkscape Portable ってあったんだ。
  • 12:51 EvernoteSVG 形式ファイルをインラインで表示できればハッピーなんだけどな。
  • 14:02 RT @naofumiyoshida: 御巣鷹の日航機事故の時、たまたま家族旅行現場近くにいた。ホテルのロビーにみんな集まってかたずをのんでテレビを見守る異様な雰囲気だったのを覚えている。いつも冷静な父親が慌てていたので、子供ながらただ事ではないと思った。思い出したなう。
  • 14:36 @atq Evernote 上でささっと図を書きたいなと。インクノートだとちょっと。現状だと何かのドロー系ソフトウェアに関連付けられるファイルと、それを画像としてエクスポートしたファイルの両方をノートに貼っておくことになってちょっと手間です。
  • 15:33 std::binary_function から継承してたって operator () があるとは限らないか。 #cpp #cplusplus
  • 15:34 @atq 図に限っていえば検索とブラウズが Evernote に入れたい理由です。ファイルシステムからの解放。
  • 15:38 template クラス化するしかないか。芋蔓式に template 化しなければならないのがちょっと嫌だけど。#cpp #cplusplus
  • 16:27 あれー、公園前の通りにドトールあったと思ってたんだけど。
  • 16:30 ダブルエスプレッソ 168円。 (@ ファミリーマート神田佐久間町店) http://4sq.com/biJuCj
  • 17:18 @atq Evernote + 添付はファイル名の呪縛から解放されるという点が、個人的に気に入っています。
  • 19:17 __FILE__ と __LINE__ を吐かせる日がやってまいりました。
  • 19:56 帰りの時刻表 Evernote にクリップ。終電は逃せない。
  • 21:10 親子丼 490円。 (@ なか卯 神田佐久間町店) http://4sq.com/9tdwTs
  • 21:28 今日の親子丼とってもあっさりだった。というかこれ失敗だろ、分量違いか何か入れ忘れか。テイクアウトで入れ忘れられていて、こちらから声をかけたぐらいだし、覇気がなかったし、まあこれぐらいで済んでよかったのかも。
  • 22:38 @madaaamj 店員一人ぼっちだったのでちょっと同情してあげました。
  • 22:40 @madaaamj Evernote ようやく使いどころが分かってきたかなというところです。スマートフォンからノート追加したり、逆に閲覧できたりするの便利ですよ。自分も Xperia にしてからグンと使うようになりました。
  • 23:10 結構ハズレがあるんですねえ。 RT @suzukis: 限りなく卵かけごはんに近い親子丼を出されたことならあります。卵入れ忘れたかと本気で疑いました RT @Naney: 今日の親子丼とってもあっさりだった。というかこれ失敗だろ、分量違いか何か入れ忘れか。
  • 23:11 「そろそろ熱海の捜査官ですね」 in office。
  • 24:11 えーと、東京ビッグサイトのアレ、パソケット?
  • 24:46 弁当どうなってたんだろ。
[ 8月13日全て ]

2011年2月14日 (月)

今日のさえずり: 国出身の人の方がよっぽどはしゃいでる

2011年02月14日

  • 09:23 今日からマスクしてる。
  • 10:32 4GB の TrueCrypt 仮想ボリュームの3/4を使って心許無くなってきたので 8GB で作り直しているところ。ついでに TrueCrypt も 6.3a から 7.0a にアップデート
  • 13:40 プリンタ保守契約をしている会社の、エンジニアも営業マンも「代替」を「だいがえ」と言うので気持ち悪い。
  • 13:54 バレンタインデーのチョコレートは去年単発でしたね。やはり。 http://bit.ly/gwg4Hf
  • 14:56 Windows で MD5 を計算するのは CryptoAPI かな。
  • 14:56 @as_tone 大丈夫です。持参しました!
  • 16:12 C++ (Windows)での MD5、CryptAcquireContext -> CryptCreateHash -> CryptHashData -> CryptGetHashParam のラッパー書いて Perl の Digest::MD5 で検算。行数の違い泣ける。
  • 17:06 ここ最近 git commit; git branch new-feature; git reset --hard master^; git checkout new-feature してばかり。
  • 18:32 Google Apps アカウントの新しいインフラストラクチャ移行に関する組織内向けアナウンスの草稿を書いてる。今月末には全員移行させたい。
  • 21:43 『東京ってがちょっと降ったぐらいで電車止まったり大騒ぎしたりするよね』っていう国出身の人の方がよっぽどはしゃいでる。東京生まれは実はそんなの何とも思ってない。
  • 21:44 って毎回思う自分も自分。
  • 21:53 思ったより早く剥げてきた。しかも剥れっぷりが半端ない。これがエレコム クオリティか。「Xperia 宇宙刑事シャリバンシェルカバー (2010-11-14) http://bit.ly/gOcLRr
  • 21:54 こっちの方が長持ちした。「Xperia 宇宙刑事シャリバンジャケット (2010-04-11) http://bit.ly/91n8Ip
  • 21:59 次の Xperia のカバーはレイアウトのハードコーティングシェルジャケット RT-SE10C2/R にしようかな。ラバーコーティングのはホコリがつきやすかったので。 http://amzn.to/em17RZ #Xperia
  • 22:17 えー、前に Inkscape で作った SVG 形式ファイル開いたら中の画像が1つ「Linked image not found」って。
  • 22:26 SVG ファイル開いて image 要素の xlink:href で file: で参照しているところを発見。
[ 2月14日全て ]

2011年2月20日 (日)

今日のさえずり: 今日は白骨温泉(自宅)

2011年02月20日

[ 2月20日全て ]

2014年12月20日 (土)

今日のさえずり: やられたー。イチゴが高くなってる。

2014年12月20日

[ 12月20日全て ]

2019年6月25日 (火)

HTML ページ中の mermaid 定義を自動的にクライアント側で SVG 変換し表示させる

6月上旬に使い始めMarkdown エディタ Typora で mermaid を使いダイアグラムを作成してみたらなかなか良かったので、先日 mermaid のデータから画像を単独で生成できるよう CLI を入れてみた。しかしやはり都度画像ファイルに変換して管理するのは面倒。ちょっとしたノートを置いておくスペース nNote では事前に画像ファイルに変換しないで直接ページ上に書かれた mermaid ダイアグラムを SVG 変換して表示されるように設定してみた。

mermaid.min.js を Web サーバに配置し、ページの下部に以下が含まれるようにフッタファイルを編集。

 <script src="/path/to/mermaid.min.js"></script>
 <script>mermaid.initialize({startOnLoad:true});</script>

これでページ中に

 <div class="mermaid">
 graph LR
     a --- b
     a --- c	
 </div>

のようにダイアグラムの定義をmermaid クラスの要素の中に書いておくと、ダイアグラムの SVG 要素が生成し置き換えてくれる。表示は以下のような感じ。

graph LR a --- b a --- c

画像ファイルの管理から解放されるのでいろいろ捗って嬉しい。

とりあえず nNote 全フッタで mermaid.min.js を読み込むようにしちゃったけれど 8.0.0 ので 1.11MB ありダイアグラムの無いページで読み込ませるのはちょっと忍びない。 mermaid ダイアグラムの定義がある時だけ読み込むようにした方が良いね。

[ 6月25日全て ]

2019年6月26日 (水)

HTML ページ中の Graphviz 定義を自動的にクライアント側で SVG 変換し表示させる

昨日 HTML ページ中の mermaid 定義を自動的にクライアント側で SVG 変換し表示させるようにしたらいい感じなので、勢いで Graphviz の DOT 言語で書かれたグラフ定義も Viz.js を使って SVG 変換できるようにしてみた。

mermaid では HTML ページ中の mermaid クラスをもつ要素を SVG 要素に変換するコードが入っているのだけれど Viz.js にはそれは無さそう。なので mermaid の実装を参考に dot クラスの要素を変換するようにしてみた。

 <div class="dot">
 digraph {
   graph [rankdir = LR];
   a -> b;
   a -> c;
 }
 </div>

と書いたら以下のように変換される。

digraph { graph [rankdir = LR]; a -> b; a -> c; }

mermaid よりずっとメジャーな Graphviz (互換)が使えるとさらに捗って嬉しいぞ。

Viz.js は mermaid よりさらに大きいので、さすがに全ページで読み込ませるのはまずい。なので Viz.js と mermaid についてそれぞれの定義があった場合のみ動的ロードするようにしておいた。

で、まずます動くようになったのでちょっとしたノートを置いておくスペース nNote だけでなく nDiki でも動くように設定しちゃった。Viz.js や mermaid が使えなくなった時のことを考えて記事の寿命が長い nDiki の方では多用はしないつもりではある。

[ 6月26日全て ]

About Me

Naney Naney (なにい)です。株式会社ミクシィで SNS 事業の部長をしています。

nDiki1999年1月に始めたコンピュータ日誌を前身とする NaneyWeb 日記(兼パーソナルナレッジベース)です。ちょっとしたノートは nNote にあります。

※内容は個人的見解であり所属組織とは関係ありません。

月別インデックス
Process Time: 0.050131s / load averages: 0.31, 0.67, 0.63
nDiki by WATANABE Yoshimasa (Naney)
Powered by DiKicker