Translate

Post Date：2019年7月22日　

Markdown（Typora）でフローチャートを描く

flowchart.js で描画した横書きフロー

TyporaでMarkdownを始めよう！ | 象と散歩 でTyporaでのMarkdownの書き方を紹介いたしましたが、今回は、TyporaでMarkdown第2弾として、flowchart.js を使ったフロチャートの書き方です。


文法サポートでダイアグラムをチェック

最初にTyporaのメニューバーの "ファイル(F) → 設定" で文法サポートのダイアグラムをチェックをします。

Typora文法サポート

これで、シーケンス図、クラス図、フローチャート、ガントチャートなどを記述することができるようになりますが、今回は、flowchart.js を使ってフローチャートを記述する方法を紹介します。


Markdownでフローチャートを描く

フローチャートは、```flow から ``` の間に記述しますが、Typoraでは、

```flow

と書いて Enterすると、フローチャートダイアグラムが開きますので、こちらに記述していきます。

Typoraでのflowダイアグラム

前半にエイリアス名の定義（エイリアス名==>コマンド: 処理名）を記述します。次に後に定義したエイリアス名を使ってフローを記述していきます。

```flow
# エイリアス名の定義
# フローの記述
```

コマンドの記述方法

エイリアス名で使うコマンド一覧です。利用できるオブジェクトは、処理ボックス、入出力ボックス、サブルーチンボックス、条件分岐などがあります。

コマンド（エイリアス名の定義） 意味
alias_name=>start: TEXT 処理開始
alias_name=>end: TEXT 処理終了
alias_name=>operation: TEXT 処理
alias_name=>iputoutput: TEXT 入出力
alias_name=>subroutine: TEXT サブルーチン
alias_name=>condition: TEXT 条件分岐
alias_name=>COMMAND : TEXT :>URL[https://.....] 処理名のURLリンク
  • alias_name と => の間はスペース不用
  • command: と NAME の間にはスペース必要

下表は、フローを記述するコマンド一覧です。フローはすべてのオブジェクトが繋がるように記載します。

コマンド（フローの記述） 意味
alias_name1->alias_name2 name1からname2へ矢印
alias_name(right) 右方向へ矢印
alias_name(left) 左方向へ矢印
alias_name(yes) alias_name1（条件分岐）で"yes"の場合
alias_name(no) alias_name1（条件分岐）で"no"の場合

縦型のフローチャート例

flowchart.js にもサンプルがありますが、実際の記述と図形を見た方がわかりやすいかと思います。

``` flow
st=>start: 開始
op1=>operation: 処理1
op2=>operation: 処理2
cd1=>condition: 条件分岐1
cd2=>condition: 条件分岐2
sb1=>subroutine: サブルーチン
io1=>inputoutput: 出力 
e=>end: 終了

st->cd1
cd1(yes)->op1->sb1->cd2
cd1(no)->sb1->cd2
cd2(yes)->io1
cd2(no)->op2->io1
io1->e
```

下図は、Typoraで描画したフローチャートです。

flowchart.js で描画した縦書きフロー

横書きのフローチャート例

同じフローチャートを横書きにした例です。横方向に矢印を伸ばすために st(right)->cd1 のように (right) を使います。

``` flow
st=>start: 開始
op1=>operation: 処理1
op2=>operation: 処理2
cd1=>condition: 条件分岐1
cd2=>condition: 条件分岐2
sb1=>subroutine: サブルーチン
io1=>inputoutput: 出力 
e=>end: 終了

