Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

ちょっとしたシーケンス図をさくっと書きたい 皆さんは設計でシーケンス図を書くときにどのようにしていますか? astahなどのUMLツールを使って書くのが一般的だと思います。私もそうです。 確かに込み入ったシーケンスを書く場合にはそれがいいのでしょうが、例えばWikiの中にちょっとしたシーケンスを書きたいときはどうでしょうか? astahでシーケンス図を書く 画像に出力する Wikiに貼る という工程を踏むのはかなり面倒ですよね? しかも、しばらく経ってからシーケンスを更新する必要が生じたとき、「元のastahはどこだ…?」となるのは火を見るより明らかです。 もっと便利な方法があります。 markdownでシーケンス図を書くのです。 mermaidを使ったシーケンス図の書き方 markdownでシーケンス図を書くときにはmermaidとういライブラリを使います。 例えば、GitLabでは初め
import React,{Component} from 'react'; import ReactMarkdown from 'react-markdown/with-html'; export default class MarkdownSample extends React.Component { constructor(props) { super(props) } getHTMLfromMarkdown(){ let markdown = '# 見出し 1\n' + '## 見出し 2\n' + '### 見出し 3\n' + '#### 見出し 4\n' + '---\n' + '- リスト 1\n' + '- リスト 2\n' + '- リスト 2-1\n' + '1. 番号付きリスト 1\n' + '2. 番号付きリスト 2\n' + '3. 番号付きリスト 3\n'
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のほうがサク
以前の投稿でVisual Studio CodeとMarkdown Preview Enhanced環境を組み合わせの便利さを紹介しました。 議事メモを作成にマークダウンを使うと、議論が構造化されて表示されるので、非常にわかりやすくなりますね。みなさんもお使いかと思います。本稿では、そこに、更にVisual Studio Codeにマークダウン用のスニペットを登録しておくことを提案します。 出席者の議論をフォーカスさせる図や表がスムーズに呼び出せますので、効率的な会議を行うことができます。そんな爆速会議に便利なスニペットをいくつか紹介します。 以下ではVisual Studio CodeエディタとMarkdown Preview Enhancedプラグインが前提となっております。環境構築には以前の投稿をご参照ください。 1.会議を一気に立ち上げる:議事録スニペット まずは議事録のテンプレー
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く