[B! グラフ] jsstudyのブックマーク

Diagrams · Diagram as Code

Diagrams lets you draw the cloud system architecture in Python code. It was born for prototyping a new system architecture without any design tools. You can also describe or visualize the existing system architecture as well.

jsstudy 2020/04/23

AWS・Azure・GCP・OCI・Alibaba Cloud など主要クラウドのアイコンの他、Kubernetes や各種ツールのアイコンも取り揃えていて、PlantUML みたいな感じで構成図をコードで示せる。

リンク

Python でシステム構成図が描ける Diagrams を試してみた - Corredor

jsstudy 2020/04/23

AWS・Azure・GCP・OCI・Alibaba Cloud など主要クラウドのアイコンの他、Kubernetes や各種ツールのアイコンも取り揃えていて、PlantUML みたいな感じで構成図をコードで示せる。

リンク

Mermaid.jsでグラフを簡単に描く方法 - JavaScript勉強会

読書メモを図にしたいとき、簡単なグラフを作成できるツールがあったら便利です。調べたらいくつか候補がありました。 PlantUML　https://plantuml.com/ja/ Mermaid.js　https://mermaidjs.github.io/ Typora　https://typora.io/ 今回は、手軽に使えて、拡張性もありそうなMermaid.jsを試してみます。 Mermaid.jsとは？ Visual Studio CodeでMermaid.jsを使う方法 Markdown Preview Enhancedの使い方図の出力見た目のカスタマイズ参考 Mermaid.jsとは？ Mermaid.jsは、JavaScriptでグラフやチャート図を描くためのライブラリーです。︵英語の﹁mermaid﹂は、日本語で﹁人魚﹂という意味︶︵公式サイト︶ https:

jsstudy 2020/04/19

リンク

VSCodeでMarkdown

挑戦し続けたい。ぼんやりばかりはしていられない。﹁失敗したところでやめてしまうから失敗になる成功するところまで続ければ、それは成功になる﹂ VSCodeでMarkdown Markdown環境にBoostnoteを使おうを思ったけど、VSCodeにしたという話。はじめに MarkdownとUMLに触れる機会が出てきたので、何か良い環境が無いかと探していたら、Boostnoteというものを見つけた。やりたいことは、 1.各種メモとプログラムコードをシンタックスハイライトで見やすく残したい 2.UMLやシーケンス図の作成 3.Markdown→HTMLにして、Blog投稿 4.オフライン環境やネット規制がかかっている環境でも使いたい最初の2つは、そのままできそう。 Blog(Blogspot)はどうやれば良いのか。いい感じに装飾して欲しいし、画像やgistの引用もしたい。と、思っ

jsstudy 2020/04/19

https://shd101wyy.github.io/markdown-preview-enhanced/#/customize-css　説明の通り、ctrl+shift+pでコマンド入力開いて、Markdown Preview Enhanced: Customize Css を入力して、開いたstyle.lessにカスタマイズしたいcssを入力する。

グラフ

リンク

Markdown Preview Enhanced で図のプレビューがうまくいかない時の対処法 - Qiita

目的 VisualStudioCodeにてmermaidをコーディングしてMarkdown Preview Enhancedでプレビューすると図の色がうまく出ず、出力しても色がうまく出ないときの解決方法をまとめる。本記事はtykeさんのMPE(MarkdownPreviewEnhanced)でmermaidのグラフが真っ黒になる問題の情報をもとに作成しています。 tykeさん記事にしていただき本当にありがとうございます。お礼申し上げます。この記事のターゲット mermaidで図を作ったが、Markdown Preview Enhancedでのプレビューで色がおかしく(下記画像)なってしまった方解決方法 Markdown Preview Enhancedはインストールしてそのままだと一部の図の色合いがおかしくなる。プラグインの設定を修正してあげると正常に表示できる。プラグインバーを

jsstudy 2020/04/19

グラフ

リンク

Markdown Preview Mermaid Support - Visual Studio Marketplace

Markdown Preview Mermaid Support Adds Mermaid diagram and flowchart support to VS Code's builtin Markdown preview and to Markdown cells in notebooks. Currently supports Mermaid version 10.4.0. Usage Create diagrams in markdown using mermaid fenced code blocks: ```mermaid graph TD; A-->B; A-->C; B-->D; C-->D; ``` You can also use ::: blocks: ::: mermaid graph TD; A-->B; A-->C; B-->D; C-->D; ::: Con

