Want to improve the node's content? Try to make an edit request.
0
0
0
Want to improve the node's content? Try to make an edit request.
A demo for the Hub Nexus content editor, showing what could be created, and at the same time teaching how to create them with each syntax. It follows general markdown syntax, gfm, and more advanced like various charts and graphs code syntax.
Syntax Guide
Hub Nexus Content Editor is a WYSIWYG Markdown editor
WYSIWYG: an acronym for "what you see is what you get.", pronounced wiz-ee-wig
Markdown: Markdown is an easy-to-use markup language, creating formatted elements (headings, bulleted lists, URLs) with plain text, instead of using HTML, Hyper Text Markup Language.
The following are editable examples, as a reference of syntax guide
Headings
Headings range from H1, Heading 1 to H6, Heading 6, with prefix of numbers of # and a
NOTE: there's a
after#s
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Paragraphs
This is the first paragraph
The second paragraph starts after a blank line following the first paragraph
General Content
This paragraph shows the general content layouts and styles:
- Bold -
**Bold** - Italic -
*Italic* Strike-Through-~~Strike-Through~~code-`code`- link -
[link](https://www.hubnx.com) - user@example.com -
[user@example.com](mailto:user@example.com)
Collapsed Details
Title of the Hidden Details
Content of the hidden detailsLists
General List
- Python
- Pandas
- NumPy
- Javascript
- Node.js
- React
Numbered List
- Javascript
- Node.js
- React
- Express.js
- Rust
- Rocket
- Actix
- Python
- Pandas
- NumPy
Tasked List
- Create a Node with a draft Edit
- Complete a draft Edit
- Commit the Edit after approval
Tables
| header 1 | header 2 |
|---|---|
| cell 1 | cell 2 |
| cell 3 | cell 4 |
| cell 5 | cell 6 |
Math Formula
Multiline Formula
1 + \frac{q^2}{(1-q)}+\frac{q^6}{(1-q)(1-q^2)}+\cdots =
\prod_{j=0}^{\infty}\frac{1}{(1-q^{5j+2})(1-q^{5j+3})},
\quad\quad \text{for $|q| < 1$}.
1 + \frac{q^2}{(1-q)}+\frac{q^6}{(1-q)(1-q^2)}+\cdots =
\prod_{j=0}^{\infty}\frac{1}{(1-q^{5j+2})(1-q^{5j+3})},
\quad\quad \text{for $|q| < 1$}.
P(E) = {n \choose k} p^k (1-p)^{ n-k}
\mathbf{V}_1 \times \mathbf{V}_2 =
\begin{vmatrix}
\mathbf{i} & \mathbf{j} & \mathbf{k} \\
\frac{\partial X}{\partial u} & \frac{\partial Y}{\partial u} & 0 \\
\frac{\partial X}{\partial v} & \frac{\partial Y}{\partial v} & 0 \\
\end{vmatrix}
Inline Formula
This formula x = \sqrt{3x-1}+(1+x)^2 is inline
Code Blocks
Language-Agnostic Syntax Highlight
*emphasize* **strong**
_emphasize_ __strong__
const a = 1
Language-Specific Syntax Highlight
Enabled by adding a language postfix after the starting ```
Supports standard languages, e.g.
- java
- javascript, js
- typescript
- ruby
- python
- lua
- go
- html
- erb
- css
- coffee
- bash
- json
- yml
- xml
- etc., a prompt would appear after typing the starting
```
Python highlight
# Importing a module
import time
# Main function
def main():
print("Hello, World!")
print("This is the main function.")
print("Program execution started.")
# Adding a delay for demonstration purposes
time.sleep(2)
print("Program execution completed.")
# Check if the script is being run directly
if __name__ == "__main__":
# Call the main function if the script is run directly
main()
Typescript highlight
// Importing a module
import { setTimeout } from 'timers';
// Main function
function main(): void {
console.log("Hello, World!");
console.log("This is the main function.");
console.log("Program execution started.");
// Adding a delay for demonstration purposes
setTimeout(() => {
console.log("Program execution completed.");
}, 2000);
}
// Call the main function
main();
References
Footnote Reference
This is footnote reference1. This is another footnode reference2。
[^single-line]: single line footnote
[^multi-line]: multi-line footnote
an indentaion is necessary to include in the footnote
```
code block is allowed in footnote
```
general content layout and style is allowed like, **bold** and [link](https://www.hubnx.com)
Link Reference
[link text][link-label]
[link-label]: https://www.hubnx.com
Emoji
Supports standard symbols from native input methods, e.g.
😄 😆 😵 😭 😰 😅 😢 😤 😍 😌
👍 👎 💯 👏 🔔 🎁 ❓ 💣 ❤️ ☕️ 🌀 🙇 💋 🙏 💢
Images
Supports drag and drop, copy and paste, and from toolbar upload
Supports standard formats
- apng
- bmp
- gif
- ico
- cur
- jpg
- jpeg
- jfif
- pjp
- pjpeg
- png
- svg
- webp
Audios and Videos
Supports link parser from
- youtube.com
- dailymotion.com,
- facebook.com/video,
Supports Audio format
- wav
- mp3
- ogg
- flac
Supports Video format
- mp4
- m4v
- ogv
- webm
Charts
Pie Chart
%%{init: {"pie": {"textPosition": 0.5}, "themeVariables": {"pieOuterStrokeWidth": "5px"}} }%%
pie showData
title Rock, Scissors, and Paper
"Rock" : 42.96
"Scissors" : 50.05
"Paper" : 10.01
"Thumbs Up" : 5
Line Chart
{
"title": {
"text": "Stacked Area Chart"
},
"tooltip": {
"trigger": "axis",
"axisPointer": {
"type": "cross",
"label": {
"backgroundColor": "#6a7985"
}
}
},
"legend": {
"data": ["Email", "Union Ads", "Video Ads", "Direct", "Search Engine"]
},
"toolbox": {
"feature": {
"saveAsImage": {}
}
},
"grid": {
"left": "3%",
"right": "4%",
"bottom": "3%",
"containLabel": true
},
"xAxis": [
{
"type": "category",
"boundaryGap": false,
"data": ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
}
],
"yAxis": [
{
"type": "value"
}
],
"series": [
{
"name": "Email",
"type": "line",
"stack": "Total",
"areaStyle": {},
"emphasis": {
"focus": "series"
},
"data": [120, 132, 101, 134, 90, 230, 210]
},
{
"name": "Union Ads",
"type": "line",
"stack": "Total",
"areaStyle": {},
"emphasis": {
"focus": "series"
},
"data": [220, 182, 191, 234, 290, 330, 310]
},
{
"name": "Video Ads",
"type": "line",
"stack": "Total",
"areaStyle": {},
"emphasis": {
"focus": "series"
},
"data": [150, 232, 201, 154, 190, 330, 410]
},
{
"name": "Direct",
"type": "line",
"stack": "Total",
"areaStyle": {},
"emphasis": {
"focus": "series"
},
"data": [320, 332, 301, 334, 390, 330, 320]
},
{
"name": "Search Engine",
"type": "line",
"stack": "Total",
"label": {
"show": true,
"position": "top"
},
"areaStyle": {},
"emphasis": {
"focus": "series"
},
"data": [820, 932, 901, 934, 1290, 1330, 1320]
}
]
}
Bar Chart
{
"tooltip": {
"trigger": "axis",
"axisPointer": {
"type": "shadow"
}
},
"legend": {},
"grid": {
"left": "3%",
"right": "4%",
"bottom": "3%",
"containLabel": true
},
"xAxis": [
{
"type": "category",
"data": ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
}
],
"yAxis": [
{
"type": "value"
}
],
"series": [
{
"name": "Direct",
"type": "bar",
"emphasis": {
"focus": "series"
},
"data": [320, 332, 301, 334, 390, 330, 320]
},
{
"name": "Email",
"type": "bar",
"stack": "Ad",
"emphasis": {
"focus": "series"
},
"data": [120, 132, 101, 134, 90, 230, 210]
},
{
"name": "Union Ads",
"type": "bar",
"stack": "Ad",
"emphasis": {
"focus": "series"
},
"data": [220, 182, 191, 234, 290, 330, 310]
},
{
"name": "Video Ads",
"type": "bar",
"stack": "Ad",
"emphasis": {
"focus": "series"
},
"data": [150, 232, 201, 154, 190, 330, 410]
},
{
"name": "Search Engine",
"type": "bar",
"data": [862, 1018, 964, 1026, 1679, 1600, 1570],
"emphasis": {
"focus": "series"
},
"markLine": {
"lineStyle": {
"type": "dashed"
},
"data": [
[
{
"type": "min"
},
{
"type": "max"
}
]
]
}
},
{
"name": "Baidu",
"type": "bar",
"barWidth": 5,
"stack": "Search Engine",
"emphasis": {
"focus": "series"
},
"data": [620, 732, 701, 734, 1090, 1130, 1120]
},
{
"name": "Google",
"type": "bar",
"stack": "Search Engine",
"emphasis": {
"focus": "series"
},
"data": [120, 132, 101, 134, 290, 230, 220]
},
{
"name": "Bing",
"type": "bar",
"stack": "Search Engine",
"emphasis": {
"focus": "series"
},
"data": [60, 72, 71, 74, 190, 130, 110]
},
{
"name": "Others",
"type": "bar",
"stack": "Search Engine",
"emphasis": {
"focus": "series"
},
"data": [62, 82, 91, 84, 109, 110, 120]
}
]
}
Gantt
gantt
dateFormat YYYY-MM-DD
title Adding GANTT diagram functionality to mermaid
excludes weekends
%% (`excludes` accepts specific dates in YYYY-MM-DD format, days of the week ("sunday") or "weekends", but not the word "weekdays".)
section A section
Completed task :done, des1, 2014-01-06,2014-01-08
Active task :active, des2, 2014-01-09, 3d
Future task : des3, after des2, 5d
Future task2 : des4, after des3, 5d
section Critical tasks
Completed task in the critical line :crit, done, 2014-01-06,24h
Implement parser and jison :crit, done, after des1, 2d
Create tests for parser :crit, active, 3d
Future task in critical line :crit, 5d
Create tests for renderer :2d
Add to mermaid :1d
Functionality added :milestone, 2014-01-25, 0d
section Documentation
Describe gantt syntax :active, a1, after des1, 3d
Add gantt diagram to demo page :after a1 , 20h
Add another diagram to demo page :doc1, after a1 , 48h
section Last section
Describe gantt syntax :after doc1, 3d
Add gantt diagram to demo page :20h
Add another diagram to demo page :48h
Diagrams
Class Diagram
classDiagram
Animal <|-- Duck
Animal <|-- Fish
Animal <|-- Zebra
Animal : +int age
Animal : +String gender
Animal: +isMammal()
Animal: +mate()
class Duck{
+String beakColor
+swim()
+quack()
}
class Fish{
-int sizeInFeet
-canEat()
}
class Zebra{
+bool is_wild
+run()
}
State Diagram
stateDiagram-v2
[*] --> First
First --> Second
First --> Third
state First {
[*] --> InnerSecond
state InnerSecond {
[*] --> InnerSecondA
[*] --> InnerSecondB
InnerSecondA --> InnerThird
InnerSecondB --> [*]
state InnerThird {
[*] --> InnerThirdA
[*] --> InnerThirdB
InnerThirdA --> [*]
InnerThirdB --> [*]
}
}
}
state Second {
[*] --> SecondA
SecondA --> [*]
}
state Third {
[*] --> ThirdA
ThirdA --> [*]
}
digraph finite_state_machine {
fontname="Helvetica,Arial,sans-serif"
node [fontname="Helvetica,Arial,sans-serif"]
edge [fontname="Helvetica,Arial,sans-serif"]
rankdir=LR;
node [shape = doublecircle]; 0 3 4 8;
node [shape = circle];
0 -> 2 [label = "SS(B)"];
0 -> 1 [label = "SS(S)"];
1 -> 3 [label = "S($end)"];
2 -> 6 [label = "SS(b)"];
2 -> 5 [label = "SS(a)"];
2 -> 4 [label = "S(A)"];
5 -> 7 [label = "S(b)"];
5 -> 5 [label = "S(a)"];
6 -> 6 [label = "S(b)"];
6 -> 5 [label = "S(a)"];
7 -> 8 [label = "S(b)"];
7 -> 5 [label = "S(a)"];
8 -> 6 [label = "S(b)"];
8 -> 5 [label = "S(a)"];
}
Sequence Diagram
sequenceDiagram
participant web as Web Browser
participant blog as Blog Service
participant account as Account Service
participant mail as Mail Service
participant db as Storage
Note over web,db: The user must be logged in to submit blog posts
web->>+account: Logs in using credentials
account->>db: Query stored accounts
db->>account: Respond with query result
alt Credentials not found
account->>web: Invalid credentials
else Credentials found
account->>-web: Successfully logged in
Note over web,db: When the user is authenticated, they can now submit new posts
web->>+blog: Submit new post
blog->>db: Store post data
web->>web: Self Healing
par Notifications
blog--)mail: Send mail to blog subscribers
blog--)db: Store in-site notifications
and Response
blog-->>-web: Successfully posted
end
end
Flow Diagram
flowchart LR
subgraph subgraph1
direction TB
top1[top] --> bottom1[bottom]
end
subgraph subgraph2
direction TB
top2[left] --> bottom2[right]
end
%% ^ These subgraphs are identical, except for the links to them:
%% Link *to* subgraph1: subgraph1 direction is maintained
outside -- link to subgraph --> subgraph1
%% Link *within* subgraph2:
%% subgraph2 inherits the direction of the top-level graph (LR)
outside -- link to node --> top2
st=>start: Start|past
e=>end: End|future
op1=>operation: My Operation|past
op2=>operation: Stuff|current
sub1=>subroutine: My Subroutine|invalid
cond=>condition: Yes
or No?|approved
c2=>condition: Good idea|rejected
io=>inputoutput: catch something...|future
st->op1(right)->cond
cond(yes, right)->c2
cond(no)->sub1(left)->op1
c2(yes)->io->e
c2(no)->op2->e
C4 Diagram
C4Container
title Container diagram for Internet Banking System
System_Ext(email_system, "E-Mail System", "The internal Microsoft Exchange system", $tags="v1.0")
Person(customer, Customer, "A customer of the bank, with personal bank accounts", $tags="v1.0")
Container_Boundary(c1, "Internet Banking") {
Container(spa, "Single-Page App", "JavaScript, Angular", "Provides all the Internet banking functionality to cutomers via their web browser")
Container_Ext(mobile_app, "Mobile App", "C#, Xamarin", "Provides a limited subset of the Internet banking functionality to customers via their mobile device")
Container(web_app, "Web Application", "Java, Spring MVC", "Delivers the static content and the Internet banking SPA")
ContainerDb(database, "Database", "SQL Database", "Stores user registration information, hashed auth credentials, access logs, etc.")
ContainerDb_Ext(backend_api, "API Application", "Java, Docker Container", "Provides Internet banking functionality via API")
}
System_Ext(banking_system, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
Rel(customer, web_app, "Uses", "HTTPS")
UpdateRelStyle(customer, web_app, $offsetY="60", $offsetX="90")
Rel(customer, spa, "Uses", "HTTPS")
UpdateRelStyle(customer, spa, $offsetY="-40")
Rel(customer, mobile_app, "Uses")
UpdateRelStyle(customer, mobile_app, $offsetY="-30")
Rel(web_app, spa, "Delivers")
UpdateRelStyle(web_app, spa, $offsetX="130")
Rel(spa, backend_api, "Uses", "async, JSON/HTTPS")
Rel(mobile_app, backend_api, "Uses", "async, JSON/HTTPS")
Rel_Back(database, backend_api, "Reads from and writes to", "sync, JDBC")
Rel(email_system, customer, "Sends e-mails to")
UpdateRelStyle(email_system, customer, $offsetX="-45")
Rel(backend_api, email_system, "Sends e-mails using", "sync, SMTP")
UpdateRelStyle(backend_api, email_system, $offsetY="-60")
Rel(backend_api, banking_system, "Uses", "sync/async, XML/HTTPS")
UpdateRelStyle(backend_api, banking_system, $offsetY="-50", $offsetX="-140")
Graphs
Branch
%%{init: { 'logLevel': 'debug', 'theme': 'base', 'gitGraph': {'showBranches': true, 'showCommitLabel':true,'mainBranchName': 'MetroLine1'}} }%%
gitGraph
commit id:"NewYork"
commit id:"Dallas"
branch MetroLine2
commit id:"LosAngeles"
commit id:"Chicago"
commit id:"Houston"
branch MetroLine3
commit id:"Phoenix"
commit type: HIGHLIGHT id:"Denver"
commit id:"Boston"
checkout MetroLine1
commit id:"Atlanta"
merge MetroLine3
commit id:"Miami"
commit id:"Washington"
merge MetroLine2 tag:"MY JUNCTION"
commit id:"Boston"
commit id:"Detroit"
commit type:REVERSE id:"SanFrancisco"
User Journey
journey
title My working day
section Go to work
Make tea: 5: Me
Go upstairs: 3: Me
Do work: 1: Me, Cat
section Go home
Go downstairs: 5: Me
Sit down: 5: Me
Score
X:1
T:Speed the Plough
M:4/4
C:Trad.
S: https://abcnotation.com/
K:G
|:GABc dedB|dedB dedB|c2ec B2dB|c2A2 A2BA|
GABc dedB|dedB dedB|c2ec B2dB|A2F2 G4:|
|:g2gf gdBd|g2f2 e2d2|c2ec B2dB|c2A2 A2df|
g2gf g2Bd|g2f2 e2d2|c2ec B2dB|A2F2 G4:|
ColorMap
graph Transparency {
layout=neato
start=11 // empiric value to set orientation
bgcolor="#0000ff11"
node [shape=circle width=2.22 label="" style=filled]
5 [color="#0000ff80"]
6 [color="#ee00ee80"]
1 [color="#ff000080"]
2 [color="#eeee0080"]
3 [color="#00ff0080"]
4 [color="#00eeee80"]
1 -- 2 -- 3 -- 4 -- 5 -- 6 -- 1
}
Color Wheel
graph Color_wheel {
graph [
layout = neato
label = "Color wheel, 33 colors.\\nNeato layout"
labelloc = b
fontname = "Helvetica,Arial,sans-serif"
start = regular
normalize = 0
]
node [
shape = circle
style = filled
color = "#00000088"
fontname = "Helvetica,Arial,sans-serif"
]
edge [
len = 2.7
color = "#00000088"
fontname = "Helvetica,Arial,sans-serif"
]
subgraph Dark {
node [fontcolor = white width = 1.4]
center [width = 1 style = invis shape = point]
center -- darkred [label = "0°/360°"]
darkred [fillcolor = "#8B0000"]
brown [fillcolor = brown]
brown -- center [label = "30°"]
olive [fillcolor = "#808000"]
olive -- center [label = "60°"]
darkolivegreen [fillcolor = darkolivegreen fontsize = 10]
darkolivegreen -- center [label = "90°"]
darkgreen [fillcolor = darkgreen]
darkgreen -- center [label = "120°"]
"dark hue 0.416" [color = ".416 1 .6" fontcolor = white]
"dark hue 0.416" -- center [label = "150°"]
darkcyan [fillcolor = "#008b8b"]
darkcyan -- center [label = "180°"]
"dark hue 0.583" [color = ".583 1 .6" fontcolor = white]
"dark hue 0.583" -- center [label = "210°"]
darkblue [fillcolor = "#00008B"]
darkblue -- center [label = "240°"]
"dark hue 0.750" [color = ".750 1 .6"]
"dark hue 0.750" -- center [label = "270°"]
darkmagenta [fillcolor = "#8B008B"]
darkmagenta -- center [label = "300°"]
"dark hue 0.916" [color = ".916 1 .6"]
"dark hue 0.916" -- center [label = "330°"]
}
subgraph Tue {
node [width = 1.3]
"hue 0.083" -- brown
"hue 0.083" [color = ".083 1 1"]
"hue 0.125" [color = ".125 1 1"]
"hue 0.166" -- olive
"hue 0.166" [color = ".166 1 1"]
"hue 0.208" [color = ".208 1 1"]
"hue 0.250" -- darkolivegreen
"hue 0.250" [color = ".250 1 1"]
"hue 0.291" [color = ".291 1 1"]
"hue 0.333" -- darkgreen
"hue 0.333" [color = ".333 1 1"]
"hue 0.375" [color = ".375 1 1"]
"hue 0.416" -- "dark hue 0.416"
"hue 0.416" [color = ".416 1 1"]
"hue 0.458" [color = ".458 1 1"]
"hue 0.500" -- darkcyan
"hue 0.500" [color = ".500 1 1"]
"hue 0.541" [color = ".541 1 1"]
node [fontcolor = white]
"hue 0.000" [color = ".000 1 1"]
"hue 0.000" -- darkred
"hue 0.041" [color = ".041 1 1"]
"hue 0.583" -- "dark hue 0.583"
"hue 0.583" [color = ".583 1 1"]
"hue 0.625" [color = ".625 1 1"]
"hue 0.666" -- darkblue
"hue 0.666" [color = ".666 1 1"]
"hue 0.708" [color = ".708 1 1"]
"hue 0.750" -- "dark hue 0.750"
"hue 0.750" [color = ".750 1 1"]
"hue 0.791" [color = ".791 1 1"]
"hue 0.833" -- darkmagenta
"hue 0.833" [color = ".833 1 1"]
"hue 0.875" [color = ".875 1 1"]
"hue 0.916" -- "dark hue 0.916"
"hue 0.916" [color = ".916 1 1"]
"hue 0.958" [color = ".958 1 1"]
edge [len = 1]
"hue 0.000" -- "hue 0.041" -- "hue 0.083" -- "hue 0.125" -- "hue 0.166" -- "hue 0.208"
"hue 0.208" -- "hue 0.250" -- "hue 0.291" -- "hue 0.333" -- "hue 0.375" -- "hue 0.416"
"hue 0.416" -- "hue 0.458" -- "hue 0.500" --"hue 0.541" -- "hue 0.583" -- "hue 0.625"
"hue 0.625" -- "hue 0.666" -- "hue 0.708" -- "hue 0.750" -- "hue 0.791" -- "hue 0.833"
"hue 0.833" -- "hue 0.875" -- "hue 0.916" -- "hue 0.958" -- "hue 0.000"
}
subgraph Main_colors {
node [width = 2 fontsize = 20]
red [fillcolor = red fontcolor = white]
orangered [fillcolor = orangered]
orange [fillcolor = orange]
gold [fillcolor = gold]
yellow [fillcolor = yellow]
yellowgreen [fillcolor = yellowgreen]
deeppink [fillcolor = deeppink fontcolor = white]
fuchsia [label = "fuchsia\\nmagenta" fillcolor = "#FF00FF" fontcolor = white]
purple [fillcolor = purple fontcolor = white]
blue [fillcolor = blue fontcolor = white]
cornflowerblue [fillcolor = cornflowerblue]
deepskyblue [fillcolor = deepskyblue]
aqua [fillcolor = "#00FFFF" label = "aqua\\ncyan"]
springgreen [fillcolor = springgreen]
green [fillcolor = green]
purple -- fuchsia -- deeppink -- red
cornflowerblue -- blue -- purple
cornflowerblue -- deepskyblue -- aqua [len = 1.7]
aqua -- springgreen -- green -- yellowgreen -- yellow
yellow -- gold -- orange -- orangered -- red [len = 1.6]
orange -- "hue 0.083"
deeppink -- "hue 0.916"
deeppink -- "hue 0.875"
red -- "hue 0.000"
yellowgreen -- "hue 0.250"
blue -- "hue 0.666"
yellow -- "hue 0.166"
gold -- "hue 0.125"
green -- "hue 0.333"
springgreen -- "hue 0.416"
aqua -- "hue 0.500"
cornflowerblue -- "hue 0.583"
deepskyblue -- "hue 0.541"
purple -- "hue 0.791"
purple -- "hue 0.750"
fuchsia -- "hue 0.833"
}
subgraph Light_colors {
node [width = 2 fontsize = 20]
node [shape = circle width = 1.8]
edge [len = 2.1]
pink [fillcolor = pink]
pink -- red
lightyellow [fillcolor = lightyellow]
lightyellow -- yellow
mediumpurple [fillcolor = mediumpurple]
mediumpurple -- purple
violet [fillcolor = violet]
violet -- fuchsia
hotpink [fillcolor = hotpink]
hotpink -- deeppink
"light hue 0.250" [color = ".250 .2 1"]
"light hue 0.250" -- yellowgreen
lightcyan [fillcolor = lightcyan]
lightcyan -- aqua
lightslateblue [fillcolor = lightslateblue]
lightslateblue -- blue
lightgreen [fillcolor = "#90EE90"]
lightgreen -- green
lightskyblue [fillcolor = lightskyblue]
lightskyblue -- deepskyblue
peachpuff [fillcolor = peachpuff]
peachpuff -- orange
"light hue 0.416" [color = ".416 .2 1"]
"light hue 0.416" -- springgreen
}
subgraph Tints {
node [width = 1]
edge [len = 2.4]
"hue 0 tint" -- pink
"hue 0 tint" [color = "0 .1 1"]
"hue 0.041 tint" [color = ".041 .1 1"]
"hue 0.083 tint" -- peachpuff
"hue 0.083 tint" [color = ".083 .1 1"]
"hue 0.125 tint" [color = ".125 .1 1"]
"hue 0.166 tint" -- lightyellow
"hue 0.166 tint" [color = ".166 .1 1"]
"hue 0.208 tint" [color = ".208 .1 1"]
"hue 0.250 tint" -- "light hue 0.250"
"hue 0.250 tint" [color = ".250 .1 1"]
"hue 0.291 tint" [color = ".291 .1 1"]
"hue 0.333 tint" -- lightgreen
"hue 0.333 tint" [color = ".333 .1 1"]
"hue 0.375 tint" [color = ".375 .1 1"]
"hue 0.416 tint" -- "light hue 0.416"
"hue 0.416 tint" [color = ".416 .1 1"]
"hue 0.458 tint" [color = ".458 .1 1"]
"hue 0.5 tint" -- lightcyan
"hue 0.5 tint" [color = ".5 .1 1"]
"hue 0.541 tint" -- lightskyblue
"hue 0.541 tint" [color = ".541 .1 1"]
"hue 0.583 tint" [color = ".583 .1 1"]
"hue 0.625 tint" [color = ".625 .1 1"]
"hue 0.666 tint" -- lightslateblue
"hue 0.666 tint" [color = ".666 .1 1"]
"hue 0.708 tint" [color = ".708 .1 1"]
"hue 0.750 tint" -- mediumpurple
"hue 0.750 tint" [color = ".750 .1 1"]
"hue 0.791 tint" [color = ".791 .1 1"]
"hue 0.833 tint" -- violet
"hue 0.833 tint" [color = ".833 .1 1"]
"hue 0.875 tint" [color = ".875 .1 1"]
"hue 0.916 tint" -- hotpink
"hue 0.916 tint" [color = ".916 .1 1"]
"hue 0.958 tint" [color = ".958 .1 1"]
edge [len = 2]
"hue 0 tint" -- "hue 0.041 tint" -- "hue 0.083 tint" -- "hue 0.125 tint" -- "hue 0.166 tint" -- "hue 0.208 tint"
"hue 0.208 tint" -- "hue 0.250 tint" -- "hue 0.291 tint" -- "hue 0.333 tint" -- "hue 0.375 tint" -- "hue 0.416 tint"
"hue 0.416 tint" -- "hue 0.458 tint" -- "hue 0.5 tint" --"hue 0.541 tint" -- "hue 0.583 tint" -- "hue 0.625 tint"
"hue 0.625 tint" -- "hue 0.666 tint" -- "hue 0.708 tint" -- "hue 0.750 tint" -- "hue 0.791 tint" -- "hue 0.833 tint"
"hue 0.833 tint" -- "hue 0.875 tint" -- "hue 0.916 tint" -- "hue 0.958 tint" -- "hue 0 tint"
}
}
Grid
graph grid
{
fontname="Helvetica,Arial,sans-serif"
node [fontname="Helvetica,Arial,sans-serif"]
edge [fontname="Helvetica,Arial,sans-serif"]
layout=dot
label="grid"
labelloc = "t"
node [shape=plaintext]
// arbitrary path on rigid grid
A0 -- B1 -- C2 -- D3 -- E4 -- F5 -- G6 -- H7
H0 -- G1 -- F2 -- E3 -- D4 -- C5 -- B6 -- A7
edge [weight=1000 style=dashed color=dimgrey]
// uncomment to hide the grid
//edge [style=invis]
A0 -- A1 -- A2 -- A3 -- A4 -- A5 -- A6 -- A7
B0 -- B1 -- B2 -- B3 -- B4 -- B5 -- B6 -- B7
C0 -- C1 -- C2 -- C3 -- C4 -- C5 -- C6 -- C7
D0 -- D1 -- D2 -- D3 -- D4 -- D5 -- D6 -- D7
E0 -- E1 -- E2 -- E3 -- E4 -- E5 -- E6 -- E7
F0 -- F1 -- F2 -- F3 -- F4 -- F5 -- F6 -- F7
G0 -- G1 -- G2 -- G3 -- G4 -- G5 -- G6 -- G7
H0 -- H1 -- H2 -- H3 -- H4 -- H5 -- H6 -- H7
rank=same {A0 -- B0 -- C0 -- D0 -- E0 -- F0 -- G0 -- H0}
rank=same {A1 -- B1 -- C1 -- D1 -- E1 -- F1 -- G1 -- H1}
rank=same {A2 -- B2 -- C2 -- D2 -- E2 -- F2 -- G2 -- H2}
rank=same {A3 -- B3 -- C3 -- D3 -- E3 -- F3 -- G3 -- H3}
rank=same {A4 -- B4 -- C4 -- D4 -- E4 -- F4 -- G4 -- H4}
rank=same {A5 -- B5 -- C5 -- D5 -- E5 -- F5 -- G5 -- H5}
rank=same {A6 -- B6 -- C6 -- D6 -- E6 -- F6 -- G6 -- H6}
rank=same {A7 -- B7 -- C7 -- D7 -- E7 -- F7 -- G7 -- H7}
}
MindMap
- Hub Nexus
- Nodes
- Sections
- Edits
- Author & Contributors
- Like, Share, Favorite, Watch Later, Follow
- Support and Payout
- Syntax Guide
- General Content
- Emoji
- Headings
- Heading 1
- Heading 2
- Heading 3
- Heading 4
- Heading 5
- Heading 6
- Images
- Audio and Video
- Code Blocks
- Language-Agnostic Syntax Highlight
- Language-Specific Syntax Highlight
- Lists
- General List
- Numbered List
- Tasked List
- Tables
- Collapsed Details
- Paragraph
- Link References
- Footnote
- Math Formula
- Charts
graph information {
labelloc="t"
label="Mind map of Information.\nTwopi radial graph."
fontname="URW Chancery L, Apple Chancery, Comic Sans MS, cursive"
layout=twopi; graph [ranksep=2];
edge [penwidth=4 color="#f0f0ff"]
node [fontname="URW Chancery L, Apple Chancery, Comic Sans MS, cursive"]
node [style="filled" penwidth=0 fillcolor="#f0f0ffA0" fontcolor=black]
node [fontsize=10]
Information -- {
Knowledge
Communication
Technology
Science
Art
History
Health
Business
Environment
"Social Issues"
}
Knowledge -- {
"General Knowledge"
"Specialized Knowledge"
}
Communication -- {
"Verbal Communication"
"Written Communication"
}
Technology -- {
Hardware
Software
}
Science -- {
"Natural Sciences"
"Social Sciences"
}
Art -- {
"Visual Arts"
"Performing Arts"
}
History -- {
"Ancient History"
"Modern History"
}
Health -- {
"Physical Health"
"Mental Health"
}
Business -- {
Entrepreneurship
Management
}
Environment -- {
"Natural Environment"
"Built Environment"
}
"Social Issues" -- {
"Global Issues"
"Local Issues"
}
"General Knowledge" -- {
Facts
Trivia
Statistics
}
"Specialized Knowledge" -- {
"Scientific"
"Historical"
"Technical"
}
"Verbal Communication" -- {
Languages
"Public Speaking"
}
"Written Communication" -- {
"Writing Styles"
Documentation
}
Hardware -- {
Computers
"Mobile Devices"
}
Software -- {
Applications
"Operating Systems"
}
"Natural Sciences" -- {
Biology
Physics
Chemistry
}
"Social Sciences" -- {
Psychology
Sociology
}
"Visual Arts" -- {
Painting
Sculpture
}
"Performing Arts" -- {
Theater
Music
}
"Ancient History" -- {
Prehistoric
"Classical Civilizations"
}
"Modern History" -- {
Medieval
Contemporary
}
"Physical Health" -- {
Exercise
Nutrition
}
"Mental Health" -- {
Psychologic
"Emotional Well-being"
}
Entrepreneurship -- {
Startups
"Business Models"
}
Management -- {
Leadership
"Organizational Behavior"
}
"Natural Environment" -- {
Ecosystems
Conservation
}
"Built Environment" -- {
Architecture
Urban Planning
}
"Global Issues" -- {
"Climate Change"
Poverty
}
"Local Issues" -- {
"Community Development"
"Education Inequality"
}
c [label="© HubNX, Inc." fontsize=12 shape=plain style="" fontcolor=gray]
}
1
0
0
0