---
tags: flowchart.js, MarkDown
title: かっこいいから、僅か１３行でフローチャートを描いてみた
---

## かっこいいから、僅か１３行でフローチャートを描いてみた

MarkDownでシンプルなテキストを書くとフローチャートがきれいに表示されるって、かっこいいと思いませんか？

日頃お世話になっている[HackMD](https://hackmd.io/)は、最初から[flowchart.js](https://flowchart.js.org)に対応しているようです。早速フローチャートを描いて見たいと思います。
使い方は簡単です。[公式ページ](https://flowchart.js.org)を読めば大抵のことはできるでしょう。

st=>start: はじめ:>http://www.google.com[blank]
e=>end: おわり:>http://www.google.com
op1=>operation: 操作処理の結果
sub1=>subroutine: サブルーチン(定形手順)
cond=>condition: Yes
or No?:>http://www.google.com
io=>inputoutput: 何らかの入出力処理
para=>parallel: 並行処理
st->op1->cond
cond(yes)->io->e
cond(no)->para
para(path1, bottom)->sub1(right)->op1
para(path2, top)->op1

この僅か１３行のテキストを<span class="ul_05">\`\`\`flow行</span>と<span class="ul_05">\`\`\`行</span>で挟むだけで、下記のフローチャートを表示できました。

<div id="flowchart2">

st=>start: はじめ:>http://www.google.com[blank]
e=>end: おわり:>http://www.google.com
op1=>operation: 操作処理の結果
sub1=>subroutine: サブルーチン(定形手順)
cond=>condition: Yes
or No?:>http://www.google.com
io=>inputoutput: 何らかの入出力処理
para=>parallel: 並行処理
st->op1->cond
cond(yes)->io->e
cond(no)->para
para(path1, bottom)->sub1(right)->op1
para(path2, top)->op1

</div>

## フローチャートを超簡単にスタイリングしてみる
次に、このフローチャートをCSSでスタイリングするにはどうしたら良いのでしょうか。
私は当初、いつものやるように公式マニュアルから、そのテクニックを探りました。しかし数時間も悪戦苦闘したのに、解決できませんでした。
そこで、一旦考えをリセットし、別の作戦を取ることにしました。

その作戦とは、長年のプログラミン実務から得た**自分の感覚**を信じて、課題の技術要素を観察し、ゼロから解決法を導くことです。
1. 現状をブラウザの開発ツールで解析する
2. 解析で得たフローチャートの要素のID等、詳細を理解する
3. 開発ツールでプロパティを編集して意図した変更ができることを検証する
4. その際にSVGのプロパティ要素のクセに十分留意する
例：四角の背景色のプロパティ名は、❌ background-colorではなく、⭕ fill にする

この作戦は成功でした。コードをお見せしましょう！

<style>
#para {
fill:rgba(50,180,0,.2);
stroke:red;
}
</style>

こんな僅かなコードをMarddownソースの適当な場所に挿入するだけで、ほら下図のようにスタイリングできました。

<div id="flowchart1">

st=>start: はじめ:>http://www.google.com[blank]
e=>end: おわり:>http://www.google.com
op1=>operation: 操作処理の結果
sub1=>subroutine: サブルーチン(定形手順)
cond=>condition: Yes
or No?:>http://www.google.com
io=>inputoutput: 何らかの入出力処理
para=>parallel: 並行処理
st->op1->cond
cond(yes)->io->e
cond(no)->para
para(path1, bottom)->sub1(right)->op1
para(path2, top)->op1

</div>

<style>
#flowchart1 #para {
fill:rgba(50,180,0,.2);
stroke:red;
}
.ul_05 {
background:linear-gradient(transparent 0%, #FFFF00 0%);
}

</style>

## この作業で得たもの

もう何年昔のことでしょう。かつて[SVG](http://www.tohoho-web.com/ex/svg.html)が面白くて何度も繰り返して勉強した覚えがあります。

当時はお客様のご要望に応え、より軽量で正確な帳票システムを提供することが目的でした。
今回の体験で、かつて勉強したことがよみがえって役立つことを実感できました。

勉強の積み重ねが知識を定着させ、自力で解決手順を発見するという、更に面白い体験につながりました。

### まとめ

<div style="text-align:center;">
<img src="https://i.imgur.com/1NCQ63L.gif">
</div>

#
## 寄り道 雑談でござる
そもそも、ここで紹介したフローチャート描画を実現しているflowchart.jsを内蔵しているjavascritライブラリのRaphaelってなに？

[公式HPサイト](http://dmitrybaranovskiy.github.io/raphael/)…とてもわかり易い説明があります。[ダウンロードページ](https://github.com/DmitryBaranovskiy/raphael/releases)にも行けます。

[公式ブログ（たぶん）](http://raphaeljs.com/)…このライブラリを作った背景、哲学思想が書いてあり、特に芸術論には感じ入りました。同感です。英語ですが、自動翻訳でも十分に読み応えがあると思います。
少し長いですが、私の心を刺した部分を引用します。

>歴史的に、アーティストは創造的な目的で操作できるあらゆる媒体で作業しますが、世代ごとに人気のある新しい媒体が見つかります。洞窟の壁は人間の発達の初期段階で人気のある芸術的媒体であったため、表現方法はすぐに石の彫刻を作成する方向に移行しました。
>
>新しい素材が登場するにつれて、それらも芸術的な表現に使用されるようになりました。文明の歴史の多くを通して、帆布と油絵の具は素晴らしい絵を描くことを可能にしました。実際、「キャンバス」という言葉は今やあらゆる芸術的媒体の代名詞になっています。
>
>今日、最も人気のある芸術メディアの1つはWebであり、Webブラウザーは新しいキャンバスになりました。アーティストは、その柔軟性だけでなく、個々の傑作であれ、機能的で使用可能な芸術作品であれ、作品のギャラリーとして同時に機能できるため、ウェブに群がります。

原文
>Historically, artists will work with any medium that can be manipulated for creative purposes., but each generation finds new ones that become popular. As cave walls were a popular artistic medium in the earliest stages in human development, modes of expression soon moved toward creating sculptures in stone.
>
>As new materials appeared, they too became used for artistic expression. Throughout much of civilized history, canvas and oil paints made it possible for fantastic paintings to be created. In fact the word “canvas” has now become synonymous with any artistic medium.
>
>Today, one of the most popular artistic media is the web, and the web browser has become a new canvas. Artists flock to the web, not only because of its flexibility, but also because it can serve simultaneously as a gallery for works, be they individual masterpieces, or functional and usable artisinal pieces.

<div style="text-align:center;">
<a href="https://ja.wikipedia.org/wiki/%E3%83%A9%E3%83%95%E3%82%A1%E3%82%A8%E3%83%AD%E3%83%BB%E3%82%B5%E3%83%B3%E3%83%86%E3%82%A3"><img src="https://i.imgur.com/8G7fHeW.png"></a>
</div>

このライブラリの名前でピンと来たのですが、やはりその名の由来は、偉大な芸術家の一人あの有名な[ラファエロ](https://ja.wikipedia.org/wiki/%E3%83%A9%E3%83%95%E3%82%A1%E3%82%A8%E3%83%AD%E3%83%BB%E3%82%B5%E3%83%B3%E3%83%86%E3%82%A3)でした。