jsstudy 2020/04/19

リンク

【目的無しの泥臭調査⑤】mermaid.jsの記法を覚えて、楽しく図を描く。 - Qiita

ふと気になったことを、淡々と赴くままに調査していく、この上ない自己満足記事第五弾。効率的な学習ぶりの華麗で綺麗な振る舞いの﹁世の多くの賢人技術者﹂とは違い、ひたすらに画面遷移と手書き記録を高速回転しながら、心身共に泥まみれの学習ぶりの私。今回は、テキスト形式で簡単に図形を描ける﹁mermaid.js﹂の調査をして、汚れ具合に磨きをかけよう。概要 Javascriptのチャート生成ライブラリテキスト形式で、図やフローチャートを生成できる。公式サイト環境 Windows10 Visual Studio Code 準備 Visual Studio Codeをこちらからインストール Visual Studio Codeの拡張機能欄を開き、﹁Markdown Preview Mermaid Support﹂をインストール﹁Ctrl + Shift + X﹂で拡張機能欄を表示できる。イ

jsstudy 2020/04/19

グラフ

リンク

mermaid.js で上流工程を好きになろう - Qiita

はじめに立場上、数週間コードを書かずにパワポや Excel の仕様書を作るような上流工程を担当することが増えてきました。もちろんそれはそれで大事なお仕事ですしそれなりにやり甲斐はありますが、クリックだけでポチポチと動かない成果物を作り上げるのはプログラマにとって苦痛しかないです。エンジニア同士であればリバースエンジニアリングでコードから仕様書を生成した無骨な HTML だったり、マークダウンで箇条書きの README.txt を書き上げるのでも良いのですが、要件定義など非エンジニアな人への仕様書に関してはまだまだパワポの設計書が主流です。最近は Microsoft 製品以外にも便利なツールは出ていますが、ライセンスが高額なためNGオンラインサービスは情報セキュリティ指針上NGなどなかなか導入に至らず、結果的にパワポや Excel でチマチマ作図するのがいつものパターンで、Ma

jsstudy 2020/04/19

グラフ

リンク

Visual Studio Code + Markdown Preview Enhancedはチームでデファクト化したいMarkdown環境だ！、と思う�(2017/10月時点) - Qiita

Visual Studio Code + Markdown Preview Enhancedはチームでデファクト化したいMarkdown環境だ！、と思う�(2017/10月時点)MarkdownエディタVSCodeVisualStudioCode 0.注意書き筆者の本稿での意図はエディタ宗教論争を巻き起こすことではありません。﹁世の中では、これくらいのことが出来るようになってきている﹂とご参考にしてただくことが本稿の狙いです。それによって何かのお役に立てれば幸いだなと思っています。皆さんは自分の使いやすい、皆さんの用途やプロジェクトの環境をにあったエディタを使用していただければとお断りしておきます。 1.Markdown環境について Markdwonは以前に書いたように今後の文書生産性を変えていく可能性のあるツールの一つです。Markdownのメリットは次の点だと思います。 1.1.M

jsstudy 2020/04/19

グラフ

リンク

Visual Studio Code + markdown preview enhanced は最高なノートだと思う - Qiita

はじめに最近 Visual Studio Code で Markdown 環境を作ったのですが、markdown-preview-enhancedが思いのほか何でもできて、特に理系のノートとして良さげに感じたのでメモします。すでに良記事（こちらとかこちらとか）がたくさん挙げられているので参考にしてください。ノートに求めるものノートに求める要素を自分の経験を元に独断と偏見で挙げると、数式が手軽に書ける図が手軽に書ける表が手軽に書けるグラフが手軽に書けるてな感じかと思います。とにかく手軽にサクッと書きたいですよね。 Visual Studio Code + markdown-preview-enhanced はこれら全てを叶えてくれます。数式を手軽に書く理系のノートには数式が必須です。数式を書く場合はLaTexをよく用いると思います（Word の人もいるとは思いますが）。

jsstudy 2020/04/19

