オオタジュンヤ @junjunjun_piano 音楽史とか音楽ジャンルを調べていて、「何でここまでで終わってんの!?」とか「何でこっちだけ詳しくてこっちは無視なん?」みたいに思ったところを極力すくい上げて書いたから、すっげー細かくなっちゃった。笑 2021-12-12 21:40:48
※ 参考記事「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
先日も書きましたが最近はEmacsの中で動く作図ツールを作っています。 ソース: misohena/el-easydraw: Embedded drawing tool for Emacs (github.com) 図1: org-modeの中で思いついた時に図を描きエクスポートするまでの様子 以前囲碁の棋譜編集ツールを作ってその時にも書きましたが、Emacsの中でこのくらいのことは出来ても罰は当たらないと思うんですよね(このくらい出来て当然だろ!の意)。 org-modeは素晴らしいツールでいろんな事が出来ますが、文書の中に別の要素を埋め込んで統一的に編集する機能はまだまだ改善の余地が沢山あると思います。(ソースコードブロックのようなテキストベースでプログラマーが誰でも喜ぶような物は充実していますけど) 特にGUI要素が全然足りません。例えば図を描くならditaaやPlantUMLなんか
初めに javascriptベースで手軽に対話的な操作が可能な作図が出来るPlotly Express(公式サイト)というライブラリが少し前に公開されたのを見つけました。 今までの静的な作図とは明らかに異なる次元のポテンシャルを感じたので、備忘録を兼ねて基本的な可視化手法の描き方をまとめました。 参考までに、matplotlib+seabornで同様の図を書いたパターンと比較しています。 「基本的な可視化手法」は、以前書いた「探索的データ解析における正しい可視化手法の選び方と描き方」に準拠しています。 Plotly Expressとは Plotly Expressは2019年の3月に公開されたplotlyの高レベルAPI群です。 インタラクティブで複雑な描画を簡単に書けるのが特徴です。 公式サイト: https://plot.ly/python/plotly-express/ API re
本連載では、DX(デジタルトランスフォーメーション)、その中でも特に業務効率化をテーマに、プロトアウトスタジオの生徒や関係者が日々の生活や業務で発生している課題を見直し、技術を活用しながら解決していく方法をご紹介していきます。第7回となる本記事は、作図作業を効率化すべく作成した「AWSシステム構成図生成アプリ」(以後、図生成アプリ)を紹介します。 面倒な作図の作業を楽にしたい こんにちは、プロトアウトスタジオ卒業生の周防(スオウ)です。普段はクラウドサービスAWSを使いインフラの設計/構築などをしているインフラエンジニアです。 突然ですが、IT業界では図をかく仕事があることをご存じでしょうか。自社サービスの魅力を分かりやすく伝えるために図をかくことがあります。また、システムのネットワークや構成を関係者と共有するために構成図を作成します。 この作図作業は、時に多くの時間を費やす大変な仕事にな
フローチャートやネットワーク図を作成するには、ExcelやPowerPointを使うのではなく、操作性が作図に最適化された、専用の作図ツールを用いるのが便利だ。用意されたテンプレートの中から作りたいイメージに近いものを選択し、ドラッグアンドドロップでアイコンなどのパーツを追加していくことで、見た目のよい図が簡単に作成できる。 こうした作図ツールは、かねてよりオンラインで使えるサービスが存在していたが、最近は操作性もより洗練されたほか、メンバーを招待して共有できるコラボレーション機能が強化されるなど、次代のニーズに合わせて大幅な進化を遂げている。今回は、無料で利用できるプランがあることを条件に、オンラインで使える3つの作図サービスを紹介する。 さまざまな部署のニーズに対応、国産の老舗サービス「Cacoo」 「Cacoo」は、作図サービスの中で老舗と言えるのが「Cacoo(カクー)」だ。 フロ
米Googleは2月17日(現地時間)、クラウドサービス「Google Cloud Platform」(GCP)のアーキテクチャダイヤグラム(システム構成図)を作成できるWebサービス「Google Cloud Architecture DiagrammingTool」の提供を始めた。利用料は無料。 ユーザーはGCPのサービスのアイコンや図形を配置することで、クラウドを活用したシステムの構成を図として整理できる。一から構成を作るだけでなく、プリセットを図面に配置してからそれをカスタマイズできる機能も搭載。作った図は、PNGやSVGなどのファイルとして出力することもできる。 関連記事 前澤氏の“お金配り”、アプリ化したらアクセス殺到 数十万トラフィックをさばく「kifutown」の裏側 ZOZO前社長・前澤友作氏の“お金配り”をスマホアプリ化した「kifutown」。時には短い期間に数万、数
# 命令 下記の「構成」を満たすAWSのシステム構成図をMermaidで作成して下さい。 作図を行う際、システムの構成要素は「Mermaid記法集」のデザインを元に記述して下さい。 各種システム構成要素には全てその名称も明記して下さい。 ## 構成 - シンプルな三層アーキテクチャ - ALBの前段にCloudFrontを立てている - ALBはパブリックサブネット内のEC2に負荷分散する - EC2はプライベートサブネット内のRDSにアクセスする - 画像ファイルなどのデータはS3に保存しており、CloudFront経由で配信している ## Mermaid記法集 ### 各種グループの記法 #### AWS Cloud fill:none,color:#345,stroke:#345 #### Region fill:none,color:#59d,stroke:#59d,stroke-
Wiki.jsはNode.jsベースのWikiシステムです。モダンな作りとスタイリッシュなデザインで、「とりあえずWikiだけあれば良い」という用途には最善な選択肢のひとつでしょう。今回はそんなWiki.jsをUbuntuにデプロイしてみます。 あなたのWikiはどこから? 一般的に「Wiki(ウィキ)」と言えば「Wikipedia」を暗黙的に意味することが多い昨今の状況ですが、本連載の読者ならおそらく誰でもご存知のように、現在ではウィキソフトウェアで動いている、ウェブブラウザーで複数のユーザーが共同で編集可能なコンテンツ管理システムの総称です。 生のHTMLを書くのに疲れた人にとって、Wikiの「人に優しいマークアップ言語[1]」は魅力的に映り、現在では非常に多くの環境で様々なWikiが活用されています。その最も成功した例が、Wikipediaを支えているMediaWikiでしょ
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?
draw.ioはUML、ネットワーク図、ポンチ絵他、様々な図を掛けるWebツールで、最近はOfficeの代替お絵かきツールとしても活用が増えています。
フローチャート AI AIでフローチャートを作成するだけでなく、クリックして25種類のAI機能を確認しよう!
今回は紙エクセル対策で必要な罫線作図ツール開発の序章です。 本記事はSpredsheets/Excel Advent Calendar 2019 の4日目の投稿です。(みんな参加してね!) (実際には12/1に公開した記事ですが) 3日目は Silloi (id:silloi) さんの「Google Spreadsheetsで家計簿を作った」でした。 silloi.hatenablog.com きっかけ 今回使うフォーマット このフォーマットの問題点 まとめ きっかけ 私の職場では未だに「神エクセル」などと呼ばれるに相応しいフォーマットのエクセルが多数存在している。 普段Twitterでは「あんなフォーマットはだめだ」「こんなフォーマットにしなきゃだめだ」などと言っている癖に、実は神エクセルばかり使っていて、数百~数万件にも及ぶ「帳票」をエクセルベースで作成しているのである。(Access
コード書いたり読んだりするのはMacでやったほうが楽だし、図を書いたりするのはiPadが楽。ということでこの間をいい感じに繋いだ話。 今までの連携方法今までは以下の手順で連携していた。それなりに面倒なので、気軽に図を書いて差し込むという気になれなかった。 iPadのPaperというアプリで図を書くShareからAirDropを使ってファイルを転送(ほとんどの場合キャンバスサイズいっぱいに図を書かないので)Previewで画像の切り出しメモ先(Emacs)にドラッグ&ドロップCatalinaの機能を利用した連携macOS CatalinaからMacとiPadを連携させるSidecarと共に、MacとiOS1を連携するいくつかの便利機能が入った。 いずれもMac側から実行するとiPadのアプリが自動で起動する。そしてiPad側で編集が完了すると、Mac側にその結果が反映されるという動き。 No
論文のFigはほぼRで描いているのだけど、複雑なデータをコンパクトに見せるためにカラフルな図を作ることが多い。そこでいつも悩むのが「いかに効率よく配色するか」ということだ。カスタムの配色セットを作ってみたり、カラーパレットのパッケージをあれこれ試してみたりしたのだけど、自分なりに今落ち着いているのがkhromaとcirclizeという2つのパッケージなので簡単に紹介したい。 khromaはPaul Tol’s Colour Schemesに準じたカラーパレットを出力できるパッケージだ。このカラースキームの特長として、 カラーユニバーサル モノクロ印刷した際の視認性も考慮 質データ(Qualitative)、2極データ(Diverging)、連続データ(Sequential)のそれぞれに対応した複数のカラーパレットが準備されている という点が挙げられる。自分が知る限りでは、最も綿密な考慮の上
中1での平面図形の中でも、 メインの1つとなる「作図」。 作図自体はそれほど問題ない という人も多いかもしれませんが、 少しでも分かりやすく、 さらに、+αとして、 その作図ですることになる仕組みや、 発展的な内容も一緒に押さえておくと、 中2で学習する「合同」や、 高校へつながる「五心」の基礎ともなります。 今回は、外心・内心にまで触れ、 作図をするメリットと、その応用例まで触れてみたいと思います。 流れとして、 作図の基本 ⇒作図ができる理由(仕組み) ⇒外心・内心 と、それぞれのレベルに応じて、 知識を身に着けるよう心がけてみましょう。 私が学校で実際に授業をした際にも、 上のように、レベル分けをして、 自分が身に着けれられる範囲をどんどん身に着けていこうと、 話をして授業をしていました。 …もちろん、生徒は知的好奇心旺盛ですので、 話は最後までちゃんと聞いてくれたのが嬉しいことです
Terrastruct https://terrastruct.com/ Terrastructの特徴 「Terrastruct」は、シーケンスやネットワーク構成など、システムをビジュアライズする図をつくるのに特化したドローイングツールです。 ネットワークダイアグラムを書いてみる こちらのキャンバスに、ネットワークダイアグラムを作成していきます。 コンポーネントは非常にシンプル�で、シェイプと リンクおよび線。そして、テキストだけが用意されています。 使い方は一般的なドローイングツールと同じで、キャンバスにドラック&ドロップするだけ。 色やボーダーの太さなど自由に変更が可能。 このような図も数分もあれば作成できます。 出来上がった図は、こちらのプレビューモードを実行するとURLが発行されるので、気軽にシェアすることが可能。 https://app.terrastruct.com/diagr
はじめに AWS構成図の作図や図の更新作業をサクッとできないかと模索してます。模索第1弾としてJSONデータからAWS構成図を作図するスクリプトを作りました。 作ったスクリプトの動作はこんな感じ。通信経路の表示/非表示も簡単に切り替えできます。 参考情報 今回は、以前作成した記事のコードをベースにスクリプトを作成しました。 Webサーバ無しHTML(JavaScript)でJSONデータを扱う スクリプトソース 作成したスクリプトは以下のgithubに格納しました。ソースをダウンロードし、AwsDiagram.htmlを実行するとサンプルが動きます。WEBサーバは不要です。 Handling_JSON_with_no_web_server_HTML-JavaScript- 仕組み 以下の図のように、X軸とY軸で座標があって、各座標にはレイヤーがあります。この座標とレイヤーを指定して図形を描
データベース 開発チームの下田です。 同僚と雑談でER図について話してました。 新しいメンバーを迎えるときにはER図があると便利だけど、100テーブルを超えたあたりから線が絡まりすぎて無理だよねー おそらく業務システム開発にかかわる人なら誰しもが似たような経験があるのではないでしょうか。 次のようなことができたらいいなあと、DDLからER図を生成するSPAを試作してみました。 DDLから動的にER図を作図してほしい 動的に位置関係を調整してほしい 動的に注目しているエンティティとリレーション、もう一つ先のエンティティを強調して見やすくしたい 試作のため、バグはかなり残っていると思いますがご容赦ください。 作ったもの インタラクティブに図を読む体験ができるダイナミックER図、Force Directed ER Diagramを作ってみました。 動的にDDLをパースしてER図を描画して、動的に
EdrawMaxとは? ©EdrawSoft EdrawMax(エドラマックス)は、作図・製図に特化したドローイングソフトです。 280種類以上のダイアグラム2,000以上のプロ仕様テンプレートWindows、Max、Linux、Webに対応 豊富なテンプレートと使い勝手の良いツールの組み合わせで、誰でも簡単に魅力的な図が作成できるのが大きな特徴です。 今回紹介する間取り図以外にも、資料・プレゼンに役立つさまざまな図解(フローチャート、タイムライン、組織図etc…)を手軽に作ることができます。 EdrawMaxの使い方【間取り図作成】 ダウンロード・インストール EdrawMaxのトップページの「無料ダウンロード」をクリックして、無料版をダウンロードします。 ダウンロードしたファイルを実行すれば、自動でソフトがインストールされます。 新規作成 EdrawMaxは住宅設計・間取り図用のさまざ
2022年7月15日、株式会社ヌーラボが提供するオンラインコラボレーション作図ツール「Cacoo」に「無限キャンバス」機能が追加されました。 複数人で利用しながら、オンラインで作図ができるCacoo Cacooは、オンライン上で作図、さらに複数人で共同編集ができるコラボレーション作図ツール。また、プロジェクトのアイデアやWebサイトのレイアウト案、作業計画など、いわゆる作図以外の目的にも活用できるのが特徴です。 Cacoo 作図可能範囲を気にせずに、アウトプットできる 今回発表された「無限キャンバス」は、その名の通り、作図に使用しているキャンバスサイズの制限がなくなり、無限に広げていける機能です[1]。 この新機能により、ユーザは、作図可能な範囲を気にすることなく、自由にアイデアを出しチームメンバーとコラボレーションすることが可能になりました。また、「無限キャンバス」リリースに伴い、ズー
概要 Home Page:https://www.diagrams.net Home Pageより(DeepL翻訳) 誰とでも、どこでもダイアグラム。 diagrams.netは、オープンソース、オンライン、デスクトップ、コンテナで展開可能なダイアグラム・ソフトウェアです。 仕事関連(システム開発)ドキュメントに、システム構成図/ソフトウェアスタック図等を効率良く、再利用出来るツールを探した結果、 「diagrams.net」に辿り着きました。 Office系(Word/Power Point/Excel)アプリでの作成はストレスでした。 起動 Home Pageの「Start」でブラウザ上にツールが起動します。 起動後「新規ファイルを作成する」or「既存のファイルを開く」を選択。 右下の言語で各言語に変更出来ます。変更後は再更新で反映です。 「既存のファイルを開く」は保存したデータファイ
こちらに投稿した記事の転載です。 UMLとは処理の流れや関係性を図示するためのモデリング手法で、エンジニアでなくとも使うことがあると思います。 例えばユースケース図、シーケンス図、アクティビティ図、クラス図などです。 基本的には画像になるのでchatGPTに作図してもらうのは出来ないんじゃないか、となるかもしれませんが・・・ それPlantUMLなら出来ます! PlantUMLとは 詳細は省きますが、UMLをテキストデータで作図する方法です。 公式サイトが広告だらけなのでいまいちオフィシャル感がないのですが テキストでUMLを作図する仕様としてはデファクトスタンダードであると思います。 テキストで書くことにより、バージョン管理ソフトなどで差分管理することが可能となりメンテナンス性があがります。 また、記法が直観的なので習熟コストも低いです。 例えば以下のような形です。 @startuml
おすすめ作図ソフト「もでりん」がクラウド版としてMac対応!無料なので早速使ってみた! 2019.10.13 ツール DIYを計画するときに、いつも計った寸法を手書きでメモ帳に書いています。もちろん物差しを使ったり、手書きで精度の高い製図ができるのであれば苦労もしないのですが、そんな知識も技術もない私は超絶ざっくり設計図を書いています。笑 メモとして手書きのアバウトな設計図も必要なのですが、手書きだとどうしても寸法にズレがあったり、計算ミスっててイメージ通りにならないなどの問題がでてしまいます。 私がよくやってしまうのは、ホームセンターのカットサービスでカットをお願いしたのに持って帰って組み立てると誤差に気づいて自分で再カットする状況に陥ることです。電動工具があればまだマシですが、手鋸だとさらに微妙なズレが出てしまったりするんですよね。笑 そんな私でも精度の高い木取り図などがあれば、設計ミ
ライター: 秦 非効率な業務課題に悩まされていませんか?また、現状を把握し、業務を可視化できてますか?本記事では、業務分析・業務効率化を進めるための業務フロー図を題材に、課題解決のために必要な図解の技術について解説します。 なお、本記事は以下の2部構成でお送りします。 ① 作図編(前編) ② 業務改善編(後編) ① 作図編(前編) 業務フローの描き方を解説します。受発注管理システムを具体例に、現状の業務フロー図を起こす過程を解説しています。 ② 業務改善編(後編) 業務が可視化されていないことで起き得る問題や可視化によって得られるメリット、さらに自動化の具体例を踏まえて解説しています。 業務フロー図の表現記法まず、業務フロー図の表現記法についてです。 共通言語としての図 フローを描くために考案された表現記法はいくつかあります。 国際標準化されているISO19510 BPMN(Busines
皆さんこんにちは、サーバサイドエンジニアの大川です。今回はmermaid.jsというコードで作図することができるツールを紹介したいと思います!…PlantUML?はて、知らない子ですね。(嘘です) とても便利ですが結構認知度が低いのでぜひぜひ皆さんもこの機会に使ってみてください! mermaid.jsって?? 公式ドキュメントはこちらです→https://mermaid-js.github.io/mermaid/#/ 「Javascriptベースのダイアグラム作成およびチャート作成ツール」です。コードで図を作成することができます!2020/11/27現在ではフローチャート、シーケンス図、ガントチャート、クラス図、ユーザージャーニーダイアグラムなどをサポートしています。詳しい記載方法は公式ドキュメントか自分がまとめた別記事をご覧いただければ幸いです。→https://qiita.com/mi
できたもの 端的(?)に表すと「ビジュアル言語によって作図ができ,かつディスプレイ上の図形の定義をユーザが確認できる動的幾何ソフトウェア」です. 動的幾何ソフトによる作図 アプリの説明に入る前に,前提知識をざっと書きます. wikipediaによると、動的幾何ソフトとは以下のような定義と特徴となっています。 コンピュータソフトウェアであって、おもに平面幾何学の作図を行うことができるものをいう。これらの動的幾何学ソフトにおいては、作図は点・直線・円などをマウスクリック・ドラッグによって行い、作図手順が記録される。作図を行った後に、幾何要素(点・直線・円など)を動かして、作図全体を変化させることができるのが主な特徴である。 動的幾何ソフトによる作図とは,動的幾何環境に用意された以下の3種類の点を適切に用いて,動かしても「定義の崩れない」図形を描くことです. どこにでも動かせる点(自由度2) 線
はじめに GCP関連の記事や設計書を書く上で欠かせないのがGCPのコンポーネントのアイコンやアーキテクチャ図 たいした内容じゃないけど、備忘として記事化しておく。 ちょっと調べたら分かることだけど、GoogleはGCPや関連技術を説明するためのコンポーネントアイコンだけでなく資料を一から説明しないでも済むようにPowerPointやGoogleSlideを豊富に公式サイトで紹介してくれている しかも中身を色々と探ってみると、単にGCP関連のアイコンだけでなく色々な分野の技術を説明する上でユーザーが一から資料を作らなくても済むように様々なフォーマットを用意してくれている 勿論、公式が展開しているだけあってこれらのアイコンは資料やアーキテクチャ図を作成する際に許可なく利用可能である Googleスライドのコンテンツ PowerPointはボタンをクリックすると資料がダウンロードされてそのまま使
今回検討したツール Mermaid Figma miro NotionCharts Google Sheets(スプレッドシート) Lucidchart diagram.net(旧draw.io) Whimsical Cacoo kroki.io Google Jambord Notionへの連携方法 外部ツールをNotionに連携するにはいくつか方法があります。ほとんどの場合、ツール1つあたりの連携方法は1つとなっています。(あとから機能追加された場合は例外的に2つ以上持っていることもあります) Notion内蔵機能 Notion自体がもとから持っている機能 連携とは言えないが、今回紹介する機能の1つが内蔵機能なので紹介 利用制限等は特にないが、一部契約しないと使えない機能がある 今回は無料使用でも利用可能なものだけとなっている Notionのコネクト機能を使用 Notionが提供してい
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く