st(right)->cd1
cd1(yes)->op1(right)->sb1->cd2
cd1(no)->sb1(right)->cd2
cd2(yes)->io1
cd2(no, right)->op2->io1
io1->e
```

Typoraで描画するとこんな感じです。

flowchart.js で描画した横書きフロー

まとめ

draw.ioなどでフローチャートを描いて画像で貼り付けてもいいのですが、Markdownのプレーンテキストの特徴を生かして flowchart.js でフローを描きましょう。同じくTyporaでサポートしているMermaidでもフローチャートを記述できますが、flowchart.jsの方がシンプルなフローで好きです。


Typora で Markdown シリーズ

Typora での Markdown の記述方法については、下記のシリーズで紹介しています。





Posted by 0 件のコメント:
カテゴリ: , ,
Post Date：2019年7月21日　

TyporaでMarkdownを始めよう！

最高のMarkdownエディタtypora

Markdownは、文章を記述するための軽量マークアップ言語でネット上で文章を共有するのに便利に使えます。拡張子は.mdですが、中身はテキスト文章なので軽量ですし、特殊なエディタやビューアーがなくても中身を確認できます。

IT技術者でなくてもブログの下書き、メモやレポートなどにも活用できます。


Markdown形式の特徴

  • シンプル

    簡単な記号で書式を指定できるので、HTMLタグよりも100倍簡単です

  • 書式が使える
    Markdownは、表（テーブル）もあり、使える書式も文章を書く上で十分です。また、LaTeX, flow, sequence, mermaid をサポートしているので、数式、フローチャート、シーケンス図、ガントチャートなどもテキスト表記で描けます
  • 互換性がある
    MarkdownからHTML、Word形式、PDFなど他のフォーマットに変換できます

Markdownは、シンプルで書式が使えて、互換性があるだけではありません。何よりも キーボードから手を放さぜずに書けるというのは、文章を書く上でとても大切なことです。


Typoraは最強のMarkdownエディタ

多くのMarkdownエディタが、編集画面と表示画面の二画面で構成されていますが、Typoraは、WYSIWYG（What You See Is What You Get）なインターフェイスで、入力したものがそのまま描写されます。またフローチャート、シーケンス図、ガントチャートなどもコマンドベースで作成することができます。

更には、後述するGUIでの表（テーブル）機能のサポート、Excelなどからの表のコピペ、画像コピペなど、コマンドで面倒な部分はGUIでサポートしてくれます。Typoraは、Linux/Mac/Windowsで動作し、現在は、β版ということで無料で利用できます。

2021年11月に有料となり¥1,969（税込）です。クレジットカード/デビッドカード、PayPalで購入できます。（2022/1/31追記）

 Typoraの特徴
  • 軽量でシンプルなエディタ
  • WYSIWYGなインターフェイス
  • フローチャート、シーケンス図など図が描写できる
  • 面倒なコマンドはGUIでサポート

と、とっても便利なTyporaです。いま時点で最高のMarkdownエディタだと思います。


TyporaでのMarkdown文法

Typoraは、下記の段落と改行以外については、標準のMarkdownに準拠しています。

【目次】Markdownの文法

段落と改行

ネット上で共有されている文章は、読み手の環境に依存するために改行はあまり使われていません。受けとったメールが変なところで改行されていて読みづらいと思ったことは、誰しもが経験したことがあるのではないでしょうか。

文章を読みやすくするためには段落を使います。HTMLでは<p></p>で文章を囲みますが、MarkdownではEnterを押して改行すると次の段落になります。Markdownでも改行はあり、半角スペース2つで改行なのですが、TyporaではSHIFT+ENTERで改行となります。

改行された
文章


見出し

見出しは6段階です。＃の数が少ない方が大きな見出しとなり、htmlのh1からh6タグまでに相当しています。

# 見出し（h1）
## 見出し（h2）
### 見出し（h3）
#### 見出し（h4）
##### 見出し（h5）
###### 見出し（h6）

Sample
見出しのサンプル


リスト

リストは - か * です。Tabキーでインデントを付けることもできます。 

- 順序なし１
 - インデント１
  - インデント２
- 順序なし２

Sample
  • 順序なし１
    • インデント１
      • インデント２
  • 順序なし２

番号を付けたリストも作成できます。番号は、1.からでなくても始められます。Enterで次のリストとなり、文字を入力せずに続けてEnterするとリストは終了します。

1. 順序付き１
 1. インデント1
 2. インデント2
2．順序付き２

Sample
  1. 順序付き１
    1. インデント1
    2. インデント2
  2. 順序付き２

チェックボックスも作ることができます。

- [x] チェック済み
- [ ] 未チェック

Sample
チェック済み
未チェック

文字を強調する

文字を *（アスタリスク）で囲むと斜体になります、アスタリスクふたつで囲むと太字で、三つで囲むとと斜体と太字の組み合わせとなります。

*斜体（イタリック）*
**太字**
***Bold & Italic***

Sample
Shatai(Italic)
太字
Bold & Italic

打消し線

~（チルダ）2つで囲むと打消し線付きの文字となります。

~~打消し線~~

Sample
打消し線

参照リンクは、[タイトル](URL)で記述します。

[象と散歩](https://walking-elephant.blogspot.com)

Sample

画像

画像の差し込みは、参照リンクの記述と似ていますが、先頭に!（エクスクラメーション）を付けます。

![画像タイトル](画像URL)

で指定します。Typoraでは、![画像タイトル](まで入力するとURL指定とフォルダからの画像選択の両方を促す表示となります。WEB上の画像を利用するのであれば ”画像のURLを入力” にURLを指定し、ローカルに保存されている画像を使う場合は、フォルダアイコンをクリックして画像を選択します。

Typoraで画像挿入

もっと簡単に画像をコピー&ペーストすることもできます。画像をコピペするとWindowsであれば、C:\Users\ユーザ名\AppData\Roaming\Typora\typora-user-images\ に画像が保存されます。


引用

引用は > を使います。二重引用の場合は >> です。メールなどの引用符でも使いますから馴染みがあるかと思います。

> 象と散歩をするようにゆっくりとデータ解析やマーケティングについて考えて
> みようと思っていますが、物欲という雑念が払拭できません。
> 趣味のエギング、アクアリム、三線は永遠の初心者です。
>
> 【引用】[象と散歩](https://walking-elephant.blogspot.com)

Sample
象と散歩をするようにゆっくりとデータ解析やマーケティングについて考えてみようと思っていますが、物欲という雑念が払拭できません。趣味のエギング、アクアリム、三線は永遠の初心者です。

【引用】象と散歩

コード

1行でコード（等幅フォントで整形）を記載する場合は、`（バッククォート）で囲みます。

