Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 「ようこそ 魔境 SIerへ！」 はじめに この記事は、SIer（Systems Integrator）に入ったシステム開発未経験者の新人さんたちへ送る、研修では教えてくれないノウハウ集です。 実際、弊社の長い研修では実務に使えそうなことをあまり教えてくれませんし、ノウハウは現場の人の頭にしかない状態なので、新人さんは暗中模索で仕事を覚えていくことになります。 それも非効率なので、実際に私が２年半1で失敗したこと、やってきてよかったこと（ノウハウ）を体系化したので共有します。 新人さんは、これを参考として、使えるところだけ今後の業務に持
Markdownでシーケンス図とかが書けるMermaid記法で業務フローを書いたら意外とイケたので自分なりのコツを紹介してみる | DevelopersIO
こんにちは、臼田です。 みなさん、業務設計してますか？(挨拶 今回はMarkdownでシーケンス図やフローチャートなどの図を記述できるMermaidを使って業務フローを書いてみたら、意外と書けたので自分なりのTipsを紹介したいと思います。 その前に 注意点として、まだMermaidを使い始めたばかりなので、「もっとこうしたらいいぞ」とか「こっちのほうがいいぞ」とかあれば建設的なフィードバックとしてSNSとかでいただけるとありがたいです。 あと業務フローって表現しましたが、人によって思い描く業務フローが違うと思うので、業務フローの定義に関するツッコミはご容赦ください。私が今回Mermaidで書いたのは以下の図です。(内容はブログ用に簡素化しました) この図のコードは以下のとおりです。(後ほど解説します) sequenceDiagram autonumber actor お客様 partic
mermaidは、Web上で簡単にフローチャートやシーケンス図などのUMLが描けるライブラリです。 d3.jsの機能特化型というかんじで、d3ほど様々なことはできませんが、そのかわりに対応してる図形なら非常に簡単に描くことが可能です。 なお、ヘルプはGitGraphやクラス図が載ってないなど未完成で、いまいち頼れません。 ごたくはいい、実物を見せろ こんなかんじ →支払い忘れてサーバが死んだので代替(誰かが書いたやつに勝手にリンク) できること 以下の図が描ける。 ・フローチャート ・シーケンス図 ・ガントチャート ・クラス図 ・gitグラフ 最後だけ異質だ。 インストール CDNを使えばいいだけだが、自分のところに置きたい場合はyarnで引っ張ってこれる。 <!DOCTYPE html> <html lang="ja"> <head> <link rel="stylesheet" hre
作図系ツール・ライブラリまとめ
diag.md シーケンス図とかフローチャートをしごとで描画することになった場合、 テキストから生成できたら楽なので、それ系のツールまとめ GraphViz http://www.graphviz.org/ C製 Doxygen, Moinmoinなどと連携可能 ブロック図、クラス図、ネットワーク図など PNG, SVGなど 出力可能形式一覧 JavaScript（Emscripten）版もある。リアルタイムプレビュー出来て便利 https://github.com/mdaines/viz.js PlantUML Java製 シーケンス図, ユースケース図, クラス図, アクティビティ図, コンポーネント図, ステート図, デプロイ図, オブジェクト図などめっちゃたくさん作れる PNG, SVG, LaTeX, ASCII出力 なんとワイヤーフレームも作れる。アイコンとかも入れられる。 オ
UMLとかAWS構成図とかを描くツール
UMLとか構成図とかの図を描くの何のツールを使えばいいか迷いませんか？私は迷います。 ですので、最近使っているツールを紹介します。 世の中にツールがイロイロあるのは理解した上で、大量に紹介するとやっぱり迷うので、似たようなツールや個人的に使わないツールはバッサリ省いています。 パワポで描く まずはPowerPointです。 エンジニアや技術系の方は「パワポで図を描くのはちょっと、、、」と思われるかも知れませんが、状況によってありだと思っています。 パワポのメリット パワポは、ビジネスユーザーならほぼ誰でも使える システムを作る時に、お客さん側も含めた関わるメンバー全員がITに詳しいとは限りません。しかしそういう人にもシステムに対する理解は最低限していただく必要があります。システム構成図とか特に興味がない人に説明するときに「新しいツールをいれてください」というのはハードルが高いです。 パワポ
グラフを生成可能なマークダウン構文「Mermaid」がNotionで利用出来るようになりました #notion | DevelopersIO
データアナリティクス事業本部 サービスソリューション部 サービス開発チームのしんやです。 Notionの直近リリースノートに「Mermaidっていうマークダウン構文がNotionで使えるようになったよ！」という情報が載っていたので、試してみた内容を軽くではありますが紹介したいと思います。 目次 Mermaidとは 実践 #1. フローチャート #2. シーケンス図 #3. クラス図 #4. 状態遷移図 #5. ER図 #6. ジャーニーマップ #7. ガントチャート #8. パイチャート #9. 要件図 まとめ Mermaidとは Mermaidとは、フローチャート、シーケンス図、クラス図、ガントチャート、およびgitグラフを生成するためのマークダウン構文です。 コードから良い感じのグラフを生成できるイメージについては下記動画を参照頂くと良さそうです。 実践 では早速実践してみたいと思いま
ER図の作図について、 Draw.io, PlantUML, Mermaid を比較してみる。（VSCode拡張機能など） - Qiita
※ 参考記事「PlantUML を VSCode で利用したいけど、プレビューが表示されずエラーが出る」 参考（PlantUML 導入後の編集中画面） 2-2. ER図 今回作成したER図 Qiita記事でも、コードブロック内でPlantUMLの構文がそのまま使えます。（このER図は、Qiitaのコードブロックで表示させています） 今回作成したER図のPlantUMLの表記 @startuml yonde ' hide the spot hide circle ' avoid problems with angled crows feet skinparam linetype ortho entity "families" as families { id -- name nickname introduction created_at updated_at } entity "users
VSCode上でシーケンス図/クラス図/フローチャートをサクッと書きたい ~Mermaid Graphical Editor~ - Qiita
VSCode上でシーケンス図/クラス図/フローチャートをサクッと書きたい ~Mermaid Graphical Editor~初心者umlVSCode新人プログラマ応援mermaid はじめに Mermaid Graphical EditorというVSCodeの拡張機能にとても感動したので一筆書きました こんな方におすすめ シーケンス図/クラス図/フローチャートをサクッと書きたいけどmermaidとか難しそう 😢 できること VSCode上でポチポチしながらシーケンス図/クラス図/フローチャートを描けるようになる mermaid記法のコードも自動生成されるよ 個人的メリット mermaidの学習コスト0 紙で書くよりも修正しながら書きやすい 導入手順 （簡単7steps） (1) VSCode上で「Mermaid Graphical Editor」という拡張機能をインストールする (2)
フューチャーアーキテクト Advent Calendar 2017の2日目です。 はじめに システム設計が大好きで大嫌いな皆さん、こんにちは。 突然ですが、皆さんはどのようにシステム設計における ドキュメント腐る問題 に立ち向かっていますか？ ドキュメント腐る問題とは、設計時に作成した各種ドキュメントがGoogle Driveやファイルサーバ上で陳腐化してしまい、現状の正しい状態を指していないことです。せっかく新規参画者がキャッチアップしようとしてもドキュメントが真実を示していないという怖いやつですよね。 解決策としては、各種ドキュメントを、MarkdownやAsciiDoc、UMLはPlantUMLやmermaid、ERDはPlantUMLやerd、画面遷移図はUI Flow、REST-API設計はSwaggerなど、なるべくテキストベースで管理し、GitHubなどのリポジトリで管理する
フューチャーアーキテクト Advent Calendar 2017 の2日目です。 システム設計が大好きで大嫌いな皆さん、こんにちは。 突然ですが、皆さんはどのようにシステム設計における ドキュメント腐る問題 に立ち向かっていますか？ … ドキュメント腐る問題とは、設計時に作成した各種ドキュメントがGoogle Driveやファイルサーバ上で陳腐化してしまい、現状の正しい状態を指していないことです。せっかく新規参画者がキャッチアップしようとしてもドキュメントが真実を示していないという怖いやつですよね。 今まで出会った一番辛いドキュメントは、PJ初期に作成したホワイトボードに書かれたラフスケッチの画像しか無かったところですね。まず字が汚いし、内容も最新版と微妙に異なっていました。新規参画者殺しにもほどがあると、ほんのちょっとだけ恨みました。 いやいや、ちゃんとサボらず整合性を取れよって？サボ
以前からテキストベースで仕様書(PDF)などを管理したいと思っていたのですが、ようやくその環境が整い、一度実際に運用してみてかなりいい感じだったので紹介したいと思います。 基本テキストは AsciiDoc で記述する UML は PlantUML で記述する フローチャートとかは必要に応じて mermaid.js も使う つまり基本テキストで表現・管理できるものはテキストで書く 成果物は PDF形式。目次(Table of Contents) はつける。 動作確認環境 macOS Sierra 10.12.3 ruby 2.3.1 Asciidoctor 1.5.5 Asciidoctor PDF 1.5.0.alpha.14 Asciidoctor Diagram 1.5.4 mermaid 7.0.0 AsciiDoc とは AsciiDoc Home Page 軽量マークアップ言語の
GitHub、Markdown構文でフローチャートやクラス図、ガントチャートなどのダイアグラムを表示できる「Mermaid」をサポート開始
GitHub、Markdown構文でフローチャートやクラス図、ガントチャートなどのダイアグラムを表示できる「Mermaid」をサポート開始 GitHubは、Markdown構文で記述するとダイアグラムを表示できる「mermaid」のサポートを発表しました。 You can now embed diagrams directly into your Markdown files, Issues and PR comments using Mermaid. Learn more - https://t.co/gfmNOp3HeJ — GitHub (@github) February 14, 2022 Markdown構文とは、テキストを簡単な記号で修飾することにより、HTMLを記述するよりも手軽にハイパーリンクや見出しなどを記述できる記法です（このPubickeyの本文も、ふだんはMarkd
Visual Studio CodeがMarkdownのサポートを強化。ファイルのドロップでリンクを自動作成、見出しへの参照一覧など。Visual Studio Code 1.67（April 2022）
Visual Studio CodeがMarkdownのサポートを強化。ファイルのドロップでリンクを自動作成、見出しへの参照一覧など。Visual Studio Code 1.67（April 2022） マイクロソフトはコードエディタVisual Studio Code（以下、VSCode）の最新版となるバージョン1.67（2022年4月）をリリースしました。 The April release of @code is here! Check out the latest: Explorer file nesting Toggle inlay hints Markdown code navigation ... & much more! Release notes: https://t.co/VAPbRhj2U4 Download: https://t.co/1CSkQpMbwd pic
GitHub で Markdown の中に Mermaid を埋め込んだら表示してくれる機能がバレンタイン デーにリリースされました。 今まで Mermaid は知らなくて、テキストでアクティビティ図やクラス図みたいなものを書く必要があるときは PlantUML を使ってましたが GitHub が対応したということで Mermaid に入門してみようと思います。 因みに、この記事を書き始めた時点では、まだ何もやっていないので Mermaid については名前と図が書けるらしいということしか知りません。 では、やってみようと思います。 試すための環境 Visual Studio Code の Markdown Preview Mermaid Support を入れることで Markdown のプレビュー機能が Mermaid のプレビューに対応します。 導入前はこんな感じですが 拡張機能を入れ
マイクロサービス化するならリビルドで！ビジネスロジックをGoで書き直してわかったこと - MonotaRO Tech Blog
この記事では モノタロウがGoとprotobufで進める爆速マイクロサービス開発とそれを支えるプロセス - MonotaRO Tech Blog のうち、主にアーキテクチャにおける詳細について紹介します。 自己紹介 マイクロサービス化について 課題を認識する スコープと技術選定 ゴールイメージを共有する 既存コードから分かった問題点 曖昧なデータ構造 処理フローの混在 アドホックなデータ取得 効果的な改善を行う 処理フローを分割する N+1問題とロジックの独立性を考慮した設計 安全に移行する 実行時のデータを取る 新旧比較による検証 まとめ 自己紹介 藤本 洋一 プラットフォームエンジニアリング部門 CTO-Officeグループ AVLチーム 楽天、SaaSベンチャーを経て、モノタロウに入社してマイクロサービス化にとりくむエンジニアの話 2019年5月入社。商品検索基盤のマイクロサービスと
現代は、タスク管理や障害管理だけでなく、仕様書にもExcel脱却が求められている記事があったのでメモ。 ラフなメモ書き。 【参考1】 エクセルで手順書を作るのはきっとやめた方がいい - Qiita (引用開始) ある製品のインストール手順書を作ることになり、参考資料として過去の案件で作ったものをもらったのだが、それはエクセルファイルだった。 どういうものだったかを端的に述べると以下の通り。 目次がない シート名に番号はついていない 各シートにも番号の記載はない 各シートの中身はスクリーンショットの羅列 スクリーンショットについての説明がほぼない 間違った手順のスクリーンショットも混ざっている 操作の結果を確認する手順が漏れているケースがある この時点で大分げんなりするが、具体的に辛い点をあげる。 1. 全体像が掴めない 2. 順番に確信が持てない 3. コマンドの内容やインストール先のディ
GitHubは、Wikiページに画像をドラッグ＆ドロップするだけで自動的にアップロードされ、ページに画像が追加される新機能を発表しました。 同社新CEOのThomas Dohmke氏がツイートしています。また、GitHubのChange Logによると2月14日付けで「Upload images to Wiki pages」としてこの機能が追加されているのが分かります。 Shipped today: You can now upload images to Wiki pages. Same UI as in issues and pull requests - drag and drop, select the file, or paste the image. https://t.co/0z1bGTFIvs pic.twitter.com/kC8s9dZIak — Thomas Dohm
テキストでUMLを書く - Qiita
みなさんちゃんと設計書書いてますか？僕はあんまり書きません。一所懸命図を起こしても、実際にソースをアレしてインターフェースを揉んだりしてるうちにもっと綺麗なのを思いついて修正が必要になることも多いですよね。で納期に追われてドキュメント更新がおざなりになってソースと図が乖離していき、メンテされないお荷物が増えていく。 設計は大体風呂とか夢とか頭の中でやって、ある程度規模があって整理したい場合や、他人に共有したい場合に脳内にある図を起こす、という使い方が多いです。 図を起こした後でも設計を見直したり機能拡張することはありますよね。そんなとき、いちいち線の重なりがどうだとか考えたくないです。どうせ後で直すし。ドキュメントに綺麗な図を書いてくれるのはありがたいのですが、どんなツールやプラグインを使ったかわからず、一部追加するのに全部一から作り直したことありませんか？ astah*でつくって画像だけ
GitHubは14日、README.mdファイルなどで用いられているMarkdown構文で図を描くことができる「Mermaid」と呼ばれる記法に対応したことを発表した（公式ブログ, Publickeyの記事, Gigazineの記事, Codezineの記事）。 Mermaid記法を用いると、テキストから、フローチャート、シーケンス図、クラス図、ステート図、ER図、ガントチャート、パイチャート、ユーザージャーニーなどの図を自動生成することができるという。具体的には例えば以下のような構文で、A→B/C→Dのようなフローチャート等を書くことができる。 ```mermaid graph TD; A-->B; A-->C; B-->D; C-->D; ``` その他にも各地に既に多くのサンプルが上がっているが、これまでMarkdownに図を埋め込む場合は、別途画像ファイルを生成してそれを参照するし
設計図を伴う中規模以上の開発でまれによくあるのが次のような状況です。 担当者が何かしらのツールを使って設計図を書き、画像をアップロードする N回繰り返す: 口頭で設計に関するレビューを受ける 議事録を参照しながら設計図を更新し、画像を再アップロードする どの画像が最新だったのか、変更履歴がどうなのか分からなくなってくる 画像を作ってた担当者がいなくなり、画像のソースが失われる これに対し、こうだったらいいな〜と前々から思ってたのは次のような状況です。 設計図の画像ではなくソースがGitHubに上がっている 変更履歴も残っているし、変更箇所もすぐ分かる 設計のレビューは設計図のソースに対する行コメントを通じて行われる それでいて画像はブラウザ上で簡単に閲覧できる というわけで作ってみました → mermaid-for-github-chrome-extention mermaid.jsのコー
「百聞は一見にしかず」ということわざもあるように、どんなに丁寧に説明されても分からなかったものが一枚の画像を見るだけで理解できることは多いものです。ソフトウェア開発プラットフォームのGitHubで、テキストから自動でグラフを生成してくれるライブラリ「Mermaid」が公式にサポートされ、利用可能になったとアナウンスが行われています。 Include diagrams in your Markdown files with Mermaid | The GitHub Blog https://github.blog/2022-02-14-include-diagrams-markdown-files-mermaid/ GitHubはプログラマーが利用するサイトということでテキスト重視の設計になっており、これまで視覚的な説明を行うには画像を埋め込む必要がありました。今後はMermaidを利用する
会社でフロー図を書こうと思って PlantUML と mermaid.js を比べてみる - Qiita
ずっと PlantUML でクラス図を書いてきたけど、書きたいフロー図が PlantUML で書けなかったので mermaid.js を触ってみた。 会社に導入するって観点で比べてみる。 PlantUML は結構な量書いたので慣れているけど mermaid.js は数日触ってみた程度なので、理解度が違うのは勘弁で。 概要 サイト紹介とサンプル紹介
【12/24にGitLab対応!】テキストで自在に「描く」- KrokiではじめるDiagram as Code - Qiita
【12/24にGitLab対応!】テキストで自在に「描く」- KrokiではじめるDiagram as CodeMarkdownGitLabasciidocVisualStudioCodekroki これは、 NTTコミュニケーションズ Advent Calendar 2020 25日目の記事です。 昨日は @tnoyama さんの「TEKTONとArgoを比較してみた」でした。お楽しみいただけましたか？ Krokiとは 本記事では、テキストからの図表生成ツール Krokiを紹介します。最新バージョンは0.9.0です。 公式docs: Kroki! GitHub: yuzutech/kroki: Creates diagrams from textual descriptions! 概要 Kroki!は、テキストから統一的なAPIで、 UML C4 データ可視化 その他図表 を、PNG,
AsciiDoc と PlantUML と mermaid.js で素敵なテキストベース仕様書ライフ | 田舎からGeekを目指す
以前からテキストベースで仕様書(PDF)などを管理したいと思っていたのですが、ようやくその環境が整い、一度実際に運用してみてかなりいい感じだったので紹介したいと思います。 基本テキストは AsciiDoc で記述する UML は PlantUML で記述する フローチャートとかは必要に応じて mermaid.js も使う つまり基本テキストで表現・管理できるものはテキストで書く 成果物は PDF形式。目次(Table of Contents) はつける。 動作確認環境 macOS Sierra 10.12.3 ruby 2.3.1 Asciidoctor 1.5.5 Asciidoctor PDF 1.5.0.alpha.14 Asciidoctor Diagram 1.5.4 mermaid 7.0.0 AsciiDoc とは AsciiDoc Home Page 軽量マークアップ言語の
本記事は、「ChatGPT選手権！エンジニアリングに組み込んでみたらこうなりました LT大会」の発表の書き下ろしになります。 実際の発表は5分のLTでしたので、この記事のダイジェスト版と言えるかと思います。 こちらの記事の方がかなり情報量が多いため、実際に発表を聞いていただいた方も、そうでない方も楽しんでいただける内容になっているかと思います。 ChatGPTとの対話も含めて全て読むには非常に情報量が多いので、お時間のある時にじっくり読んでいただくことをお勧めします。 プロローグ さて、時は遡ること3ヶ月半前、ChatGPTが登場し、週末に戯れていた私は衝撃を受けました。 それがこちらの投稿です。 ツイートのスレッドを追っていただくとわかるのですが。ChatGPTと対話を重ねていくことで、twitterっぽいフロントエンド実装をReact/TypeScript/ CSSを駆使してつくってく
mermaidチート表｜ききよ
あちこち調べまわるのに疲れたので自分用に作成します。 (7/10更新[途中上げ) mermaidとはmd(マークダウン)形式の時、図が描けるやつ(ざっくり) githubがこれに対応したので、readme.mdが画期的になったとかなんとか。 左に打ち込んだコードが右みたいな図になる mermaidの導入VScodeの拡張機能ですべて済む。 Markdown Preview Mermaid最低限これだけあればおｋ。 Markdown Preview Enhancedも加えるとGithubとかmermaid公式の色合いになるぞ。 書き方.mdに書くのが前提。 ```mermaid 【この間に書く】 ````(Shift+@)で上のように囲むとその間だけその言語対応になる。 場合から使い分けるmermaid いくつか種類があるので、使い分けに。 なお、 ```mermaid ```は省略する。
こんにちは、コンサルティングサービス本部の朝日です。 システム開発のドキュメントはExcelという現場もまだまだ多いのではないでしょうか。 ややもするとネ申エクセルになりがちですし、個人的にはExcel仕様書嫌いなので、なんとかしたいなーと感じています。 Excel仕様書の一番の問題は、Git等の構成管理システムと相性が悪いことだと思っています。 Gitでファイル自体のバージョン管理はできたとしても、テキストではないので、どこが変更されたかの差分表示が厳しいです。 (しかも大抵の場合はファイルサーバーでファイル名に日付をつけてバージョン管理してたりして…) そこで、なんとかドキュメント類をMarkdownのようなテキストで記述できないものか考えていました。 ただ、Markdownは表くらいは書けますが、あくまでテキストを書くためのものなので、複雑な図形などは別のツールで作った画像ファイルを
みちしるべ
背景、試行錯誤の内容に興味がなく、上記のようなツリー型タブをすぐ使いたい場合は、 設定のまとめを見てください。 背景 試行錯誤 環境 標準機能のウィンドウパネル Tree Tabs Tree Tabs 1.9.2だと以下の読み込みエラーになる Tree Tabs 2.0.9 Forest: Tree Style Tab Manager External Inline ウェブパネル 設定のまとめ 新しいウインドウを開く場合のコツ 困る点 背景 kinzaをツリー型タブで表示できるChromiumブラウザとして重宝していたが、 以前からGoogleアカウントの同期ができなくなり、遂に、 2021/07/09にkinzaの開発終了がアナウンスされました。 ツリー型タブを探してまたブラウザ難民となってしまいました。 Google Chromeの拡張機能、Microsoft Edgeの縦型タブと試し
現代は、タスク管理や障害管理だけでなく、仕様書にもExcel脱却が求められている記事があったのでメモ。 ラフなメモ書き。 【参考1】 エクセルで手順書を作るのはきっとやめた方がいい - Qiita (引用開始) ある製品のインストール手順書を作ることになり、参考資料として過去の案件で作ったものをもらったのだが、それはエクセルファイルだった。 どういうものだったかを端的に述べると以下の通り。 目次がない シート名に番号はついていない 各シートにも番号の記載はない 各シートの中身はスクリーンショットの羅列 スクリーンショットについての説明がほぼない 間違った手順のスクリーンショットも混ざっている 操作の結果を確認する手順が漏れているケースがある この時点で大分げんなりするが、具体的に辛い点をあげる。 1. 全体像が掴めない 2. 順番に確信が持てない 3. コマンドの内容やインストール先のディ
こんにちは。マニュアル作成・ナレッジ共有ツール「NotePM」ブログ編集局です。 Markdownは便利な記法ですが、標準ではごく基本的な構文しか提供していません。そのため、多くの開発者によって様々な拡張が行われています。システム設計を行う際に使われるUMLを描画したいというニーズがその一つです。 今回はMarkdownの中にUMLを埋め込めるエディタを紹介します。Webベース、GUIそしてWebサービスとカテゴリごとに紹介しますので、あなたにとって最適なMarkdown環境を選んでください。 GUI エディタ Boost Note Boost NoteではPlantUMLを使ったUML描画が可能です。日本語はエラーになるようです。 Boost Note is a powerful, lightspeed collaborative workspace for developer team
こんにちは。sweeepの清川です。みなさんの会社では「Notion」使っていますか？sweeepでは、情報共有やプロジェクト管理にNotionを大活用しています。 今回は日々の仕事にも役立つNotionで「簡単にフローチャートを書く方法」をご紹介します。Mermaidという言語を使いますが、直感的に書けるので覚えてしまえば難しくはありません。どうぞチャレンジしてみてくださいね！ ※こちらの記事はkiyo個人noteの転載です。 1. コードブロックを呼び出すフローチャートを作成したいページに「/code」と打ち込むと、コードブロックが呼び出されます。このブロック内でMermaidを記述し、フローチャート図を作成していきましょう。 コードブロック内で言語を選択できるようになっているので、「Mermaid」を選択し、コードと同時にプレビューが表示されるよう「Split」を選択します。 2.
UMLとかER図とか、必要なのは分かってたけど図を書くのは面倒でちょっと敬遠してました。 でも最近その必要性が自分の中で高まってたので、段々と書かざるを得なくなってきています。 ただ、マウスを使って図を描いたり、要素が増えてドラッグしてレイアウトしたりとかがやっぱり面倒で、テキストで書けるPlantUMLなんかを少し使っています。 PlantUMLは完成度も高く、最近はDocBase.ioやesa.ioなんかでも対応してたりと、流行ってる感じもしてます。 でも、名前の通り基本的にはUMLなので、ER図なんかは得意じゃ無いです。 クラス図を流用してなんとなくそれっぽいのは出来るかもだけど。 そこで、他にも無いかなと思って探して見つけた、テキストで図が書けるツールを並べておきます。 まだ全部試すまでは出来てないので、評価や紹介というレベルにはなってません。 UML PlantUML UML図を
mermaidでフローチャートを描く
楽にきれいにフローチャートを描く方法を探してたらmermaidに行きついたので、mermaidを使ってフローチャートを描く方法をまとめておきます。 公式docsはこちらです。 ブラウザでmermaidを使う こちらのエディタを使うとブラウザ上でサクサクmermaidが書けます。 こんな感じで左側がエディタ、右側がプレビューで書いたdiagramをリアルタイムで確認しながら使えます。即書きたい派の人はこれがいいかも。 Sample Diagramsから色んな図のテンプレを挿入することができます Actionsから画像ファイルにエクスポートしたりも VSCodeでmermaidを使う VSCodeでmermaidを使う場合は、こちらの拡張機能を入れるとよいらしい mermaid記法をハイライトで表示してくれて書きやすくなります こちらはVSCodeでmermaidで書いた図をプレビューで見せて
CursorのComposer 機能を使った要件定義・設計の方法:生成AI活用｜遠藤巧巳 - JapanMarketing合同会社
はじめに - Cursorについてシステム開発に携わっている皆さんはCursorはご存知ですか？また利用していますか？Cursorは、VSCodeを基に作られたエディタです。特徴としてはChatGPTはじめとする生成AIがエディタに統合されており、ファイル内やターミナル内で自然言語で依頼することで、コードを自動生成してくれます。 これを使うことで、プログラムやフレームワークの理屈さえ頭に入っていれば、実際のコーディングレベルに頭を使う必要はなくなります。プログラム言語が異なれば、ループ分のやり方が異なったりしますが、それらを意識せずにただ自然言語でループ処理をしてと言えば書いてくれます。 また、ターミナルについても pwd , ls, cdぐらいであれば誰でもすぐにわかりますが、ちょっと凝ったことをする際にこれまでだといちいちGoogle検索していたかと思いますが、それも自然言語で依頼すれ
Zenn で mermaid.js によるダイアグラムが表現できるようになりました。ZennのMarkdown記法一覧も更新されています。この記事では mermaid.js を使っていくつかの図をかいてみます。 基本的な使い方 mermaid.jsのドキュメントを見ながらいろいろな図を書いてみる 各種エディタでプレビュー このあたりを記録します。 基本的な使い方 コードブロックで囲んで言語名を mermaid とすることで、自動的にレンダリングされます。いまのところ、mermaid.jsの8.10.xを読み込んで使っています。 ```mermaid graph TB A[Hard edge] -->|Link text| B(Round edge) B --> C{Decision} C -->|One| D[Result one] C -->|Two| E[Result two] ```
My Redmine インストール済みプラグイン
Redmineのクラウドサービス「My Redmine」では、厳選した以下のRedmineプラグインがご利用になれます。プラグインにより標準のRedmineの機能が拡張され、活用範囲が一層広がります。 ※お客様ご指定のプラグインのインストールは承っておりません。 UI Extension - クラス図やシーケンス図などの図を描画 / セレクトボックスの検索 / バーンダウンチャート IPアドレスフィルター - IPアドレスによるアクセス制限 チケットパネル - チケット一覧をカード形式でかんばん風に表示 Issue Templates - チケット新規作成時のテンプレートを登録 View Customize - CSSとJavaScriptによる画面カスタマイズ メッセージカスタマイズ - 画面の文言をカスタマイズ My Page Blocks - マイページを拡張 UI Extensio
7年前に『モデルとは基本的に図のことである』というタイトルで "DOT言語" や "PlantUML" でUMLのクラス図を描く方法を紹介しました。先日、GitHubが対応を発表して盛り上がっている "mermaid" を使ってUMLを描いてみたので紹介します。 mermaidのコード classDiagram LightSensor <|-- ColorSensor LightSensor <|-- RedSensor class LightSensor { - char port + void on() + void off() } class ColorSensor { + unsigned char getRed() + unsigned char getGreen() + unsigned char getBlue() } class RedSensor { + unsigned
Claude 3.5のSonnetは、これまでのClaude3の上位モデルであるOpusよりも高い性能を持ち、 AIの性能を評価する複数のベンチマークにおいてChat GPT-4oを超えています。 Claude 3.5 Sonnetのベンチマーク結果 GPQAやMMLUなどは、AIの性能評価を行うために用いているベンチマークです。 Graduate level reasoning（大学院レベルの推論） GPQA（Graduate Level Expert Reasoning）： 大学院レベルの専門的な知識と論理的思考を必要とする質問で評価するベンチマーク Undergraduate level knowledge（学部レベルの知識） MMLU(Massive Multi-task Language Understanding)： 大規模マルチタスク言語理解(Massive Multi-ta
記事を参考にしたのが分かるように、 「爆速」を使わせてもらいました。 noteには、ChartGPTと外部アプリPlantUMLを使って マインドマップを作るという記事（参考記事）は既にあります。 参考記事 ChatGPTにマインドマップを作ってもらったら理解速度が爆速になる件｜Abiru｜note ChatGPTとPlantUMLを使った爆速マインドマップ作成術！｜カレーちゃん｜note Notionで折角やるので、 Notionと Notion AIだけで作業を完結させる そのNotionのページを 「公開」して共有する という図を描くだけでなく、情報（資料）としても活かそうというのが今回の話になります。 Notionとはそもそも何かという事は、私の記事が参考になれば幸いです。 仕事でのNotionの活用方法ついてAbiruさんを真似て 「Notion」ヴァージョンをAIにお願いしてみ
使ってみよう！VSCode+mermaid
mermaidとは フローチャート等の絵をコードから作成できる、JavaScriptのライブラリです。 ……とはいえ普段JSに触れることがないのでワタクシはVSCode+Markdownで書いてます。 ちょっとしたタスクやスクリプトの処理を他の人にレクチャーしたり引き継いだりするときに、説明しつつササッと手を加えてプレビューできるのが良いな～！って思ってます。 なお、この記事ではグラフの形など、お作法的な箇所は無視してますし記載しません。 関連サイト様です！ 開発 様 公式マニュアル 様 環境の準備・説明 VSCodeインストールします プラグインで「Markdown Preview Mermaid Support」をいれます 補足ですが、Markdownを使うなら以下も入れておくと便利だと思います。（他にもおすすめあれば誰か教えて！） Markdown All in One1)Markd
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【SIer新人向け】研修では教えてくれないノウハウ集 - Qiita
簡単にガントチャートとかクラス図とか書けるやつ - Qiita
現場で役立つシステム設計の原則にあるUMLをPlantUMLで書いてみる - Qiita
我々はいかにシステム開発におけるドキュメント腐る問題と戦えば良いのか
AsciiDoc と PlantUML と mermaid.js で素敵なテキストベース仕様書ライフ
Mermaid 入門してみたメモ(flowchart で力尽きた…)
仕様書にもExcel脱却が求められている - プログラマの思索
GitHub、Wikiページにも画像をドラッグ＆ドロップで追加可能に
GitHub、Markdownで図を描けるMermaidに対応 | スラド デベロッパー
【mermaid.js】設計図をGitHub管理下に置く - Qiita
テキストからグラフを自動で作成してくれるライブラリ「Mermaid」をGitHubがサポート
一緒にスクラム開発: GPT-4と人間が共創するプロダクトの進化 スプリント #1
GitLab.comとMarkdownで仕様書を書く試み
仕様書にもExcel脱却が求められている - プログラマの思索
【2024年版】MarkdownでUMLが使えるエディタ・Webサービス おすすめ11選！
NotionのMermaidを使って、簡単にフローチャートを作る方法 | sweeep株式会社
テキストでUMLやER図などの図を書くツールのまとめ | kanonjiのブログ
Zennが mermaid.js によるダイアグラム表記に対応したので試す
すねいる ＥＴロボコン日記 | 組込みシステムエンジニアのハッピーライフ
Claude 3.5の最新機能Artifacts：使い方と実際の活用例を紹介
NotionとAIで図を作ると爆速で共有できる件｜えっぐらす