昨年末、Notionでmermaidを利用した図が描けるようになりました。 それから今年はGitHub。 ただなんとなく、 「mermaidって難しいんでしょう?」 「図を描くなんてどうやるねん」 そんな固定観念がありました。 しかし弊社は絶賛新サービスの開発中! これからDB設計していくぞ! なフェーズだったので使ってみたらとんでもなく簡単に使えてびっくりしました。 書き方 テーブルを作る 驚きの簡単さ。
Mermaid1はコードで作図することができるツールです。 いままではmermaid.jsが必要でしたが、今回GitHubのMarkdownファイルで、Mermaid記法がサポートされました。 それに伴い、Mermaidで表現できる図についてまとめてみました。 なお簡単にMermaidを試す方法として、Live Editor2もあります。 可能な作図一覧 フローチャート(Flowchart) graph TD A[Christmas] -->|Get money| B(Go shopping) B --> C{Let me think} C -->|One| D[Laptop] C -->|Two| E[iPhone] C -->|Three| F[fa:fa-car Car] sequenceDiagram Alice->>+John: Hello John, how are you?
EngineeringOpen SourceInclude diagrams in your Markdown files with MermaidA picture tells a thousand words. Now you can quickly create and edit diagrams in markdown using words with Mermaid support in your Markdown files. A picture tells a thousand words, but up until now the only way to include pictures and diagrams in your Markdown files on GitHub has been to embed an image. We added support for
(PR) 本記事でご紹介している Slidev などのテクニックについて、2021/11/20(土) 開催の VS Code Conference Japan 2021 にてご紹介しました。YouTubeアーカイブや発表資料も是非ご参照ください。 Slidevとは Slidevはエンジニア向けプレゼンテーションツールです。 Markdownで記述した文書から美しいスライドを生成できます。 公式デモ とそのソースとなるMarkdown もご参照ください。 ドキュメントは以下にあります。 すぐに使えるサンプル 使用頻度の高いと思われる記法を含めたサンプルのMarkdownを以下に公開しています。 コピペするなどしてお使いください。詳細は後述します。 上記Markdownを使用しているスライドを以下にデプロイしています。 上記Markdownの記述内容と見比べていただけると分かりやすいかと思いま
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く