タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
自身のプライオリティによりますが、いくつか。 Markdownで幅広く再利用性を利かせたい、長期的に丁寧に版管理したい 自分自身の操作性、描きやすさと、見た目 俄然手軽に、短期的に、Onlineでいつでもどこでも いずれかという視点で考えると良いのかなと思い、並べてみました。 1. 長期的に: Markdownで幅広く再利用性を利かせたい、丁寧に版管理したいなら Markdownで描くことのメリットは再利用性。 将来的に追記・編集、自分以外の誰かが手を入れる可能性が高い。 現在のドキュメントだけでなく多種説明資料、媒体に転用する可能性がある。 ...という点で差分管理をしたいなら、以下。 VSCodeでPlantUML、Mermaid 上記参考で以下。 Alt+D でプレビュー起動。 Ctrl + Shift + P でコマンドパレットを起動し、出力。 png, svg, eps, pdf
こんにちは、臼田です。 みなさん、業務設計してますか？(挨拶 今回はMarkdownでシーケンス図やフローチャートなどの図を記述できるMermaidを使って業務フローを書いてみたら、意外と書けたので自分なりのTipsを紹介したいと思います。 その前に 注意点として、まだMermaidを使い始めたばかりなので、「もっとこうしたらいいぞ」とか「こっちのほうがいいぞ」とかあれば建設的なフィードバックとしてSNSとかでいただけるとありがたいです。 あと業務フローって表現しましたが、人によって思い描く業務フローが違うと思うので、業務フローの定義に関するツッコミはご容赦ください。私が今回Mermaidで書いたのは以下の図です。(内容はブログ用に簡素化しました) この図のコードは以下のとおりです。(後ほど解説します) sequenceDiagram autonumber actor お客様 partic
VSCode上でシーケンス図/クラス図/フローチャートをサクッと書きたい ~Mermaid Graphical Editor~初心者umlVSCode新人プログラマ応援mermaid はじめに Mermaid Graphical EditorというVSCodeの拡張機能にとても感動したので一筆書きました こんな方におすすめ シーケンス図/クラス図/フローチャートをサクッと書きたいけどmermaidとか難しそう 😢 できること VSCode上でポチポチしながらシーケンス図/クラス図/フローチャートを描けるようになる mermaid記法のコードも自動生成されるよ 個人的メリット mermaidの学習コスト0 紙で書くよりも修正しながら書きやすい 導入手順 （簡単7steps） (1) VSCode上で「Mermaid Graphical Editor」という拡張機能をインストールする (2)
こんにちは、CX事業本部 IoT事業部の若槻です。 今までシステムのドキュメントなどでUML図を使用したい場合は、別途PlantUMLで書いて画像ファイルを生成し、MarkdownやAsciiDoc内に配置するということをしていました。 しかしこちらの記事の通り、Mermaidを使用すればMarkdown内で直接UML図の定義をコードで記述し、さらにGitHub上ではそのまま描画までしてくれるとのことです。知らなかった…！ GitHubでmermaid記法が使えるようになったのでアーキテクチャーの図を書いてみた | DevelopersIO そこで今回は、下記のようなよくあるAWSサーバーレス構成（API Gateway + Lambda + DynamoDB + α）のシーケンス図をMermaidで描いてみました。 描いてみた Mermaidにおけるシーケンス図の文法はこちらを参考にしま
はじめに OAuth 2.0 のフローをシーケンス図で説明したWeb上の記事や書籍を何度か見かけたことがありますが、 フローの概要に加え、クライアントや認可サーバー側でどういったパラメータを元に何を検証しているのかも一連のフローとして理解したかった RFC 7636 Proof Key for Code Exchange (PKCE) も含めた流れを整理したかった というモチベーションがあり、自分でシーケンス図を書きながら流れを整理してみた、という趣旨です。 記事の前提や注意事項 OAuth 2.0 の各種フローのうち、認可コードフローのみ取り上げています 認可コードフローとはなにか、PKCE とはなにかという説明は割愛しています 概要について、個人的にはこちらの動画が非常にわかりやすかったです: OAuth & OIDC 入門編 by #authlete - YouTube 認可コードフ
はじめに ◆この記事は何？ セキュリティ分野の攻撃手法と対策をまとめた記事です ◆対象は？ セキュリティを学びたい方、試験対策をしたい方 ◆記事のコンセプト 攻撃と対策の目的や流れを抑えておくことで、情報処理試験の午前問題・午後問題が解きやすくなります。 この記事では以下のように整理します。 攻撃者側 攻撃者の目的 攻撃手段 結果 対策側 対策の目的 対策手段 結果 ◆この記事の目的 試験対策として理解や暗記の一助になれば幸いです。 標的型攻撃 攻撃側 ◆目的 機密情報を盗むため ◆手法 特定の個人や組織（標的）を狙って、攻撃メールを送付します。 攻撃者は情報を収集する 標的型攻撃メール送付 感染 情報の流出 ◆結果 情報の漏洩やウイルスの感染 標的型攻撃の例をシーケンス図で示した例です。 対策 ◆目的 被害を抑えるため 完全に防ぐことは難しいので、被害を抑える対策を考えるのが現実的です。
「UMLとはなんですか？」こう質問されたとき、あなたはすぐに回答できるでしょうか？クラス図やシーケンス図といった個別の図を目にしたことはあっても、UMLという言葉が具体的に何を指すのか、ぱっと答えるのは意外に難しいかもしれません。 この記事ではUML（統一モデリング言語）の用語解説からUMLを使うメリット、よく使われる図の種類について解説します。 とくにクライアントとの打ち合わせにおいて、専門用語を正しく相手に伝える能力は重要です。クライアントがIT用語に詳しいとは限りません。そのときに自信をもって説明できるよう、この記事を読んで理解しましょう。 UMLとはUnified Modeling Languageの略語です。日本語では「統一モデリング言語」と呼ばれています。 システムの振る舞いや構造をオブジェクト指向で分析したり設計したりする際、図を用いることで視覚的に把握できるようになり、効果
ChatGPT をはじめ近頃 AI の進化が著しく、SNS などで紹介されている使用例に驚かされる毎日です。 Notion はここ数年で多数の企業が利用するようになっている多機能のドキュメントツールです。近頃 Notion AI という機能がリリースされました。 またシーケンス図を書くのによく使われているのが Mermaid です。 今回は Notion AI に Mermaid でシーケンス図を書いてもらったらどうなったのか、また Mermaid でシーケンス図を書くときにはどのような書き方があるのかをご紹介します！ DX を推進する AI ・データサイエンス人材育成コース プログラミング未経験から、AI やデータサイエンスを学ぶことのできる 6 ヶ月間のコースです。転職実績も豊富で、自走できる AI人材を多く輩出しています。 Notion AI に ToDo アプリのシーケンス図を書い
こんにちは、CX事業本部 Delivery部の若槻です。 Mermaidを利用すると、様々なタイプの図（Diagram）を簡単に作成でき、またコードやテキストで管理することができます。 このMermaid構文の作成をChatGPTでさらに簡単に行えないか？と考え、ChatGPT（GPT-4）に作成したい図の要件を伝えることでMermaid構文を出力してもらい、各種図（シーケンス、ガントチャート、フローチャート）の作成を試してみました。 試してみた シーケンス図 AWSサーバーレス構成で実装したREST APIのシーケンス図の作成を依頼してみます。 次の処理を図解するシーケンス図をMermaid構文で書いて下さい。 1. クライアントはAPI Gateway REST APIにGETリクエストを送信する。 2. API Gateway REST APIはリクエストに含まれるAuthoriza
この記事は、PlantUMLでシーケンス図を書くときに必要になる情報をまとめたものです。 PlantUMLとは 簡単なコードによる記述でUMLの様々な図が作成できるツールです。 UMLを活用する上での課題である「メンテナンスしていくのが困難」という点を、コードで記述するという手法によって解決することを試みています。 シーケンス図とは 一連の処理の実現方法を参加者間の相互作用で表すことができます。 設計時にどのクラスにどういうメッセージ（責務）を割り当てるかの検討や、既存の実装がどういう相互作用で実現されているかを整理するためなど、 色々な使い方ができる図です。 例インターネット記事投稿サービスの「記事を検索する」処理をどう実現させるかを設計する想定で図を作成してみました。 問題領域寄りの図 フレームワークなど、特定の技術要素に依存しない抽象的なシーケンス図です。 @startuml /'
自身のプライオリティによりますが、いくつか。 Markdownで幅広く再利用性を利かせたい、長期的に丁寧に版管理したい 自分自身の操作性、描きやすさと、見た目 俄然手軽に、短期的に、Onlineでいつでもどこでも いずれかという視点で考えると良いのかなと思い、並べてみました。 1. 長期的に: Markdownで幅広く再利用性を利かせたい、丁寧に版管理したいなら Markdownで描くことのメリットは再利用性。 将来的に追記・編集、自分以外の誰かが手を入れる可能性が高い。 現在のドキュメントだけでなく多種説明資料、媒体に転用する可能性がある。 ...という点で差分管理をしたいなら、以下。 VSCodeでPlantUML、Mermaid 上記参考で以下。 Alt+D でプレビュー起動。 Ctrl + Shift + P でコマンドパレットを起動し、出力。 png, svg, eps, pdf
IT業界は専門用語のオンパレード、常に職場ではカタカナ言葉が飛び交います。はじめてIT業界に足を踏み入れた人はびっくりしますよね。 研修が充実していたり、指導役の先輩が常に指導したりしてくれるなら良いですが、教えてもらったからすぐにできる、理解したというわけではありません。用語の理解はもちろんですが、実際に使ってみる事がとても大切です。 この記事ではUML（統一モデリング言語）の1つである「シーケンス図」について、用語の意味から作り方、作るときの注意点まで、初心者でも分かりやすく解説します。 シーケンス図とは「プログラムの処理の流れや概要」を設計する際に使われます。オブジェクト指向のソフトウェア設計においては、グローバルスタンダードの設計手法と言っても過言ではありません。 プログラムの処理の流れや概要について、具体的には「クラスやオブジェクト間のやり取り」を「時間軸に沿って」、図で表現しま
3.1.3. シーケンス図/Sequence Diagrams シーケンス図は、プログラムの中の関数呼び出しの入れ子の様子を示した図です (Fig. 1)。 Fig.1 シーケンス図の例 シーケンス図にはライフラインと呼ぶ縦の構造が並びます。 ライフラインの頭部には、シーケンス図の登場人物（participant）を表した長方形を書きます。 これは、典型的には何らかのクラスのオブジェクトですが、 例の図の一番左の線のように（メソッドではない）関数の場合もあります。 縦の短冊状の長方形はアクティベーションと言って、メソッドの実行が続いている 期間を示します。短冊が存在せずに破線が書かれている期間は、そのオブジェクトに 対して何もメソッドが呼ばれていない期間であることを示します。 3.1.3.1. シーケンス図を書く意義 シーケンス図は、処理の順序を示すと共に、処理が行われる場所（オブジ
ちょっとしたシーケンス図をさくっと書きたい 皆さんは設計でシーケンス図を書くときにどのようにしていますか？ astahなどのUMLツールを使って書くのが一般的だと思います。私もそうです。 確かに込み入ったシーケンスを書く場合にはそれがいいのでしょうが、例えばWikiの中にちょっとしたシーケンスを書きたいときはどうでしょうか？ astahでシーケンス図を書く 画像に出力する Wikiに貼る という工程を踏むのはかなり面倒ですよね？ しかも、しばらく経ってからシーケンスを更新する必要が生じたとき、「元のastahはどこだ…？」となるのは火を見るより明らかです。 もっと便利な方法があります。 markdownでシーケンス図を書くのです。 mermaidを使ったシーケンス図の書き方 markdownでシーケンス図を書くときにはmermaidとういライブラリを使います。 例えば、GitLabでは初め
PlantUMLとは次に、PlantUMLについて簡単に説明します。PlantUMLは、テキストベースでシーケンス図を書くことのできる、UMLの一種です。シーケンス図を書く方法はいくつかありますが、この記事ではPlantUMLでシーケンス図を書く方法を解説していきます。 前提条件この記事では、すでにPlantUMLが動作する環境がある前提で解説していきます。もしまだ環境を構築していない場合は、インターネットで「PlantUML 環境構築」などで検索して準備してください。 あるいは、次のようなオンライン上でPlantUMLを実行できるサービスもあります。こちらを利用しても問題ありません。 PlantUML EditorPlantTextPlantUML Web Server メッセージメッセージの例メッセージは、システムの構成要素（分類子）同士のやりとりを表現します。シーケンス図は、このメッ
はじめに GitHub が Mermaid に対応しました1。 シーケンス図の記法を比べてみます。私はもともと PlantUML を使用していたため「PlantUML 使いから見ると、Mermaid では...」という書き方になりがちなのはご容赦ください。 それぞれの公式 PlantUML - シーケンス図の構文と機能 オンラインエディタ Mermaid - Sequence diagram オンラインエディタ 手軽に導入 手軽に試したい場合、どちらも Visual Studio Code の拡張機能 Markdown Preview Enhanced を使えば対応します（以下「VS Code では」と書かれているのは「Visual Studio Code の Markdown Preview Enhanced を使えば」という意味だと思ってください）。したがって、両記法を併記できます。
NotionでMermaidを使って図表を表示できる？Notionは、プロジェクト管理や情報共有などに活用できる豊富な機能を持ったクラウドワークスペースです。チームやプロジェクトのドキュメントをNotionでつないで、多くのワークフローを一元管理することができます。 Notionでは、Mermaidを使用することで簡単にフローチャートやシーケンス図を書くこともできます。この記事では、NotionでMermaidを使う方法と、様々な種類の図を描く方法を説明します。
ちょっとしたシーケンス図をさくっと書きたい 皆さんは設計でシーケンス図を書くときにどのようにしていますか？ astahなどのUMLツールを使って書くのが一般的だと思います。私もそうです。 確かに込み入ったシーケンスを書く場合にはそれがいいのでしょうが、例えばWikiの中にちょっとしたシーケンスを書きたいときはどうでしょうか？ astahでシーケンス図を書く 画像に出力する Wikiに貼る という工程を踏むのはかなり面倒ですよね？ しかも、しばらく経ってからシーケンスを更新する必要が生じたとき、**「元のastahはどこだ…？」**となるのは火を見るより明らかです。 もっと便利な方法があります。 markdownでシーケンス図を書くのです。 mermaidを使ったシーケンス図の書き方 markdownでシーケンス図を書くときにはmermaidとういライブラリを使います。 例えば、GitLab
はじめに Visual Studio CodeでMarkdownを作成するときに、内部にdraw.ioで作成したAWS構成図やシーケンス図などを簡単に埋め込む方法をメモしておきます。最終的なイメージは以下のようになります。 前提条件 Visual Studio Codeをインストールしていること。 Javaをインストールしていること。 事前準備 Visual Studio Codeで以下の拡張機能をインストールします。 Markdown All in One Markdown Preview Enhanced Draw.io Integration PlantUML (2023/11/07追記) Markdown Preview Enhancedのアップデートに伴い、追加作業が必要になりました。 以下の記事を参考に対応ください。 https://qiita.com/kaz-matsubar
シーケンス図は、UMLで規定された図の一つであり、オブジェクト間のやりとりを時系列的に表現したものです。とても実用的な図表なので、今回はシーケンス図のメリットや効果、そしてUMLシーケンス図を作るためのツールを3つ紹介したいと思います。 GitMind無料ダウンロード 目次シーケンス図とは？シーケンス図とは、プログラムの処理の流れやオブジェクト間の相互作用を時間軸に沿って視覚的に示す図表のことです。一般、エンジニアはよく使います。 シーケンス図のメリットシーケンス図のメリットについて以下の内容をご参考ください。 プログラムの処理をよりはっきり読む 文字だけでプログラムの処理を表すことは読みにくいでしょう。シーケンス図で表したら一目瞭然し、時間を節約できます。そしてシーケンス図のルールや表現は世界中のどの国でも一緒なので、他の国のエンジニアと一緒に働くても問題ありません。理解しやすい シーケ
シーケンス図は相互作用図 (interaction diagram) の代表的なダイアグラムです。 シーケンス図は、特定のユースケースに関するオブジェクトの典型例と、オブジェクト間のメッセージを示します。 要素の並び順の制御 (participant)必須の定義ではないですが、participant であらかじめ要素を列挙しておくと、その後のメッセージ定義の順序に関係なく、participant に並べた順に左から要素が配置されます。 @startuml participant Class1 participant Class2 participant Class3 Class3 -> Class1 Class2 -> Class3 Class1 -> Class2 @enduml
はじめに プログラミングをやっていると、設計する時や説明する時などに図解でプログラムの流れなどを説明したりすると思います。 よくあるやつだとdraw.ioやパワポなどを使ってシーケンス図等を使って記述してると思います。 しかしエンジニアたる物できるだけ全てをコードで管理したい！そんな需要に対して最適なのがPlantUMLです！ PlantUMLはオープンソースのUMLダイアグラム作成用のテキストベースの言語である。PlantUMLの言語はドメイン固有言語の一例である[4]。ダイアグラムの表示にはGraphvizを使用している。（wikipedia参照） 具体的には以下のような図を作成することができます シーケンス図 ユースケース図 クラス図 アクティビティ図 コンポーネント図 状態遷移図（ステートマシン図） オブジェクト図 配置図 タイミング図 などなど、、、 とてもたくさんあるので全てを
この記事は、PlantUMLでシーケンス図を書くときに必要になる情報をまとめたものです。 PlantUMLとは 簡単なコードによる記述でUMLの様々な図が作成できるツールです。 UMLを活用する上での課題である「メンテナンスしていくのが困難」という点を、コードで記述するという手法によって解決することを試みています。 シーケンス図とは 一連の処理の実現方法を参加者間の相互作用で表すことができます。 設計時にどのクラスにどういうメッセージ（責務）を割り当てるかの検討や、既存の実装がどういう相互作用で実現されているかを整理するためなど、 色々な使い方ができる図です。 例 インターネット記事投稿サービスの「記事を検索する」処理をどう実現させるかを設計する想定で図を作成してみました。 問題領域寄りの図 フレームワークなど、特定の技術要素に依存しない抽象的なシーケンス図です。 @startuml /'
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
![[みんなのケータイ]アメリカでシャッター音のしないiPhoneを買ってみた](https://cdn-ak-scissors.b.st-hatena.com/image/square/83351535ea3f266f998eeca7673921051c1c07cf/height=288;version=1;width=512/https%3A%2F%2Ffanyv88.com%3A443%2Fhttps%2Fk-tai.watch.impress.co.jp%2Fimg%2Fktw%2Flist%2F1650%2F005%2F01.jpeg)
