Hub Nexus Example: Website Introduction: Content Editor

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

<details>
<summary>Title of the Hidden Details</summary>
Content of the hidden details
</details>

Lists

General List

• Python
• • Pandas
  • NumPy
• Javascript
• • Node.js
  • React

Numbered List

1. Javascript
2. 1. Node.js
   2. React
   3. Express.js
3. Rust
4. 1. Rocket
   2. Actix
5. Python
6. 1. Pandas
   2. NumPy

Tasked List

• Create a Node with a draft Edit
• Complete a draft Edit
• Commit the Edit after approval

Tables

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 reference^single-line. This is another footnode reference^multi-line。

[^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 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

![image alt, an SEO brief description](http://image-path.png)
![image alt, an SEO brief description](http://image-path.png "image title")

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]
}

[link-label]: https://www.hubnx.com
^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