텍스트 기반 그래프 작성(Octopress/Jekyll용)

↓라고 쓰면 ↑ 이렇게 된다. 라고 녀석을 만들었다.

{% 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에서도 움직일 것 같습니다.