`1+1=2`

複数行の場合は `（バッククォート）３つで括りますが、Typoraの場合、```で改行、若しくは、``` 言語名でコード入力用のボックスが生成されます。

``` gas
function myFunction() {
Browser.msgBox('hello, world!');
}

注釈

文献を引用した場合や、補足説明をする場合に使う注釈は、[^注記号] と [^注記号]: 補足文 を使います。本文中の注記号にマウスオーバーすると補足文の内容が表示されます。

Sample
注釈のつけ方1
1 注釈1の補足↩

表（Table）

表（Table）は、各セルの内容を |（パイプ） で括ります。列は2列以上が必要で、最初の行はTable Header（TH）となり、2行目が表レイアウト、3行目からが、Table Data（TD）となります。2行目の表レイアウトは省略できます。

|TH1|TH2|TH3|
|----|----|----|
|TD1|TD2|TD3|

Sample
TH1 TH2 TH3
TD1 TD2 TD3

表の幅は100％（表示画面の最大）ですが、各セルの比率は、-（ハイフン）で変更することができます。またセル内の左揃え、中央揃え、右揃えは、:(コロン)で表します。

|左揃え|中央揃え|右揃え|
|:--|:----:|--:|
|TD1 |TD2 |TD3 |

Sample
左揃え          中央揃え          右揃え
TD1
TD2
TD3

Typoraの場合は、最初のヘッダー行のみ入力をしてエンターを押すと、表ツールが立ち上がるので、行、列の追加削除、文字位置などが簡単に行えます。

Typoraで表を作成


水平線

水平線は、***, 若しくは、---で書きます。

Sample

エスケープ

