Help us understand the problem. What is going on with this article?

テキストベースでグラフを書く(Octopress/Jekyll 向け)

More than 5 years have passed since last update.

this is non-directed graph

↓って書くと↑こうなる。ってやつを作った。

{% graph %}
a -- b
b -- c
c -- a
{% endgraph %}

有向グラフの時は、{% digraph %} を使う。

{% digraph %}
a -> b
b -> c
c -> a
{% enddigraph %}

インストール方法

Graphviz と Octopress プラグインをインストール

installation.sh
sudo apt-get install graphviz
cd <your_octopress_dir>/plugins
wget https://raw.github.com/kui/octopress-graphviz/master/graphviz_block.rb

もう少し複雑な図を書く

Graphviz の公式サイト を参照してください。

Graphviz のソースコードを書きたい

{% graphviz %} ブロックを使う。

{% graphviz %}
digraph g {
 a -> b
 b -> c
 c -> a
}
{% endgraphviz %}

おわり

HTML 内に SVG 要素を埋め込んでるので、HTML5 前提になってる。一応 altnative text みたいなのには簡単に対応しているので、ひょっとしたらちゃんと表示されるかも。確認していない。

確認していないけど Jekyll でも動くそうな。

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away