【ドキュメントが書きたくなる】Markdownライブプレビュー + インライン数式/UML/図表 + 綺麗にPDF/Wordエクスポートまで

  • 275
    いいね
  • 2
    コメント

これはなに

インライン数式、UML、図表をライブプレビューしながらMarkdown+αで記述でき、PDF/Word/HTMLなどへのエクスポート機能をもつAtomプラグインmarkdown-preview-enhancedを紹介します。
これを使うと、ドキュメント作成が捗ること間違いなし。

Github上では、Packageは2016年3月に開発スタートし、継続して成長しています。

(16.9.23追記) 図表を含めたexportは、pdf, html exportでは使えるが、pandoc では未対応(Issue #138, pandoc export機能詳細)。word形式を使いたい時に課題あり。取り込みに期待です。

https://atom.io/packages/markdown-preview-enhanced より引用

準備

下記を導入する必要があります。

markdown-preview-enhancedの導入

  • メニュー Atom> Preferencesを起動
  • Installを選択
  • markdown-preview-enhancedを検索し、Installを押す

依存ライブラリの導入

Macの場合

homebrewをお使いなら、下記で一発です

$ brew install pandoc graphviz

その他環境

下記などを参照する

使ってみる

ライブプレビュー

Markdown形式で記述したドキュメントの体裁をライブプレビューで確認できる。

  • メニュー Packages> markdown-preview-enhaned> Toggle または、ctrl + shift + m で起動

注: ショートカット ctrl + shift + m がかぶるので、 markdown-previewをDisableしておく

インライン数式/UML

数式を埋め込む

KaTeXや、MathJaxが使うことができる。$...$や、$$...$$記法をサポートしている。

https://atom.io/packages/markdown-preview-enhanced より引用

UMLを埋め込む

PlantUMLというDiagram as a Codeを実現できるUML記法がある。

PlantUML: Open-source tool that uses simple textual descriptions to draw UML diagrams.

AtomではPlantUMLをライブプレビューしてくれる plantuml-viewer はとても良い。

AtomとPlantUMLで爆速UMLモデリング - Qiita

具体的には下記のUMLを作成できる。

  • シーケンス図
  • ユースケース図
  • クラス図
  • アクティビティ図
  • コンポーネント図
  • 状態遷移図
  • オブジェクト図

markdown-preview-enhanced では、下記の書式で、PlantUMLをドキュメントに埋め込んだ状態で編集できる。

```{puml}
A -> B
` ``

図表を埋め込む

他にも下記のような図表埋め込みに対応している。
- mermaid でガントチャート、フローチャートを描画する

https://atom.io/packages/markdown-preview-enhanced より引用

  • Viz.js でGraphviz互換、.dot形式で有向グラフ等を描画する
  • WaveDrom でデジタル信号のタイミングダイアグラムを描画する

に対応している。そのため、Atom内で完結して、文章と図表や数式を組み合わせたドキュメントが作成できてしまう。
ほんと感動した。

エクスポート

どこかに提出したり、レビューしてもらう時に使う。pdf, wordなどにエクスポートを出し分けられる。
front-matter を下記書式で文頭に書いた上で、プレビュー画面のコンテキストメニューからPandocを選択する。

---
title:  "{タイトル}"
author: {あなたのなまえ}
date:   {日付}
output: word_document
---

(指定がないと、「エクスポート形式指定がない」と怒られる)
title, author, date は文頭に挿入される。outputで指定した形式で出力される。

スライドを作成する

(追記中)

その他

wordデフォルトテンプレートの水色の見出しが気持ち悪いよ!

のひとは下記などを参考に、テンプレートを差し替える。

プログラマの文書作成術:Markdown, LaTeXなどの文書からWord文書を生成する - Qiita