1 - 40 件 / 81件
人魚なのに尾が二股に分かれている。 しかもその尾を持ち上げ股を開いている。 どうしてこうなったのか調べてみた。 スターバックスのロゴ 世界で最も有名な人魚と言えば、やはりこいつだろう。 Warszawska róg Szerokiej w Tomaszowie Mazowieckim, w województwie łódzkim, PL, EU. CC0, Public domain, via Wikimedia Commons, Link ご存知スターバックスのロゴである。現在のロゴでは大事なところが色々と隠されているので分かりにくいが、最初のデザインでは人魚であることが一目で分かる。 Chris Brown from Melbourne, Australia, CC BY 2.0, via Wikimedia Commons, Link 上半身が裸で胸を露出し、二股の尾を自ら持ち上げ
自身のプライオリティによりますが、いくつか。 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
こんにちは。ユアマイスターでプロダクトマネージャーをしています、稲垣といいます。 最近、業務でChatGPTを使いまくっているのですが、ちょっと個人的に感動する使い方を見つけたので紹介します(既に知ってるぞ!という方、すいません)。 プロダクト開発において、業務フローって必要になること多いですよね。でも書くの大変。Draw.ioとかFigmaとか便利なツールも出てるけど、それでも大変。 さあ、下記のようにプロンプトを書いてみましょう。 一般的な受注業務の業務フロー図を作りたいです。Mermaid Markdown形式で出力してください。 # 制約条件 - 「・」「?」は使用しないでください ChatGPTの出力結果のこれをコピーして、 Notionに貼りましょう(「コードブロック」を選択してください)。 「コード」を選ぶこの領域にペーストするすると・・・。 うおおおおお。 業務フローが自動
技術記事は 個人ブログ へお引越ししました。 興味を持ってくださった方はZennではなくこちらをご購読いただければと思います🙏 Mermaid Graphical Editor VSCodeの拡張機能です。 Mermaid記法を利用してマークダウン内部で作図しながら、Mermaidそれ自体のエディタを立ち上げることができます。 逆にMermaid Editor側で編集した内容もマークダウンにフィードバックされます。 vs Draw.io Integration 類似ツールとしてDraw.io Integrationがあります。 こちらは.drawio拡張子のファイルをVSCodeで作成すると、draw.ioのエディタが開いて作図ができるツールです。 しかし、draw.ioはあくまで図が書けるところを生業としていて、作成したdraw.ioファイルをマークダウンファイルに埋め込むには画像とし
Mermaid Flow is a Visual Mermaid live editor that aims to simplify creating Mermaid JS Diagrams online. Currently Mermaid Flow supports Flowchart diagrams, giving you the ability to Drag and Drop nodes, edges and labels to create your Flowchart diagrams visually. This mermaid live editor is useful for creating and maintaining complex diagrams such as Software Architecture diagrams. Once drawn, sim
UMLとか構成図とかの図を描くの何のツールを使えばいいか迷いませんか?私は迷います。 ですので、最近使っているツールを紹介します。 世の中にツールがイロイロあるのは理解した上で、大量に紹介するとやっぱり迷うので、似たようなツールや個人的に使わないツールはバッサリ省いています。 パワポで描く まずはPowerPointです。 エンジニアや技術系の方は「パワポで図を描くのはちょっと、、、」と思われるかも知れませんが、状況によってありだと思っています。 パワポのメリット パワポは、ビジネスユーザーならほぼ誰でも使える システムを作る時に、お客さん側も含めた関わるメンバー全員がITに詳しいとは限りません。しかしそういう人にもシステムに対する理解は最低限していただく必要があります。システム構成図とか特に興味がない人に説明するときに「新しいツールをいれてください」というのはハードルが高いです。 パワポ
データアナリティクス事業本部 サービスソリューション部 サービス開発チームのしんやです。 Notionの直近リリースノートに「Mermaidっていうマークダウン構文がNotionで使えるようになったよ!」という情報が載っていたので、試してみた内容を軽くではありますが紹介したいと思います。 目次 Mermaidとは 実践 #1. フローチャート #2. シーケンス図 #3. クラス図 #4. 状態遷移図 #5. ER図 #6. ジャーニーマップ #7. ガントチャート #8. パイチャート #9. 要件図 まとめ Mermaidとは Mermaidとは、フローチャート、シーケンス図、クラス図、ガントチャート、およびgitグラフを生成するためのマークダウン構文です。 コードから良い感じのグラフを生成できるイメージについては下記動画を参照頂くと良さそうです。 実践 では早速実践してみたいと思いま
プロジェクトの関係者全員が納得する「業務フロー図」。それはプロジェクトを円滑に進めるための"共通言語"であり、重要な存在です。 しかし、その作成は本当に骨が折れる作業です。一つ一つの箱を作り、線でつなぎ、色を分け...。手戻りが発生するたびに、あのコネクタを一本一本修正する虚しさ。初期のたたき台を作るだけで半日が終わってしまい、肝心の"中身の議論"に時間を使えないなんてこともザラです。 「この作る手間さえなければ、もっと本質的な議論に集中できるのに...!」 そう思っていた矢先、ある方法を試したところ、この長年の悩みが劇的に改善しました。それは、AIコーディングツール「Cursor」を使って、業務フロー図の作成を自動化するというアプローチです。 実際にCursorで実行して出力された業務フローはこちらです。 スイムレーンがあり、業務間の接続も記載されている。また、業務間で使用するファイルやデータも
はじめに こんにちは!株式会社 Hacobu で Vista というプロダクトのフロントエンドエンジニアをしている cho です。 最近、社内で「Agentic Coding を眺める会」というイベントを開催しました。普段どんな感じで Claude Code を使って開発しているかを同僚に共有したところ、想像以上に反響があったんです。 特に、Custom slash commandsの部分で会議室がざわついて... 「え、そんなことできるの?」 「これめっちゃ便利そう!」 「自分でも作ってみたい!」 という声がたくさん上がりました 😊 イベント後、参加者から「これ、もっと詳しく知りたい!」「他のチームにも共有したい」という要望が続々と... そこで、実際に業務で使える Custom slash commandsをより多くの開発者に知ってもらいたいと思い、この記事を書くことにしました。 実際に社内
はじめに Mermaid Graphical EditorというVSCodeの拡張機能にとても感動したので一筆書きました こんな方におすすめ シーケンス図/クラス図/フローチャートをサクッと書きたいけどmermaidとか難しそう 😢 できること VSCode上でポチポチしながらシーケンス図/クラス図/フローチャートを描けるようになる mermaid記法のコードも自動生成されるよ 個人的メリット mermaidの学習コスト0 紙で書くよりも修正しながら書きやすい 導入手順 (簡単7steps) (1) VSCode上で「Mermaid Graphical Editor」という拡張機能をインストールする (2) 新規mdファイルを作成する (3) 以下のようにファイルに入力する (4) すると、薄い文字でMermaidEditorと出てくるのでクリックする (5) 右側にEditorが表示さ
はじめに テキストからダイアグラムを生成できるMermaidを使ってAWS構成図を作成する際のテクニックを、いくつかピックアップしてご紹介します。 Mermaidを使えば、構成図内のテキスト検索はもちろん、アイコンを使って見やすく表現したり、アイコンをクリックしてマネジメントコンソールなどに遷移させたりすることもできるため、実用性の高い構成図が作成できます。 本記事が、Mermaidを活用したAWS構成図の作成に少しでもお役に立てば幸いです。 AWS構成図の使用例 Mermaidで作成したAWS構成図の使用例を紹介します。 例えばQiitaでも以下のように表示できます。(リンクはサンプルです) mermaid記法 --- title: 000000000000-xxxxxxxx環境 config: theme: neutral flowchart: nodeSpacing: 10 rank
はじめに GitHub で Mermaid がサポートされました。 Mermaid は図やグラフを描画するの独自の記法を持ちます。 その記法を Markdown のコードブロック中に記述するだけで図を描画できるのが便利です。 ...便利なのですが、記法が独特なことや機能が豊富なことから、とっつきにくいところもあります。 弊社[1]では みんチャレ 開発の情報共有ツールとして esa.io を活用しており、 esa も Mermaid をサポートしており以前から活用していました。 この記事では、私がこれまでに活用してきた中から特に便利だと感じた機能を紹介します。 ちなみに Zenn も Mermaid をサポートしているため図を描画できます。 Gantt ガントチャートです。 私が Mermaid を使いたいと思ったきっかけの機能です。 まずは、一番シンプルな例を書きます。 gantt Co
こんにちは、CX事業本部 IoT事業部の若槻です。 今までシステムのドキュメントなどでUML図を使用したい場合は、別途PlantUMLで書いて画像ファイルを生成し、MarkdownやAsciiDoc内に配置するということをしていました。 しかしこちらの記事の通り、Mermaidを使用すればMarkdown内で直接UML図の定義をコードで記述し、さらにGitHub上ではそのまま描画までしてくれるとのことです。知らなかった...! GitHubでmermaid記法が使えるようになったのでアーキテクチャーの図を書いてみた | DevelopersIO そこで今回は、下記のようなよくあるAWSサーバーレス構成(API Gateway + Lambda + DynamoDB + α)のシーケンス図をMermaidで描いてみました。 描いてみた Mermaidにおけるシーケンス図の文法はこちらを参考にしま
はじめに プログラマやドキュメント作成者にとって、図は複雑な概念を説明する上で欠かせないツールです。しかし、図の作成は煩雑で時間がかかるものです。Microsoftが開発した「mermAId」というVS Code拡張機能を使うことで、一瞬で図を作ることができるようになります。というわけで、実務で使ってみたので、その使い方をご紹介したいと思います。 Mermaidとは 紛らわしいのですが、Mermaidはテキストベースでフローチャートやシーケンス図などを描けるJavaScriptライブラリです。一方、mermAIdはそのMermaid記法をCopilotを使って自動生成・編集できるVS Code拡張機能です。余談ですが、「mermAId」のうち、なぜAIだけ大文字なんだろうと思ったら、AIと掛けているのですね。 たとえば、下記のテキストをMermaidにして出力すると 以下の通りになります。
AI & MLLearn about artificial intelligence and machine learning across the GitHub ecosystem and the wider industry. Generative AILearn how to build with generative AI. GitHub CopilotChange how you work with GitHub Copilot. LLMsEverything developers need to know about LLMs. Machine learningMachine learning tips, tricks, and best practices. How AI code generation worksExplore the capabilities and be
はじめに テキストからダイアグラムの図が生成できるMermaidでAWS構成図をつくる方法を紹介します。 また、MermaidはGithubやQiitaなどのWebサービスやVSCodeやIntelliJなどのツール、コマンドやWebシステムでも使用できますので、良ければ下記の記事もご確認ください。 本手法でも使用しているflowchartでAWSの画像やアイコンを使う方法を記載したので、良ければこちらもご確認ください。 Mermaidのことはなんとなくわかったけど、AWSの構成図や配置図が描けないか考えていた人にも参考になれば幸いです。 AWSの構成図をつくる ・どんな感じの図ができるのか AWSの構成図を描くときにはAWS公式から提供されている[AWS Architecture Icons]というAWSのダイアグラムを書く際のアイコンセットを利用する機会が多いと思いますが、Mermai
ObsidianはMarkdown形式で作成したメモを管理できるアプリです。このアプリと生成AIを組み合わせると、テキストの生成やタグの付与、リンクの作成など幅広い使い方ができることを解説してきました。 それだけでなく、AIを使うことで図表を手軽に作成できます。Mermaidなどテキスト形式で作成できる図の表現方法があり、複雑な図も簡単に生成や編集ができるのです。今回はObsidianのノート内に図表を入れるときに、AIと連携して作成するための具体的なプロンプト例を紹介します。 Mermaid Markdown内にコードブロックとして記述するだけで、フローチャートやシーケンス図、ガントチャートなどを生成できるツールとしてMermaidがあります。Obsidianは標準機能でMermaidをサポートしているため、AIにてMermaidのコードを生成し、そのまま貼り付けるだけで図が完成します。
はじめに 細かいところに PlantUML ほど融通が利かないと言われる mermaid.js ですが、逆に言えばそこまで複雑なフローでなければそこそこ描けるやんけ!ということで mermaid.js で中規模以上のフロー図を描くときに使えそうな記法などについて書いてきます。 題材 良い感じの題材が思いつかなかったので、今回は地上の星の歌詞のフロー図を mermaid.js で描いていきます。 参考↓ 準備 まずは mermaid.js でフロー図を描く際の基本です。 記載規模やお好みでどうぞ VSCode みんな大好き VSCode。拡張機能を入れることで、描きながらプレビューできたり画像出力ができます。Markdown を普段から VSCode で描いている方は下記の1を。そうでない方は2を使うと良いかと思います。 1 https://marketplace.visualstudio.
久しぶりのtblsの新機能紹介エントリです。 ドキュメントのER図出力にMermaidを指定できるようになりました ER図の出力フォーマットにMermaidを指定できるようになりました。次のように er.format: セクションか --er-format オプションに mermaid を指定することで変更できます。 er: format: mermaid 開発裏話 GitHubがMermaid対応したことで「tblsもMermaid対応してほしい」という要望や提案は以前より多く受け取っていました。 しかし、個人的にあまりメリットを見出せずそのままPull Request待ちとなっていたのですが、今回エイッと作ってみました。 Mermaid対応をするにあたって1つとても面倒な仕様がありました。それはMermaidはER図の多重度(カーディナリティ)の指定が必須となっていることでした。 もと
いつもはてなブログをご利用いただきありがとうございます。 さて、はてなブログには、 はてなブログは、Mermaid記法に対応する予定はないでしょうか? というご質問をいただくことがあります。はてなブログはJavaScriptやCSSなどをご自身で記載し、自由にカスタムできるプラットフォームです。Mermaidの対応も、少し設定を加えることでご自身のブログに導入することが可能です。 本記事では、はてなブログへの導入方法を紹介させていただきます。 Mermaidとは Mermaidとは、テキストでダイアグラムやチャートを記述する仕様のことです。また、その記述方法がMermaid記法と呼ばれています。 例えば、以下の記述が、 graph LR; 書く-- 読みたくなる -->読む; 読む-- 書きたくなる -->書く; 読む-- 共感する -->はてなスター; はてなスター-- モチベート --
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
(PR) 本記事でご紹介している Slidev などのテクニックについて、2021年11月20日(土) 開催の VS Code Conference Japan 2021 にてご紹介しました。YouTubeアーカイブや発表資料も是非ご参照ください。 Slidevとは Slidevはエンジニア向けプレゼンテーションツールです。 Markdownで記述した文書から美しいスライドを生成できます。 公式デモ とそのソースとなるMarkdown もご参照ください。 ドキュメントは以下にあります。 すぐに使えるサンプル 使用頻度の高いと思われる記法を含めたサンプルのMarkdownを以下に公開しています。 コピペするなどしてお使いください。詳細は後述します。 上記Markdownを使用しているスライドを以下にデプロイしています。 上記Markdownの記述内容と見比べていただけると分かりやすいかと思いま
Zenn や GitHub の Markdown から利用できる Mermaid には「Git ブランチを表現する」機能があります。 その機能を利用してみたところよい感じだったので、記述方法やカスタマイズについてなどを記事にしてみます。 Git ブランチを表現するとは? ドキュメントでブランチの説明などを読んでいると下記のような図(グラフ)を見かけるかと思います。 図 1-1 AA によるブランチのグラフ A---B---C---D develop \ E---F---G topicA \ H---I---J topicB Mermaid の Gitgraph Diagrams を利用することにより、このような感じで表示できるようになります。 図 1-2 Mermaid によるブランチのグラフ 基本的な使い方 Mermaid 用コードブロックの先頭で gitGraph を記述し、Git の
概要 サービスのメンテナンスの作業手順書にmermaidのガントチャートを使ったという話 作業手順書作成時の時間見積と、実際の作業実施時の時間計測の差が簡単に把握できて便利 下のような図を出せて便利ということ ※(注記)2023年08月22日 mermaidの記法が変更になったらしく、ガントの分指定が min ではなく m となった 実際のメンテナンス作業の時間を把握したい これらをなんとなく把握したい。 決めた手順が実際にどれくらい余裕があったのか把握したい 事前にステージング環境で同じメンテナンス作業をして問題ないか確認、本番メンテナンスの予定にフィードバックしたい etc. どうやって把握するか 作業前の時間見積 作業手順書に必要時間を記録する etc. 作業実施時の時間計測方法 作業ログを別途作成し、タイムスタンプを記録する 自分は作業チームでMeetに入って作業開始と終了をコメントして、
Mermaidが好きすぎるけど結局draw.ioにしがちな今日この頃ですが、ついにMermaidでAWSアーキテクチャ図が描けるようになったらしいので試してみました! やってみた 感想としては、そこそこ複雑なものも描けそうです! Mermaidのアーキテクチャドキュメントに飛んで、一番下のAWSアーキテクチャ図のサンプルコードに以下のコードをコピペして実行すると見ることができます mermaidコード architecture-beta service dns(logos:aws-route53)[Route53] service cdn(logos:aws-cloudfront)[CloudFront] service cert(logos:aws-certificate-manager)[ACM] service storage(logos:aws-s3)[S3] group vpc(
はじめに はじめまして、ネクストモード株式会社のマーケティング事業部でセールス担当してます。いずみです。今回が初投稿、よろしくお願いします。 この度、ネクストモードがNotion販売代理店となったことを記念して、私も最近Notionで取り組んでみたことをご紹介してみたいと思います! 非エンジニアの方でも活用しやすい内容になってますので、DevelopersIOご愛読のエンジニアの皆様から、是非、一緒にNotionを使っている営業・経理・総務のご担当にもシェアして頂けたら嬉しいです! Notionを使い続けると出てくる悩み。 ネクストモードでは、早い時期からNotionを取り入れ社内のナレッジ共有を行ってきているのですが、長く使っているとNotionの自由度の高さゆえの悩みが出てきます。 いつでも誰でも、ページを作成してナレッジ共有ができてしまうが故に、「あのページどこに行ったっけ?」とか、
For more information about using diagrams on GitHub, see Creating diagrams in the GitHub documentation For more information about non-code filetypes on GitHub, see Working with non-code files geoJSON ### Here's a geoJSON map in markdown ```geojson { "type": "Polygon", "coordinates": [ [ [-90,30], [-90,35], [-90,35], [-85,35], [-85,30] ] ] } ``` topoJSON ### Here's a topoJSON map in markdown ```top
GitHub で Markdown の中に Mermaid を埋め込んだら表示してくれる機能がバレンタイン デーにリリースされました。 今まで Mermaid は知らなくて、テキストでアクティビティ図やクラス図みたいなものを書く必要があるときは PlantUML を使ってましたが GitHub が対応したということで Mermaid に入門してみようと思います。 因みに、この記事を書き始めた時点では、まだ何もやっていないので Mermaid については名前と図が書けるらしいということしか知りません。 では、やってみようと思います。 試すための環境 Visual Studio Code の Markdown Preview Mermaid Support を入れることで Markdown のプレビュー機能が Mermaid のプレビューに対応します。 導入前はこんな感じですが 拡張機能を入れ
OpenAPI + Redoc, Docusaurus, Mermaidで始めるスキーマ・ドキュメント駆動開発 【この本について】 この本はOpenAPIを使ってドキュメントを作成する方法を学びます。 OpenAPIを使ってドキュメントを作成することで継続的な開発を行うことができ、 OpenAPI Generatorを使ってドキュメントと実装のズレをなくすことができます。 また、Docusaurusを使ってドキュメントを作成することで、 運用ドキュメントを簡単に公開することができます。 本書では以下の内容を取り扱っています。 - Docusarusでドキュメント環境を構築する - OpenAPI + Redocでドキュメントを作成する - OpenAPI Generatorで自動生成する - Prismでモックサーバーを導入する OpenAPIを使ってみたい人、社内の設計・運用ドキュメント
こんにちはnasaちゃんです。 今日は最近GitHubのTracked Issueの関係を可視化するツールを作ったので紹介をしようと思います。このツールは今の所技術的に面白いことはしていないので技術話は省略します。 何が出来るか 次の3つが主な機能です。 TrackedIssueの関係図がissue上にコメントされます open, closeやサブイシューの追加などの変更があった際に図が自動で更新されます クリックすることでそのissueに遷移します プロジェクトの進行状況や全体像がいつでも把握できていいね!!というツールになっています。 ではTrackedIssueとは何でしょうか?GitHubの新し目の機能なので馴染みのない人もいるかと思います。 GitHubには、issueのbodyにチェックリストとして追加しているissueのopen, closeによってチェックリストの状態が変わ
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
前段 ※(注記)社内ブログの内容を個人発信する許可をいただいたためzennでも公開しています。 ChatGPTで話題のOpenAIのモデルは、現在画像の取り扱いはまだ発展途上です。文章から画像を作るAPIや画像入力が検討されていますが、システム運用にクリティカルに使えそうになるのはもう少し待つ必要がありそうです。 そこで現状魅力的に映るのがMermaidです[1]。 Mermaid(マーメイド)は、テキストベースの記述によってフローチャート、シーケンス図、ガントチャートなどの図を生成するためのツールです。Mermaidは、Markdownやプレーンテキストなどのテキスト形式で図を記述し、それを自動的にグラフィカルな図に変換します。(by Chat-GPT) 画像化はJavascriptで実装されており、現在はgithubのmarkdownプレビューやNotionの専用ブロックなどで利用可能です。
技術者向けTips: はてなブログでMermaid記法を利用する方法 - はてなブログ開発ブログ はてなブログ開発ブログでMermaid記法導入の紹介があった。遷移図を見るとどうしたって連想してしまうのが、id:debedebe 氏の名作「あたしオートマトン」及び『「あたし状態遷移図」、あるいは「あたし約5.2MB」』。 残念ながらはてなグループはサービス終了とともに閲覧できなくなっているもののWebArchiveでは見られる。 web.archive.org せっかくMermaidで簡単に状態遷移図が書けるようになったのだからプロローグだけでも再現してみたいと思う。 graph TD; アタシ-->アキ; アキ-->歳?; 歳?-->23; 23-->まぁ今年で24; まぁ今年で24-->彼氏?; 彼氏?-->まぁ; まぁ-->当たり前に; 当たり前に-->いる; いる-->てか; てか
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く