20+ JavaScript libraries to draw your own diagrams (2024 edition)
20+ JavaScript libraries to draw your own diagrams (2024 edition) by Jordi Cabot | Jan 10, 2024 | tools, cloud & web engineering, Model-driven Engineering | 53 comments You can draw and model anything in your browser with JavaScript. Indeed, there is a vast array of user-friendly online modeling tools available to create UML (or ER, BPMN, …) diagrams right in the browser. But what if you want to c
GitHub - mermaid-js/mermaid: Generation of diagrams like flowcharts or sequence diagrams from text in a similar manner as markdown
Mermaid is a JavaScript-based diagramming and charting tool that uses Markdown-inspired text definitions and a renderer to create and modify complex diagrams. The main purpose of Mermaid is to help documentation catch up with development. Doc-Rot is a Catch-22 that Mermaid helps to solve. Diagramming and documentation costs precious developer time and gets outdated quickly. But not having diagrams
angular-chart.js - beautiful, reactive, responsive charts for Angular.JS using Chart.js
Angular Chart Reactive, responsive, beautiful charts for AngularJS based on Chart.js Code on Github Download (1.1.1) Tweet Dependencies This repository contains a set of native AngularJS directives for Chart.js. The only required dependencies are: AngularJS (requires at least 1.4.x) Chart.js (requires Chart.js 2.x). Files to download The easiest is to download with npm: npm install angular-chart.j
LaTeXでカルノー図を描く - あんパン
レポートでカルノー図が必要になったので、LaTeXでカルノー図描けるようにした。 これを参考に、ちょっとだけ変えた。 こんなのが生成できる。便利だ。 LaTeXでカルノー図 具体的にはまず\documentclassを \documentclass[a4j,10pt,dvipdfmx]{jarticle} みたいな感じにする。dvipdfmxを入れないと他の画像類がうまく表示されないっぽい。次に \usepackage[dvipdfmx]{graphicx} \usepackage{tikz} \usetikzlibrary{matrix,calc} と上のソースの8行目くらいから73行目くらいの両方をプリアンブルに突っ込む。 本文に \begin{center} \begin{figure} \centering \begin{Karnaugh}{$\tt{x_1 x_0}$}{$\tt
INTEROPのトポロジ図アイコンがフリー素材として公開されています:Geekなぺーじ
美し過ぎるネットワークトポロジ図が一部界隈で有名なINTEROP Tokyoですが、今年のネットワークトポロジ図で利用されたアイコンがPowerPointのフリー素材として公開されています。 図面とともにあらんことを！：第二面 ネットワークのゲンバ -ShowNetを支えるメンバーたちの奮闘ブログ- 昨年に続き、今年もネットワークトポロジ図を作成されている河口さんがネットワークトポロジ図作成に向ける熱い想いを綴ったブログが公開されていますが、その5ページ目に「One more thing...」として、以下のようにあります。 ここでご紹介したポイントの殆どは、PowerPoint でも実践できると思います。興味のある方は、一度ご自分の図面に採り入れてみてはいかがでしょうか。オマケになりますが、ShowNet の図面で使っているアイコンを PowerPoint で使えるようにしたものを置いて
flowchart.js
st=>start: Start:>http://www.google.com[blank] e=>end:>http://www.google.com op1=>operation: My Operation sub1=>subroutine: My Subroutine cond=>condition: Yes or No?:>http://www.google.com io=>inputoutput: catch something... para=>parallel: parallel tasks in=>input: some in out=>output: some out st->op1->cond cond(yes)->io->e cond(no)->para para(path1, bottom)->sub1(right)->op1 para(path2, top)->o
js-sequence-diagrams by bramp
This should be a diagram! If you don't see it you need Javascript enabled Intro A simple javascript library to turn text into vector UML sequence diagrams. Heavily inspired by websequencediagrams.com, who offer a serverside solution. We use Jison to parse the text, and Snap.svg to draw the image. Examples
Quick Sequence Diagram Editor - Example
Source text bfs:BFS[a] /queue:FIFO someNode:Node node:Node adjList:List adj:Node bfs:queue.new bfs:someNode.setLevel(0) bfs:queue.insert(someNode) [c:loop while queue != ()] bfs:node=queue.remove() bfs:level=node.getLevel() bfs:adjList=node.getAdjacentNodes() [c:loop 0 <= i < #adjList] bfs:adj=adjList.get(i) bfs:nodeLevel=adj.getLevel() [c:alt nodeLevel IS NOT defined] bfs:adj.setLevel(level+1) bf
Peity • progressive <svg> pie, donut, bar and line charts
Peity (sounds like deity) is a jQuery plugin that converts an element's content into a <svg> mini pie 2/5 donut 5,2,3 line 5,3,9,6,5,9,7,3,5,2 or bar chart 5,3,9,6,5,9,7,3,5,2 and is compatible with any browser that supports <svg>: Chrome, Firefox, IE9+, Opera, Safari. Download version 3.3.0 Uncompressed 8.8Kb jquery.peity.js Minified 3.6Kb (+gzipped 1.7Kb) jquery.peity.min.js Source github.com/be
AWS シンプルアイコン - AWS アーキテクチャーセンター | AWS
アーキテクチャダイアグラムは、設計、デプロイ、トポロジーを伝達する手段として優れています。 このページでは、ダイアグラムの構築に役立つ Amazon Web Services (AWS) 製品のアイコン、リソース、およびツールを提供しています。AWS では、お客様やパートナーがこれらのツールキットやアセットを使用してアーキテクチャ図を作成できるようにしています。 AWS アーキテクチャアイコンはシンプルに設計されているため、ダイアグラム内で簡単に使用できます。ホワイトペーパー、プレゼンテーション、データシート、ポスターなどの資料にアイコンを使用することも可能です。 ダイアグラムは、サードパーティーツール上の既存のライブラリを使用して構築できます。ライブラリにはレガシーアイコンセットが含まれているものもあるため、最新のアイコンを使用していることを確認してください。
TechCrunch | Startup and Technology News
Live Nation says its Ticketmaster subsidiary was hacked. A hacker claims to be selling 560 million customer records. An autonomous pod. A solid-state battery-powered sports car. An electric pickup truck. A convertible grand tourer EV with up to 600 miles of range. A “fully connected mobility device” for young urban innovators to be built by Foxconn and priced under $30,000. The next Popemobile. Ov
Smoothie Charts: A JavaScript Charting Library for Streaming Data
A JavaScript Charting Library for Streaming Data See It Hello world example Server CPU usage example Responsive chart example Get It Download smoothie.js or npm install smoothie (and browserify) or clone repository on GitHub Use It Read the Ten Minute Tutorial Explore, configure and generate code Discussion and Support (Google Groups) View MIT License Report issue / Request feature
Interactive shell for seqdiag
Interactive shell for seqdiag (for non IE browers) Source: { A -> B -> C [label = forward, return = back]; A -> D [label = forward, return = back] { D -> E; D -> F; } } Share your diagram: Shorten URL is here. Diagram:
Cacoo - Web上で図の作成とリアルタイムコラボレーション
Online diagramming tool for collaborating on wireframes, flowcharts, and more
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ASCIIFlow
Eukleides home page
Announcing diagrams preview release
Bitbucket | Git solution for teams using Jira
d3.js - Data-Driven Documents
jStat : a JavaScript statistical library
