Diagrams lets you draw the cloud system architecture in Python code. It was born for prototyping a new system architecture without any design tools. You can also describe or visualize the existing system architecture as well.

読書メモを図にしたいとき、簡単なグラフを作成できるツールがあったら便利です。 調べたらいくつか候補がありました。 PlantUML　https://plantuml.com/ja/ Mermaid.js　https://mermaidjs.github.io/ Typora　https://typora.io/ 今回は、手軽に使えて、拡張性もありそうなMermaid.jsを試してみます。 Mermaid.jsとは？ Visual Studio CodeでMermaid.jsを使う方法 Markdown Preview Enhancedの使い方 図の出力 見た目のカスタマイズ 参考 Mermaid.jsとは？ Mermaid.jsは、JavaScriptでグラフやチャート図を描くためのライブラリーです。 （英語の「mermaid」は、日本語で「人魚」という意味） （公式サイト） https:

目的 VisualStudioCodeにてmermaidをコーディングしてMarkdown Preview Enhancedでプレビューすると図の色がうまく出ず、出力しても色がうまく出ないときの解決方法をまとめる。 本記事はtykeさんのMPE(MarkdownPreviewEnhanced)でmermaidのグラフが真っ黒になる問題の情報をもとに作成しています。 tykeさん記事にしていただき本当にありがとうございます。お礼申し上げます。 この記事のターゲット mermaidで図を作ったが、Markdown Preview Enhancedでのプレビューで色がおかしく(下記画像)なってしまった方 解決方法 Markdown Preview Enhancedはインストールしてそのままだと一部の図の色合いがおかしくなる。 プラグインの設定を修正してあげると正常に表示できる。 プラグインバーを

Markdown Preview Mermaid Support Adds Mermaid diagram and flowchart support to VS Code's builtin Markdown preview and to Markdown cells in notebooks. Currently supports Mermaid version 11.3.0. Usage Create diagrams in markdown using mermaid fenced code blocks: ```mermaid graph TD; A-->B; A-->C; B-->D; C-->D; ``` You can also use ::: blocks: ::: mermaid graph TD; A-->B; A-->C; B-->D; C-->D; ::: Con

ふと気になったことを、淡々と赴くままに調査していく、この上ない自己満足記事第五弾。 効率的な学習ぶりの華麗で綺麗な振る舞いの「世の多くの賢人技術者」とは違い、ひたすらに画面遷移と手書き記録を高速回転しながら、心身共に泥まみれの学習ぶりの私。 今回は、テキスト形式で簡単に図形を描ける「mermaid.js」の調査をして、汚れ具合に磨きをかけよう。 概要 Javascriptのチャート生成ライブラリ テキスト形式で、図やフローチャートを生成できる。 公式サイト 環境 Windows10 Visual Studio Code 準備 Visual Studio Codeをこちらからインストール Visual Studio Codeの拡張機能欄を開き、「Markdown Preview Mermaid Support」をインストール 「Ctrl + Shift + X」で拡張機能欄を表示できる。 イ

はじめに 立場上、数週間コードを書かずにパワポや Excel の仕様書を作るような上流工程を担当することが増えてきました。 もちろんそれはそれで大事なお仕事ですしそれなりにやり甲斐はありますが、クリックだけでポチポチと動かない成果物を作り上げるのはプログラマにとって苦痛しかないです。 エンジニア同士であればリバースエンジニアリングでコードから仕様書を生成した無骨な HTML だったり、マークダウンで箇条書きの README.txt を書き上げるのでも良いのですが、要件定義など非エンジニアな人への仕様書に関してはまだまだパワポの設計書が主流です。最近は Microsoft 製品以外にも便利なツールは出ていますが、 ライセンスが高額なためNG オンラインサービスは情報セキュリティ指針上NG などなかなか導入に至らず、結果的にパワポや Excel でチマチマ作図するのがいつものパターンで、 Ma

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 0.注意書き 筆者の本稿での意図はエディタ宗教論争を巻き起こすことではありません。「世の中では、これくらいのことが出来るようになってきている」とご参考にしてただくことが本稿の狙いです。それによって何かのお役に立てれば幸いだなと思っています。 皆さんは自分の使いやすい、皆さんの用途やプロジェクトの環境をにあったエディタを使用していただければとお断りしておきます。 1.Markdown環境について Markdwonは以前に書いたように今後の文書生産性を変えていく可能性のあるツールの一つです。Markdownのメリットは次の点だと思います。

はじめに 最近 Visual Studio Code で Markdown 環境を作ったのですが、markdown-preview-enhancedが思いのほか何でもできて、特に理系のノートとして良さげに感じたのでメモします。 すでに良記事（こちらとかこちらとか）がたくさん挙げられているので参考にしてください。 ノートに求めるもの ノートに求める要素を自分の経験を元に独断と偏見で挙げると、 数式が手軽に書ける 図が手軽に書ける 表が手軽に書ける グラフが手軽に書ける てな感じかと思います。とにかく手軽にサクッと書きたいですよね。 Visual Studio Code + markdown-preview-enhanced はこれら全てを叶えてくれます。 数式を手軽に書く 理系のノートには数式が必須です。数式を書く場合はLaTexをよく用いると思います（Word の人もいるとは思いますが）。

