Git ブランチの表現も Mermaid がよい感じに表示してくれました
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 の
GitHubで使えるようになった Mermaid の便利なところ
はじめに GitHub で Mermaid がサポートされました。 Mermaid は図やグラフを描画するの独自の記法を持ちます。 その記法を Markdown のコードブロック中に記述するだけで図を描画できるのが便利です。 ...便利なのですが、記法が独特なことや機能が豊富なことから、とっつきにくいところもあります。 弊社[1]では みんチャレ 開発の情報共有ツールとして esa.io を活用しており、 esa も Mermaid をサポートしており以前から活用していました。 この記事では、私がこれまでに活用してきた中から特に便利だと感じた機能を紹介します。 ちなみに Zenn も Mermaid をサポートしているため図を描画できます。 Gantt ガントチャートです。 私が Mermaid を使いたいと思ったきっかけの機能です。 まずは、一番シンプルな例を書きます。 gantt Co
Next.js + NestJS + GraphQLで変化に追従するフロントエンドへ 〜 ショッピングクーポンの事例紹介
今回は、fragmentを活用するためにパターンCを採用しており、厳密には、以下のように方針を定めています。 SSR時のクエリ発行: ページコンポーネント単位 CSR時のクエリ発行: CSRが必要なコンポーネント単位 この際、取得したqueryの結果をどのようにfragmentへ変換するかというのがポイントです。 そこで、graphql-anywhereの filter メソッドを用いることで、クエリ結果をfragmentへ変換します。 以下は、簡略化されたクーポンページの実装例です。 type DetailPageProps = { // GraphQLクエリの結果 data: Query } const DetailPage: FunctionComponent<DetailPageProps> = ({ data }) => { // couponはGraphQLのCouponスキー
ウォーターフォール図の作成 - Microsoft サポート
Excel for Microsoft 365 Word for Microsoft 365 Outlook for Microsoft 365 PowerPoint for Microsoft 365 Excel for Microsoft 365 for Mac Excel 2021 Word 2021 Outlook 2021 PowerPoint 2021 Excel 2019 Word 2019 Outlook 2019 PowerPoint 2019 Excel 2016 Word 2016 Outlook 2016 PowerPoint 2016 Excel for iPad Excel for iPhone その他...表示数を減らす ウォーターフォール図には、値の増減が示される累計が表示されます。 これは、最初の値 (たとえば、純益) が、一連の正の値または負の値によって
漫画「対数グラフで伝染病を見る」（またの名を「対数グラフ入門まんが」） | グラフ哲学舎 ブログ出張所
<< 新型コロナウイルス 緊急事態宣言の対象県，対象でない県について，片対数グラフで予測する（2020/4/6時点） | main | （4/10情報）新型コロナウイルス（COVID-2019）の死亡者（人口に比例した世界地図） >> 新型コロナウイルス感染症について，片対数グラフを見かけたり私自身描いているのですが， 「対数グラフとはなんぞや」ということを伝えたくて漫画を描きました。 「対数グラフで伝染病を見る」（全12ページ） サイトにpdfファイルでアップしたのでまとめて読みたい人はこちらにどうぞ http://graph.moo.jp/comic.html#up202004100200410 ※2020/4/11 友人に助言を受けました。 「対数グラフに興味がない人でも，漫画後半の"現在の東京都，大阪府，福岡県の感染者数の増加率が同じ"というのを見てほしい。 新規感染者数は，東京都
[JS]スマホに最適化された優れもの！さまざまなチャートやグラフを実装できるCanvasベースのライブラリ -F2
チャートやグラフは、さまざまなスマホアプリで見かけます。 スマホのデバイスに対してデザイン、インタラクション、パフォーマンスに最適化されたチャートやグラフを実装するHTML5 Canvasベースのライブラリを紹介します。 Node.js、React Nativeなどに互換性もあり、50種類以上のチャートやグラフを簡単に利用できます。 スマホ向けのデザイン デザインはスマホに最適化されており、軽快なインタラクションでデータをより自然に表示します。 スマホに最適化されたパフォーマンス 軽量で、素晴らしいレンダリングのパフォーマンスを実現。 互換性 HTML5のCanvasベースで実装されており、Node.js、React Nativeで実行することもできます。 ライセンス MITライセンスで、個人でも商用でも無料で利用できます。 F2のデモ まずはスマホのアプリでよく見かける、美しいデザインと
![[JS]スマホに最適化された優れもの！さまざまなチャートやグラフを実装できるCanvasベースのライブラリ -F2](https://cdn-ak-scissors.b.st-hatena.com/image/square/38d845daa3306af6511040b4844ec0fb7250d64c/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201803%2F2018083111.png)
GitHub APIから学ぶ次世代のAPI実装方式GraphQL - Qiita
最近公開されたGitHubのAPIは、GraphQLという形式に対応しました。今後はこちらが主流になっていくようで、既存のREST APIからGraphQLへのマイグレーションガイドも提供されています。 今回は、このGraphQLについて、実際にGitHubのAPIを叩きながらその仕組みを解説していきたいと思います。 GraphQLとは 歴史 GraphQLは、Facebookの中で2012年ごろから使われ始めたそうです。その後2015年のReact.js Confで紹介されたところ話題となり、同年"technical preview"のステータスでオープンソースとして公開されました。その後仕様が詰められ、2016年9月に晴れて"preview"を脱し公式実装として公開されました。これと同じタイミングで、GitHubからGraphQLバージョンのAPIが公開されています。 このあたりの経緯
これでもう悩まない！2017年のデザイントレンド完全ガイド
2016年も毎年と同じように、デザインについて新しいことを学んできました。今回は、ウェブからグラフィックやロゴデザインまで、デザイン全般に関する2017年のトレンドを掘り下げてみていきましょう。 デザイントレンドはメディアやテクノロジー、ファッション業界、そして最近では「使いやすさ」を追求するユーザビリティーなどに影響を受けています。トレンドは徐々に細かく枝分かれし、いつの間にか同じように消えていきます。 基本的にデザイントレンドの寿命は1〜2年。2017年のデザインは、2016年のトレンドを引き継いだものとなり、雰囲気もここ数年よく利用され、親しまれているものと言えるでしょう。Google マテリアルデザインの影響力は今年も強く、対応にはいくつかの変更が必要になります。 Adobe が2017年デザイントレンドを発表！確認しておきたいポイントとは？ 2017年のWebデザインはどうなる？
Sequence Diagram
Sequence diagrams A Sequence diagram is an interaction diagram that shows how processes operate with one another and in what order. Mermaid can render sequence diagrams. The code snippet below: %% Example of sequence diagram sequenceDiagram Alice->>John: Hello John, how are you? John-->>Alice: Great!Renders the following diagram: sequenceDiagram Alice->>John: Hello John, how are you? John-->>Alice
若手プログラマー必読！５分で理解できるER図の書き方５ステップ
データベース設計の基本中の基本であるER図。ER図を書きたいけど、「記法が分からない」「どういうステップで書けば良いか分からない」という若手エンジニアも多いのではないでしょうか。 ER図は１０種類近くあり、種類によって記法が異なります。このことが難しいイメージを与えていますが、実はそれほど難しいものではありません。覚えれば良いER図は２種類だけです。 しかも、この記事で解説している基礎知識を押えれば、たった５つのステップで作成することができます。 この記事では、ER図の基礎知識からER図の書き方まで、エンジニアが抑えておくべきER図の全知識をどこよりも分かりやすく解説します。 この記事を読み終えたとき、若手エンジニアもER図を書けるようになっているでしょう。 この記事を参考に最適なデータベース設計を進めて下さい。 １．ER図とは ER図とは、「データベース設計（データモデリング）で使う設計
Web開発でもアプリ開発でも使える状態遷移図を自動生成するツールを作りました - Qiita
概要 先日こちらの記事でgraphvizを使って状態遷移図を作成する方法をご紹介したのですが、これでもまだ複雑で記述量も多いのでとっつきづらいと思い、このgraphvizのソースコードを自動生成して画像を出力するコマンドラインアプリケーションを作成しました。 このアプリケーションはPyagram（ぱいあぐらむ）といい、その名前から察しがつくかと思いますがPythonを使用して開発されました。開発期間は１日でした。 このPyagramを使うことで複雑な状態遷移図を比較的簡単に作成することができるようになりますので、以下でご紹介したいと思います。 状態遷移図の描き方についてはこちらの記事を参考にしています。 出来上がりの図は以下のような感じになります。 図には幾つかのオブジェクトがあります。 図のタイトル（最上段） ビュー（二重丸） サーバサイドの処理（灰色の背景の一重丸） 画面遷移（破線の矢
ReactMotionで作るリッチなアニメーション（入門用） - Qiita
はじめに ネイティブアプリの普及やら何やらでWebでもリッチなUIが求められるようになってた昨今、皆様いかがお過ごしでしょうか。 今回はReact.jsでちょっと複雑なアニメーションを作る時に役立つReactMotionの使い方について解説したいと思います。 ReactMotionを使うことで、 アニメーションの途中でアニメーションのスピードを徐々に変更する処理を簡単に記述できる 複数の要素が絡むアニメーションを簡単に作ることができる などを行うことができるようになります。 対象読者 React.jsがちょっと読める 使用したライブラリのバーション Node.js v6.0.0 React.js 15.1.0 ReactMotion 0.4.3 基本的な使い方 ReactMotionには最も基本的なアニメーションを提供するMotionコンポーネント、複数の兄弟要素の相互作用によってアニメー
Markdownでシーケンス図を書いてGithubのREADME.mdに埋め込む - Qiita
Markdownで図を書く方法が予想外に快適だったので共有しなければならない。と使命感にかられました。 まずシーケンス図 めっちゃストックされてる以下を参照しつつ書いてみる Markdownテキストでシーケンス図とフローチャートを描く http://qiita.com/ka215/items/a709665cb34c505ccf1f StackEditでシーケンス図を書く https://stackedit.io/ ```sequence Frontend->Backend:get or post Backend->Redis:get Redis->Redis:get model Redis-->MySQL:get model (When data is not found on Redis) Redis-->Backend:mohdel Backend-->Frontend:json F
[OpenCV] いまさら局所特徴量で物体検出！？ - Qiita
１．はじめに OpenCVには，様々な処理が用意されています。画像処理，映像解析，カメラキャリブレーション，特徴点抽出，物体検出，機械学習，コンピュテーショナルフォトグラフィ，3D可視化などが基本モジュールで用意されています。さらに，エクストラモジュールを追加することで，より豊富うな処理が利用できます。[1] OpenCV 3.x系を中心に話をします。 今回は，OpenCVの局所特徴量がどの程度簡単に使えるのか興味があり，局所特徴量を利用した物体検出を作成しました。 最近世間では，ディープな物体認識で盛り上がっていますが。 特徴点抽出に関する詳しい説明は，検索すれば多数ありますので，ここでは割愛します。 藤吉先生 (中部大学)のスライド「画像局所特徴量SIFTとそれ以降のアプローチ」は，とてもわかり易く説明されています。 ２．特徴点検出と特徴量記述 特徴点検出と特徴量記述は，feature
![[OpenCV] いまさら局所特徴量で物体検出！？ - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/9c2ed04665b2f1e67c804d0329e7d234b880edd1/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCT3BlbkNWJTVEJTIwJUUzJTgxJTg0JUUzJTgxJUJFJUUzJTgxJTk1JUUzJTgyJTg5JUU1JUIxJTgwJUU2JTg5JTgwJUU3JTg5JUI5JUU1JUJFJUI0JUU5JTg3JThGJUUzJTgxJUE3JUU3JTg5JUE5JUU0JUJEJTkzJUU2JUE0JTlDJUU1JTg3JUJBJUVGJUJDJTgxJUVGJUJDJTlGJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmcz1mYzY0NzQ2YTllYjBkZTU4YzIyYTc3NTFmNWM5YjkwYg%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBobWljaHUmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPWZlYThlNmIxMGVjYjBkMzJhM2NhZGFmZjk3ZDhjYmIz%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3Db8341c2ef67a7639a633c9ccf3b2a2e3)
André Staltz - Unidirectional User Interface Architectures
This post is a non-exhaustive quick overview of the so-called “unidirectional data flow” architectures. Not meant to be taken as a beginner tutorial, but rather as an overview of their differences and peculiarities. At the end, I’ll introduce a new architecture which deviates significantly from the others. This post assumes client-side Web UI frameworks only. TERMINOLOGY It would be confusing to t
美しき git log –graph のエイリアス
git log --graph --pretty=oneline でもいいんだけど、情報として物足りない。 エイリアスの設定によりこんな感じに美しくすることが可能です。 .gitconfigのエイリアスは下記のように設定します。 [alias] lg = log --graph --pretty=format:'%Cred%h%Creset -%C(yellow)%d%Creset %s %Cgreen(%cr) %C(bold blue)<%an>%Creset' --abbrev-commit --date=relative lga = log --graph --all --pretty=format:'%Cred%h%Creset -%C(yellow)%d%Creset %s %Cgreen(%cr) %C(bold blue)<%an>%Creset' --abbrev-com
Node-REDでe-stat APIから日本の人口を取得し、Google Chartノードでグラフ化してみた - Qiita
Node-REDでe-stat APIから日本の人口を取得し、Google Chartノードでグラフ化してみたnode-red はじめに 行ったこと この記事では、2つのことにチャレンジしています。 Node-REDからe-stat APIをたたいて日本の人口を取得 Node-REDのGoogle Chartノードを用いて人口ピラミッドを描画 開発環境 OS : Mac OS X Yosemite Node-RED : v0.10.10 Node.js : v0.12.7 現在のNode-REDの姿 作業手順 1. Node-REDからe-stat APIをたたいて日本の人口を取得 e-Stat APIのページから利用登録を行い、アプリケーションIDを取得します。以下、アプリケーションIDはXXXの値を入れております。 今回は2011年の人口推計を使います。2011年の人口推計の統計IDは
RailRoady :: Ruby Model & Controller Class Diagram Generator
Alternate Usage If you don't like the way the rake tasks generate files, you can run the "railroady" command-line tool to manually generate DOT diagram source code. See the README for details. Features Trivial to integrate Simple to install and run. Dynamic Reverse engineer your existing source code. No more stupid Vizio diagrams that are perpetually outdated. Vector Graphics Rake tasks generate s
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
様々な機能を備えたMac用Markdownエディタ「Typora」がシーケンス図やフローチャートなどのダイアグラム表示をサポート。
ビッグデータで知る防災｜震災から5年、いま応援できること。 - Yahoo! JAPAN
