Bib
cit
登录 | 注册
登录 | 注册
登录 | 注册
登录
登录
使用 Google 登录
忘记密码？
还没有账号？
注册
注册
注册
已有账号？
登录
忘记密码？
提交
还没有账号？
注册
已有账号？
登录
ar
عربي
bn
বাংলা
de
Deutsch
en
English
es
español
fr
Français
hi
हिंदी
id
Indonesia
it
Italiano
ja
日本語
ko
한국어
ms
Malay
nb
Norsk
nl
Dutch
pl
Polski
pt
Português
ru
Русский
tl
Tagalog
tr
Türkçe
tw
台灣
uk
Українська
vi
Tiếng Việt
zh
中国人
MassiveDiag Playground
一体化图表代码可视化转换与实时编辑器
图表类型：
Select Type
▼
当前选择
None
UML & Software Architecture
PlantUML
C4 PlantUML
Mermaid
Nomnoml
DBML
Structurizr
UMLet
Graphs & Networks
Graphviz
D2
ERD
SMILES
Block & Flow Diagrams
BlockDiag
ActDiag
NwDiag
PacketDiag
RackDiag
SeqDiag
BPMN
Ditaa
Pikchr
Technical & Specialized
WaveDrom
Bytefield
SVGBob
TikZ
Symbolator
WireViz
Data & Mind Visualization
Vega
Vega-Lite
Excalidraw
Markmap
Vector Graphics
SVG
尝试其他示例
上传代码
创建图表
预览
100%
Edit In SVGEditor
下载
下载为 SVG
下载为 JSX
下载为 PNG
下载为 PDF
下载为 Docx
将代码转换为图表
在编辑器中输入或粘贴图表代码，或使用“上传代码”按钮从文件加载，然后点击“创建图表”生成可视化结果。
PlantUML Examples
Sequence
Client
Server
Request
Response
Class
Class
- attribute: Type
+ method(): Type
Use Case
Restaurant
Food Critic
Eat Food
Pay for Food
Drink
Activity
Hello world
This is defined on
several
lines
Component
C
c1
p1
p2
p3
c
State
A
Y
X
B
Z
Object
Deployment
Timing
C4 PlantUML Examples
Sequence
API Application
[Container]
Single-Page Application
[JavaScript and Angular]
Sign In Controller
[Spring MVC Rest Controller]
Security Component
[Spring Bean]
Database
[Relational Database Schema]
Submits credentials
[JSON/HTTPS]
Calls
isAuthenticated()
select * from users
where username = ?
[JDBC]
Legend
Container
Component
Container boundary
Dynamic
Single-Page Application
[JavaScript and Angular]
Provides all of the Internet
banking functionality to
customers via their web
browser.
API Application
[Container]
Sign In Controller
[Spring MVC Rest Controller]
Allows users to sign in to the
Internet Banking System.
Security Component
[Spring Bean]
Provides functionality
Related to signing in,
Database
[Relational Database Schema]
Stores user registration
information, credentials,
Submits credentials
[JSON/HTTPS]
Calls
isAuthenticated()
select * from users
where username = ?
[JDBC]
Legend
Person
System
Container
Component
Context
Widgets Limited
[Enterprise]
Customer Service
Agent
Deals with customer
enquiries.
Customer
A customer of Widgets
Limited.
E-commerce System
Allows customers to buy
widgets online on the
widgets.com website
Fulfilment System
Responsible for processing
and shipping of customer
orders.
Braintree Payments
Processes credit card
payments on behalf of
Widgets Limited.
Jersey Post
Calculates worldwide
shipping costs for packages.
Taxamo
Calculates local tax (for EU
B2B customers) and acts as
a front-end for Braintree
Payments.
Asks questions to
[Telephone]
Places orders for
widgets using
Looks up order
information using
Gets shipping
charges from
Sends order
information to
Delegates credit
card processing to
Uses for credit card
processing
Legend
system
person
external system
external person
Mermaid Examples
Flowchart
Start
End
Process
Sequence
Client
Server
Request
Response
Gantt
Task 1
Task 2
Task 3
Class
Animal
+int age
+String gender
+isMammal()
+mate()
Duck
+String beakColor
+swim()
+quack()
Fish
-int sizeInFeet
-canEat()
Zebra
+bool is_wild
+run()
State
Still
Moving
Crash
Pie
Programming Language Popularity
36%
29%
18%
10%
7%
JavaScript
Python
Java
C++
Other
Nomnoml Examples
Activity
Marauder
db
Pirate
a
b
c
Arrrrr
rum
*
0..7
Scope
A
B
Bird
Cat
B.Dog
Database
Data
People
Teams
Clients
Checklists
FMS
PMS
Activity Data
MIS
Dashboards
DBML Examples
Blog Post
dbml
post_status
post_status
draft
published
private
users
users
id
integer
username
varchar
role
varchar
created_at
timestamp
posts
posts
id
integer
title
varchar
body
text
user_id
integer
status
post_status
created_at
timestamp
posts:e->post_status:w
posts:e->users:w
1
*
Alias
dates.Day
id
int
next
int
previous
int
*
*
1
Issue
issues
number
integer
title
varchar
Structurizr Examples
System Context
User
[Person]
Software System
[Software System]
Uses
Graph
User
[Person]
Software System
[System]
Container
Software System - System Context
User
[Person]
Software
System
[Software
System]
Uses
UMLet Examples
Package
root
name
name
name
name
root
name
Deployment
Deployment
<artefact>
Name
State Machine
complex
state
some more...
Graphviz Examples
Directed
A
B
C
D
Undirected
A
B
C
D
Radial
A
B
C
D
Circular
A
B
C
D
Hierarchical
A
B
C
D
D2 Examples
Connection
d2parser
D2 Parser
+ reader
+ readerPos
- lookahead
# lookaheadPos
+ peek()
+ rewind()
Globbing
AWS
account
1
2
3
4
The Service
Styled
ERD Examples
Cardinality
Person
name
height
weight
birth_location_id
Location
id
city
state
country
0..N
1
Class
Person
name
[string]
weight
[int]
SMILES Examples
Example 1
Salsalate
Example 2
N-[4-(1H-1,3-benzimidazol-2-yl)phenyl]-2-cyanoacetamide
BlockDiag Examples
Block
A
B
C
Screen
Top page
button
List of FOOs
Detail FOO
Add FOO
logout
link
Detail of BAR
Edit BAR
ActDiag Examples
Activity Diagram
User
Mdiag
Copy Markdown
Convert text to image
Get PDF
Multilingualization
you
me
A
B
C
NwDiag Examples
Network Diagram
blockdiag
nwdiag { network dmz { address = "210.x.x.x/24" frontend1 [address = "210.x.x.1"]; frontend2 [address = "210.x.x.2"]; } network internal { address = "172.x.x.x/24"; mdiag[address = "172.x.x.1"]; mpix[address = "172.x.x.2"]; redis1; mongo1; } }
dmz
210.x.x.x/24
internal
172.x.x.x/24
210.x.x.1
frontend1
210.x.x.2
frontend2
172.x.x.1
mdiag
172.x.x.2
mpix
redis1
mongo1
Node Group
blockdiag
diagram { // define group at outside network definitions group { color = "#FF7777"; web01; web02; db01; } network dmz { web01; web02; } network internal { web01; web02; db01; } }
dmz
internal
web01
web02
db01
PacketDiag Examples
TCP Packet
blockdiag
packetdiag { colwidth = 32; node_height = 72; 0-15: Source Port; 16-31: Destination Port; 32-63: Sequence Number; 64-95: Acknowledgment Number; 96-99: Data Offset; 100-105: Reserved; 106: URG [rotate = 270]; 107: ACK [rotate = 270]; 108: PSH [rotate = 270]; 109: RST [rotate = 270]; 110: SYN [rotate = 270]; 111: FIN [rotate = 270]; 112-127: Window; 128-143: Checksum; 144-159: Urgent Pointer; 160-191: (Options and Padding); 192-223: data [colheight = 3]; }
0
16
32
Source Port
Destination Port
Sequence Number
Acknowledgment Number
Data Offset
Reserved
URG
ACK
PSH
RST
SYN
FIN
Window
Checksum
Urgent Pointer
(Options and Padding)
data
RackDiag Examples
Rack Diagram
blockdiag
rackdiag { 10U; 1: UPS [2U]; 3: Mref Server; 4: Mpix Server; 5: Mark Server; 6: Web Server; 7: Load Balancer; 8: CDN network; }
1
2
3
4
5
6
7
8
9
10
UPS
[2U]
Mref Server
Mpix Server
Mark Server
Web Server
Load Balancer
CDN network
SeqDiag Examples
Sequence Diagram
blockdiag
seqdiag { browser -> Bibcit [label = "POST /api/m2h"]; webserver -> processor [label = "Convert md to Docx"]; webserver <-- processor; browser <-- webserver; }
browser
Bibcit
webserver
processor
POST /api/m2h
Convert md to Docx
BPMN Examples
Business Process
Pool-Testcase
Lane - Testcase
A Task
The End
Conditional Flow
Ditaa Examples
ASCII to Diagram
Bibcit Feature
[Bibcit]
• MassiveMark
• MassivePix
• MassiveRef
• MassiveDiag
Pikchr Examples
Swimlane Diagram
Alan
Betty
Charlie
Darlene
1
2
future
3
fork!
1
2
future
3
4
1
2
goes
offline
5
back online
pushes 5
pulls 3 & 4
future
1
2
5
6
future
3
4
WaveDrom Examples
Digital Timing
clk
data
head
body
tail
req
ack
Signal Waveforms
Clock
Analog
Digital
Bus
A
B
C
D
Bus Protocols
CLK
MOSI
D7
D6
D5
D4
MISO
Q7
Q6
Q5
Q4
CS
Clock Domains
clk1
clk2
data1→2
D1
data2→1
D2
Bytefield Examples
Boxes
01
two
left
0
Tspan
length
1
Massive Diag
00
10
i+
00
SVGBob Examples
Sequence Diagrams
Sequence
Diagrams
A
B
C
D
F
E
G
Plot diagrams
Plot
diagrams
Uin
TikZ Examples
Force Diagram
m
1
m
2
m
1
g
T
T
m
2
g
a
a
1
Friction Force
m
F
f
1
=
µN
N
mg
1
Symbolator Examples
Device
Clocking
Clock
std_ulogic
Control signals
Enable
std_ulogic
Data port
Data1
std_ulogic
Data2
std_ulogic
Data3
std_ulogic
Clock
SIZE
RESET_ACTIVE_LEVEL
Clocking
clock
wire
Control signals
reset
wire
enable
wire
Data ports
data_in
wire
[SIZE-1:0]
data_out
wire
[SIZE-1:0]
WireViz Examples
Bill of Materials
X1
X1
Molex KK 254
female
4-pin
GND
1
VCC
2
RX
3
TX
4
W1
W1
Serial
4x
0.25 mm² (24 AWG)
+ S
0.2 m
X1:1:GND
1:BN
X2:1:GND
X1:2:VCC
2:RD
X2:2:VCC
X1:3:RX
3:OG
X2:4:TX
X1:4:TX
4:YE
X2:3:RX
X1:1:GND
Shield
X1:e--W1:w
X1:e--W1:w
X1:e--W1:w
X1:e--W1:w
X1:e--W1:w
X2
X2
Molex KK 254
female
4-pin
1
GND
2
VCC
3
RX
4
TX
W1:e--X2:w
W1:e--X2:w
W1:e--X2:w
W1:e--X2:w
Vega Examples
Bar Chart
0.0
0.1
0.2
0.3
0.4
0.5
0.6
0.7
0.8
0.9
1.0
1.1
0.1
0.6
0.9
0.4
0.7
0.2
1.1
0.8
0.6
0.1
0.2
0.7
A
B
C
Vega-Lite Examples
Isotype
Great Britain
United States
Excalidraw Examples
Hand Drawn
Markdown
Bibcit
PDF
Docx
Sketchy
Bibcit
Bmark
Parser
Hydrate with Latex
Re-optimize Docx
Convertor
Mdiag
Markmap Examples
Mind Map
Root
Topic 1
Topic 2
Topic 3
Sub 1.1
Sub 1.2
Knowledge Base
Root
Topic 1
Topic 2
Topic 3
Sub 1.1
Sub 1.2
Concept Map
Root
Topic 1
Topic 2
Topic 3
Sub 1.1
Sub 1.2
SVG Examples
SVG Innovation
BibCit
SVG Animation
Massive Mark
Massive Diag