数式が手軽に書ける図が手軽に書ける表が手軽に書けるグラフが手軽に書ける Visual Studio Code + markdown-preview-enhanced はこれら全てを叶えてくれます。

グラフ

リンク

Markdown Preview Enhanced

Description

jsstudy 2020/04/19

Markdown Preview Enhanced is a SUPER POWERFUL markdown extension for Atom and Visual Studio Code. The goal of this project is to bring you a wonderful markdown writing experience.

リンク

Visual Studio Code＋Markdownでチャート／グラフ／図を描画するには？ - いっしきまさひこBLOG

日ごろ、原稿以外のすべてのテキストをMarkdownフォーマットで書くようになってしまっているのですが、数式はLaTeXコマンドで書いています。数式があると、棒グラフや折れ線グラフも書きたくなるケースは多いと思います。﹁どうやって書くんだろう？﹂とググりまくってみて、なかなか解決策がヒットしなかったので、同じように時間を無駄にしないように、ここで情報提供しておきます︵※自分が書き方とかを見返すための忘備録でもありますが︶。 Markdown Preview Enhanced拡張機能と数式︵LaTeX︶そもそも、数式のLaTeXコマンドは$＜数式のLaTeXコマンド＞$ の形で自然に書いていたのですが、これは、 Markdown Preview Enhanced という拡張機能のおかげでした。。例えば、LaTexコマンドによる数式の例のように書くと︵※一見、難しそうなコマンドに見えます

jsstudy 2020/04/19

Markdown Preview Enhanced拡張機能と数式（LaTeX）　そもそも、数式のLaTeXコマンドは$＜数式のLaTeXコマンド＞$ の形で自然に書いていたのですが、これは、Markdown Preview Enhancedという拡張機能のおかげでした。

グラフ

リンク

markdownエディタにtyporaを使うのをやめた - kamocyc’s blog

Typoraというmarkdownエディタがあり，結構長い期間︵2年くらい？︶使っていました． Markdown形式でテキストを書くと，リアルタイムで書いたテキストがフォーマットされるという特徴を持ち，書いてみるととても楽しいです．しかし，長く使っているとデメリットが目立つようになってきました．現在は使うのをほぼやめて，Visual Studio Codeで主にmarkdownは書いています．以下，その理由です．理由1: 大量のメモの整理が難しい今まで，日常的にちょっとしたメモを残すのにもっぱらtyporaを使っていました．その後，1年以上使っていると，メモが大量に溜まってきて，整理や探すのが課題になってきました．しかし，Typoraはあくまでmarkdownエディタです．Evernoteのように大量のノート︵テキストファイル︶を管理する用途ではありません．そのため，タグ

jsstudy 2020/04/19

理由2: 拡張性が無い Visual Studio Codeではextension (拡張機能) を入れて拡張できます．何なら自分でextensionを作ることもできます．しかし，typoraは拡張機能やマクロ機能は無いため，自由な拡張はできません． ●グラフ ●ツール

リンク

mermaid.jsのフローチャートの書き方 | 田舎からGeekを目指す

mermaid.js はテキストベースでフローチャートなどの図を書くことのできる JavaScript 製のライブラリ・ツールです。簡単にテキストで書けて、図も綺麗に出力されるかなり良い環境だと思います。以前 AsciiDoc との連携について記事にしましたが、この記事では mermaid.js のフローチャートについて書き方を記載します。 AsciiDoc との連携については下記記事を参考にしてください。

jsstudy 2020/04/19

mermaid.js はテキストベースでフローチャートなどの図を書くことのできる JavaScript 製のライブラリ・ツールです。簡単にテキストで書けて、図も綺麗に出力されるかなり良い環境だと思います。

リンク

MermaidとMscgenのシーケンス図をプレビューするVisual Studio Code拡張を作りました（画像保存機能あり）

シーケンス図をテキスト表現する Mermaid やMscgenを、Visual Studio Code でプレビューし、ファイルで保存する Visual Studio Code Extensionsを作成しました。 2022年7月頃‥更新プレビューイメージを、jpeg、png︵背景透過する/しない︶、SVGの各形式でのファイルまたはSVGでクリップボードに保存する機能を追加しました。MermaidだけでなくMscgenでも似た感じで動作します。 Mermaid の公式ライブラリを使う環境で、グラフの上下に巨大な余白が表示されてしまう、という課題がありますが、これも調整してあります。