Markdown として意味がある記号の前に、\ を書くと文字をそのまま記述できます。

\*\*太字になりません\*\*

Sample
**太字になりません**

目次

Tyoraで目次を作成するときは、[TOC]と記載するだけです。見出しの1~6が目次となります。


Typora の文法サポート

Typoraでは、メニューバーの "ファイル(F) → 設定" で文法サポートの各項目をチェックすると、下付き、上付き文字、ハイライトがサポートされます（ダイアグラムについては別途説明）。

Typora文法サポート


下付き文字

下付き文字は、~（チルダ）で囲みます。

H~2~O

Sample
H2O　

上付き文字

上付き文字は、^（ハット）で囲みます。

X^2^

Sample
X2

ハイライト

文字をハイライトするときは、=（イコール）ふたつで囲みます。

==ハイライト==

Sample
ハイライト

絵文字

Markdownでは、絵文字コードを :（コロン）で囲って、絵文字を埋め込めむことができます。しかし、絵文字コードを覚えるのは大変です。絵文字を使うのであれば、EMOJI CHEAT SHEET に絵文字の一覧があります。絵文字をクリックするとコードがコピーされるので便利です。但し、:simple_smile:などのいくつかの絵文字は使えませんでした。

:smile:
:sweat:
:cry:
:thumbsup:
:elephant:

Sample
😄😓😢👍🐘

HTMLタグで文字装飾をする

TyporaではHTMLタグもそのまま記載できます。文字色ぐらいはMarkdownでも対応してもらいたいところですが、下線、文字色、文字寄せ、ルビ文字などは、HTMLタグで記述します。


HTMLで下線

下線はhtmlタグ<u>を使います。

<u>下線</u>

Sample
下線

HTMLで文字色

文字色はhtmlタグ<font>を使います。

<font color="red">文字を赤色にする方法</font>
<font color="blue">文字を青色にする方法</font>
<font color="gray">文字を灰色にする方法</font>

Sample
文字を赤色にする方法
文字を青色にする方法
文字を灰色にする方法

HTMLで文字寄せ

文字寄せは divタグ の style属性 を使います。

<div style="text-align: right;">
右寄せ
</div>
<div style=”text-aligh: center;”>
中央寄せ
</div>
<div style=”text-align: left;”>
左寄せ
</div>

Sample
右寄せ
中央寄せ
左寄せ

追記：2019.08 文字寄せについて追記しました。


HTMLでルビ文字

ルビ文字はhtmlタグ<ruby>を使います。

<ruby>霰<rt>あられ</rt></ruby>

Sample
霰あられ

LaTeXで文字装飾をする

Typoraの文法サポートでインライン数式をチェックするとLaTeXが使えます。LaTeXは、数式の記述や論文の体裁を整えるためのものですが、ちょっと構文が面倒です。[改訂第7版]LaTeX2ε美文書作成入門 など書籍で勉強するか、LaTeXコマンド集 を参照してください。

TyporaでLaTexを使うには、$（ダラー）で囲みます。複数行にまたがる場合は、$$で囲みます。


LaTexで数式

数式はこんな風に書きます。

$ \ce{CH4 + 2 $\left( \ce{O2 + 79/21 N2} \right)$} $

Sample
数式

LaTexで文字色

LaTeXを使って文字色を付けることもできます。

$ \textcolor{red}{文字色を赤色にする方法} $
$ \textcolor{blue}{文字色を青色にする方法} $
$ \textcolor{gray}{文字色を灰色にする方法} $

Sample
文字色を赤色にする方法
文字色を青色にする方法
文字色を灰色にする方法

Markdownで図形も描ける

Typoraでは、文法サポートのダイアグラムをチェックしていると、フローチャート、シーケンス図、ガントチャートいった図形もプレーンテキストで表記することができます。こちらの記述方法については、別途、書きたいと思います。

簡単シンプルで色々できるMarkdownをTyporaで始めましょう。


Typora で Markdown シリーズ

