ようこそ!浜村拓夫の世界へ

    ブログ内検索

    最近の記事

    ブックマーク数の多い記事

    Blog Translation

    Powered By FC2ブログ

    Powered By FC2ブログ
    ブログやるならFC2ブログ


    FC2ブログ LOGIN

    with Ajax Amazon

    mermaid.jsでインフォグラフィックを作成

    このエントリーを含むはてなブックマーク はてなブックマーク - mermaid.jsでインフォグラフィックを作成 あとで読む
    インフォグラフィックの作成支援ツールとして、「mermaid.js」というJavaScriptライブラリーが有効だろうか?(メモ)

    http://knsv.github.io/mermaid/

    mermaid.jsが素晴らしいけどなかなか使ってる人見かけないので実例晒す(追記あり) - Qiita

    mermaid.jsとは

    JavaScriptのチャート作成ライブラリです。他にも似たようなのは色々ありますが、これ一本でフローチャート、シーケンス、ガントに対応してるので、個人的にお気に入り。



    DailyJS | マークダウン風にグラフを生成するD3ベースの「Mermaid」 | JSお散歩

    本を書いている時にちょっとダイアグラム(※)を付け足したいと思うことはよくある。
    ダイアグラムを入れるのは効果的だが、ドローツールを引っ張りだすのは面倒臭い。
    本当に煮詰まっている時には紙とペン、あるいはアスキーアートで済ませがちだ。
    これは普通の人がテキスト編集する場合と同様だろう。
    エディタでフォントやタグをいじるよりマークダウンを使う方がずっと効率的だが、多くの人は面倒臭がって憶えようとはしない。

    そんなわけで Mermaid(GitHub: nsv/mermaid、MIT、Bower: mermaid)はちょうど私のツボにはまった。

    Mermaid の描画には d3 が使われている。
    d3 を使っているのならどこにでも Mermaid が使用可能だ。



    静的なデータからインフォグラフィックを作成したいとき、Adobe Illustratorで十分だろう。
    動的なデータから、インタラクティブなインフォグラフィックを作成したいとき、Web上ならJavaScriptの描画ライブラリを使えば良いだろう。
    関連記事

    コメント

    コメントの投稿


    管理者にだけ表示を許可する

    トラックバック

    トラックバックURL:
    http://hamamuratakuo.blog61.fc2.com/tb.php/1239-3c7df1ed

    FC2Ad