jsstudy 2020/04/19

シーケンス図をテキスト表現する Mermaid や Mscgen を（無理やり）プレビューするための Visual Studio Code Extensionsを作成しました。

グラフ

リンク

コードでフローチャートシーケンス図ガントチャート等を描く③ ～mermaidの図を出力する～ - Qiita

目的 mermaidにて作成した図を出力する方法をまとめるこの記事のターゲット mermaidで描いた図を出力して使いたい方 Markdownファイルにmermaidを記載してMarkdown PDFでhtml出力したらコマンドブロックがそのまま出力されてしまった方どうにかしてmermaidの図をpngなどの形式で図形を画像として見たい方(図によっては出力出来なかったり文字が荒くなったりします) サンプルコード本記事の説明で使用するサンプルコードを記載する。 ※記載方法は別途記事でまとめる予定なので、今回は単純に下記のコードをテンプレートとしてコピーして使ってください。 graph LR A[Hard edge] -->|Link text| B(Round edge) B --> C{Decision} C -->|One| D[Result one] C -->|Two| E[R

jsstudy 2020/04/19

mermaidにて作成した図を出力する方法をまとめる

グラフ

リンク

mermaidを使ったmarkdown資料作りメモ(VS Codeの場合) - Qiita

Introduction 最近、VS codeでメモやドキュメントを残すことが増えて、Markdownで書く機会が増えました。 *2022/2/22 GithubやNotionでも、mermaid記法をサポートしてきており、注目度も上がってきてますね。いろいろと試しているなかで、Mermaidを使ってガントチャートやシーケンス図も作れる便利さを知り、せっかくなので書き方をnoteしておきます。 VS codeをmarkdowneditorとして使用するということ自体は、多くの方がやっています。特に、VS code + Markdown Preview Enhanced の拡張機能　という構成で使用する人が多く、私もその構成で使っています。余談ですが、もともとAtmoでかなり支持されていた拡張機能︵パッケージ︶のようです。私もAtomを使うには使いますが、VS codeのほうがサク

jsstudy 2020/04/19

Sequence diagrams　シーケンス図　矢印

グラフ

リンク

Mermaid | Diagramming and charting tool

MermaidDiagramming and charting tool JavaScript based diagramming and charting tool that renders Markdown-inspired text definitions to create and modify diagrams dynamically.

jsstudy 2020/04/19

VSCode で Markdown + mermaid を使う - shuntaro3.log http://shuntaro3.hatenablog.com/entry/2018/05/19/201651

リンク

VSCode で Markdown + mermaid を使う - shuntaro3.log

◆ はじめに最近、何でも markdown で書きたい欲が凄い。ただ、markdown だと図とかが描けないので、そういう資料はパワポとかで作っていたが、バージョン管理ができなくて嫌というジレンマをずっと持っていた。そんな折、簡単な図なら mermaid というツールで描けるということを思い出し、使ってみることにしたら、結構良かったのでメモ。ちなみに、mermaid は以前参加した岡山 Ruby, RubyonRails 勉強会で教えてもらった。 ◆ 構築環境 Windows10VSCode インストール済 ◆ 手順 1. VSCode 拡張機能﹁Markdown Preview Enhanced﹂のインストール VSCode の拡張機能のタブから﹁Markdown Preview Enhanced﹂を入力し、インストール。簡単。インストール後は、再読み込みを忘れずに。2

jsstudy 2020/04/19

簡単な図なら mermaid というツールで描ける　mermaid - Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs. https://mermaid-js.github.io/mermaid/

グラフ

リンク

はてなブックマーク

タグ

関連タグで絞り込む (7)

グラフに関するjsstudyのブックマーク (19)

お知らせ

今週のはてなブックマーク数ランキング（2024年7月第1週）

月間はてなブックマーク数ランキング（2024年6月）

今週のはてなブックマーク数ランキング（2024年6月第5週）

公式Twitter

キーボードショートカット一覧

はてなブックマーク

公式Twitter

はてなのサービス