Typora での Markdown の記述方法については、下記のシリーズで紹介しています。
参考にしてください。







Markdownライティング入門　プレーンテキストで気楽に書こう！
技術の泉シリーズ（NextPublishing）
楽天市場で調べる
Amazonで調べる



Posted by 0 件のコメント:
カテゴリ: , ,
登録: 投稿 (Atom)

象と散歩：人気の投稿（過去7日間）

  • 破壊的価格！ダイソーで440円で買える棕櫚（しゅろ）ほうき
    棕櫚（しゅろ）ほうき は、シュロ（ヤシ科植物）の繊維質の樹皮を束ねて先端をほぐしたシンプルな作りのほうきです。イネ科のホウキモコロシを束ねて作る江戸箒（座敷ほうき）より歴史は古く、日本古来のほうきですが、柔らかい繊維の穂先で細かいゴミまでしっかりキャッチできます。 そんな...
  • Excelで簡単テーブル結合
    Excelでデータを結合する関数に VLOOKUP がありますが、使っていないと直ぐに忘れてしまうし、複数の列で結合するのは、ちょっと面倒です。しかし、Office365、若しくは、Office2016以降であれば [ データ ]タブの[ データの取得と変換 ]を使えば簡単に...
  • GASでGoogleフォームの値を取得する（フォームを指定）
    Googleフォームでの回答内容をGAS（Google Apps Script）で参照する方法です。 Googleフォームの値を取得するには2種類の方法があります。 フォームが実行されたときに値を取得 フォームを指定して回答内容を取得 今回は、「フォ...
  • 合皮カバンの剥がれは補修クリームでキレイに直せる
    MOUSTACHE（ムスタッシュ）の持ち手が本革で、本体は合皮（合成皮革）のトートバックを使っています。合皮の鞄は、軽く、柔らかくてしなやかな手触りが特徴で、耐水性もあるので雨の日でも使えます。 デザインもシンプルで軽いバッグなので気に入っていたのですが、擦れやすい鞄...
  • Echo の音質を改善する７つの方法
    Echoで音楽を聴くようになったのは Amazon Echo（第3世代）からです。 当初は、無指向性モノラル スピーカーから流れる音楽に満足していました。しかし、Echo第3世代 をステレオ化したら、音の広がりが予想以上に気持ちがいい。 これならばと Echo Plu...
  • GASでGoogleフォームの値を取得する（トリガー編）
    Googleフォームでの回答内容をGAS（Google Apps Script）で参照する方法です。 Googleフォームの値を取得するには2種類の方法があります。 フォームが実行されたときに値を取得 フォームを指定して回答内容を取得 今回は、「 フ...
  • GASでシートを処理するなら配列を使え！
    GoogleスプレッドシートをGAS（Google Apps Script）で処理するのであれば配列を覚えましょう。配列を使ってシートの読み書きを一括で行うと処理が格段に速くなります。 なぜ配列を使うのか GASには、 Google Sheets のアクセス...
  • プレゼンで開始と終了時間を指定した Youtube の再生方法
    PowerPoint で作成したプレゼン資料に Youtubeの動画を使おうと思ったのですが、使いたいのは動画の一部分だけです。 Youtubeの再生で開始時間と終了時間を指定する方法がないかと探してみると 、Googleの開発者向けページに  YouTube 埋め込みプ...
  • Googleスプレッドシートの更新された値を知る
    Googleスプレッドシートの特定セルの値が更新されたらかを知る方法についての説明です。 スプレッドシートでのプロジェクト計画管理については、 スプレッドシートでプロジェクト計画を作成する方法 - Google Workspace ラーニング センター  に説明があります...
  • GASでExcelをGoogleスプレッドシートに変換する
    ExcelファイルのデータをGASで処理するには、GoogleDrive上でExcelファイルを開いてGoogleスプレッドシートで保存する必要があります。 小さなExcelファイルなら上記の方法でも構いませんが、大きなExcelファイルだと ”Googleスプレッド...