日ごろ、原稿以外のすべてのテキストをMarkdownフォーマットで書くようになってしまっているのですが、数式はLaTeXコマンドで書いています。数式があると、棒グラフや折れ線グラフも書きたくなるケースは多いと思います。「どうやって書くんだろう？」とググりまくってみて、なかなか解決策がヒットしなかったので、同じように時間を無駄にしないように、ここで情報提供しておきます（※自分が書き方とかを見返すための忘備録でもありますが）。 Markdown Preview Enhanced拡張機能と数式（LaTeX） そもそも、数式のLaTeXコマンドは$＜数式のLaTeXコマンド＞$ の形で自然に書いていたのですが、これは、 Markdown Preview Enhanced という拡張機能のおかげでした。。例えば、 LaTexコマンドによる数式の例 のように書くと（※一見、難しそうなコマンドに見えます

Typoraというmarkdownエディタがあり，結構長い期間（2年くらい？）使っていました． Markdown形式でテキストを書くと，リアルタイムで書いたテキストがフォーマットされるという特徴を持ち， 書いてみるととても楽しいです． しかし，長く使っているとデメリットが目立つようになってきました． 現在は使うのをほぼやめて，Visual Studio Codeで主にmarkdownは書いています． 以下，その理由です． 理由1: 大量のメモの整理が難しい 今まで，日常的にちょっとしたメモを残すのにもっぱらtyporaを使っていました． その後，1年以上使っていると，メモが大量に溜まってきて，整理や探すのが課題になってきました． しかし，Typoraはあくまでmarkdownエディタです．Evernoteのように大量のノート（テキストファイル）を管理する用途ではありません． そのため，タグ

mermaid.js はテキストベースでフローチャートなどの図を書くことのできる JavaScript 製のライブラリ・ツールです。簡単にテキストで書けて、図も綺麗に出力されるかなり良い環境だと思います。 以前 AsciiDoc との連携について記事にしましたが、この記事では mermaid.js のフローチャートについて書き方を記載します。 AsciiDoc との連携については下記記事を参考にしてください。

シーケンス図をテキスト表現する Mermaid や Mscgen を、Visual Studio Code でプレビューし、ファイルで保存する Visual Studio Code Extensionsを作成しました。 2022年7月頃：更新 プレビューイメージを、jpeg、png（背景透過する/しない）、SVGの各形式でのファイルまたはSVGでクリップボードに保存する機能を追加しました。Mermaidだけでなく Mscgenでも似た感じで動作します。 Mermaid の公式ライブラリを使う環境で、グラフの上下に巨大な余白が表示されてしまう、という課題がありますが、これも調整してあります。

目的 mermaidにて作成した図を出力する方法をまとめる この記事のターゲット mermaidで描いた図を出力して使いたい方 Markdownファイルにmermaidを記載してMarkdown PDFでhtml出力したらコマンドブロックがそのまま出力されてしまった方 どうにかしてmermaidの図をpngなどの形式で図形を画像として見たい方(図によっては出力出来なかったり文字が荒くなったりします) サンプルコード 本記事の説明で使用するサンプルコードを記載する。 ※記載方法は別途記事でまとめる予定なので、今回は単純に下記のコードをテンプレートとしてコピーして使ってください。 graph LR A[Hard edge] -->|Link text| B(Round edge) B --> C{Decision} C -->|One| D[Result one] C -->|Two| E[R

Introduction 最近、VS codeでメモやドキュメントを残すことが増えて、Markdownで書く機会が増えました。 *2022/2/22 GithubやNotionでも、mermaid記法をサポートしてきており、注目度も上がってきてますね。 いろいろと試しているなかで、Mermaidを使ってガントチャートやシーケンス図も作れる便利さを知り、せっかくなので書き方をnoteしておきます。 VS codeをmarkdown editorとして使用するということ自体は、多くの方がやっています。 特に、VS code + Markdown Preview Enhanced の拡張機能　という構成で使用する人が多く、私もその構成で使っています。 余談ですが、もともとAtmoでかなり支持されていた拡張機能（パッケージ）のようです。 私もAtomを使うには使いますが、VS codeのほうがサク

◆ はじめに 最近、何でも markdown で書きたい欲が凄い。 ただ、markdown だと図とかが描けないので、そういう資料はパワポとかで作っていたが、バージョン管理ができなくて嫌というジレンマをずっと持っていた。 そんな折、簡単な図なら mermaid というツールで描けるということを思い出し、使ってみることにしたら、結構良かったのでメモ。 ちなみに、mermaid は以前参加した岡山 Ruby, Ruby on Rails 勉強会で教えてもらった。 ◆ 構築環境 Windows 10 VSCode インストール済 ◆ 手順 1. VSCode 拡張機能「Markdown Preview Enhanced」のインストール VSCode の拡張機能のタブから「Markdown Preview Enhanced」を入力し、インストール。簡単。インストール後は、再読み込みを忘れずに。 2