Varku

Formatting & Design

23 min read

Links

Colours

background-primary
background-primary
background-primary
background-primary-alt
background-primary-alt
background-primary-alt
background-secondary
background-secondary
background-secondary
background-secondary-alt
background-secondary-alt
background-secondary-alt
background-modifier-border
background-modifier-border
background-modifier-border
background-modifier-form-field
background-modifier-form-field
background-modifier-form-field
background-modifier-form-field-highlighted
background-modifier-form-field-highlighted
background-modifier-form-field-highlighted
background-modifier-box-shadow
background-modifier-box-shadow
background-modifier-box-shadow
background-modifier-success
background-modifier-success
background-modifier-success
background-modifier-error
background-modifier-error
background-modifier-error
background-modifier-error-hover
background-modifier-error-hover
background-modifier-error-hover
background-modifier-cover
background-modifier-cover
background-modifier-cover
text-accent
text-accent
text-accent
text-accent-hover
text-accent-hover
text-accent-hover
text-normal
text-normal
text-normal
text-muted
text-muted
text-muted
text-faint
text-faint
text-faint
text-error
text-error
text-error
text-error-hover
text-error-hover
text-error-hover
text-highlight-bg
text-highlight-bg
text-highlight-bg
text-highlight-bg-active
text-highlight-bg-active
text-highlight-bg-active
text-selection
text-selection
text-selection
text-on-accent
text-on-accent
text-on-accent
interactive-normal
interactive-normal
interactive-normal
interactive-hover
interactive-hover
interactive-hover
interactive-accent
interactive-accent
interactive-accent
interactive-accent-hover
interactive-accent-hover
interactive-accent-hover
interactive-success
interactive-success
interactive-success
interactive-active-thumb-bg
interactive-active-thumb-bg
interactive-active-thumb-bg
scrollbar-bg
scrollbar-bg
scrollbar-bg
scrollbar-thumb-bg
scrollbar-thumb-bg
scrollbar-thumb-bg

Colours; 525252 FFF1E5 FDC6B5 FA9A85 A3C7B2

Header 1

Header 2

Header 3

Header 4

Header 5
Header 6

Text Formatting

Body - default

Body - bold

Body - italics

Body - strikethrough

Body - code

- math

Body - highlight

Bold & Highlight

Italics & Highlight

Bold, Italics & Highlight

Strikethrough & Highlight

Lorem ipsum dolor sit amet, consectetur, adipisicing elit. Iure minus voluptates illum aspernatur officia vel officiis, et quis qui. Enim omnis officia sunt consectetur obcaecati repudiandae! Numquam, voluptas at, ab officiis recusandae, dolorum inventore quod iste cumque explicabo dicta quidem accusantium velit odit deleniti, ipsum commodi? Name of the author

Callouts

Callout

Contents

Callout

Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.

Callout

Folder Item1

Callout

Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec metus bibendum egestas. Iaculis massa nisl malesuada lacinia integer nunc posuere. Ut hendrerit semper vel class aptent taciti sociosqu. Ad litora torquent per conubia nostra inceptos himenaeos.

Callout Tables CSS

Some examples of use cases

Sblank 1

  1. uno
  2. due
  3. tre

Sblank 1

B Lorem ipsum dolor sit amet, consectetur adipiscing elit. 4. uno 5. due 6. tre

Sblank 1

C Lorem ipsum dolor sit amet, consectetur adipiscing elit. 7. uno 8. due 9. tre

Sblank 1

D Lorem ipsum dolor sit amet, consectetur adipiscing elit. 10. uno 11. due 12. tre

Sblank 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. 13. uno 14. due 15. tre

CIAO

E Lorem ipsum dolor sit amet, consectetur adipiscing elit. 16. uno 17. due 18. tre

Sblank 2

F Cont

MCL

Multi column

Multi column

Multi column

Multi column

Multi column

Multi column

Tabbed

Lorem, ipsum dolor sit amet consectetur, adipisicing elit. (First) Internal Link > > bold italic

Lorem, ipsum dolor sit amet consectetur, adipisicing elit. (Second) External Link > >

Lorem, ipsum dolor sit amet consectetur, adipisicing elit. (Third)

  • bullet item
  • checkbox
  • tag

Blank container

Washerwoman

Math Block

Supported TeX/LaTeX commands — MathJax 3.2 documentation

Code Block

Lists

  • Bulleted List
  • 1
  • 2
  • 3
  1. Numbered List
  2. 2
  3. 3

Checkboxes

  • [/] In Progress
  • [>] Rescheduled
  • [<] Scheduled
  • [!] Important
  • [-] Cancelled
  • [?] Question
  • [*] Star
  • [n] Note
  • [l] Location
  • [i] Information
  • [S] Amount
  • [”] Quote
  • [I] Idea
  • [p] Pro
  • [c] Con
  • [b] Bookmark
  • [u] Up
  • [d] Down
  • [r] Rule/Law
  • [L] Language/Translation
  • [t] Time/Clock
  • [T] Telephone

HTML

Heading 1

My First Heading

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

My first paragraph.

This is a link

This is a
paragraph with a line break.

This is a red paragraph.

Mouse over this paragraph, to display the title attribute as a tooltip.

  My Bonnie lies over the ocean.

  

  My Bonnie lies over the sea.

  

  My Bonnie lies over the ocean.

  

  Oh, bring back my Bonnie to me.

This is a heading

This is a paragraph.

This is a heading

This is a paragraph.

This is a heading

This is a paragraph.

This is a heading

This is a paragraph.

Centered Heading

Centered paragraph.

This text is important!

This text is bold

This text is italic

This text is emphasized

This is some smaller text.

Do not forget to buy milk today.

My favorite color is blue red.

My favorite color is blue red.

This is subscripted text.

This is superscripted text.

Here is a quote from WWF's website:

For 60 years, WWF has worked to help people and nature thrive. As the world’s leading conservation organization, WWF works in nearly 100 countries. At every level, we collaborate with people around the world to develop and deliver innovative solutions that protect communities, wildlife, and the places in which they live.

Tomato

Orange

DodgerBlue

MediumSeaGreen

Gray

SlateBlue

Violet

LightGray

Hello World

Hello World

Hello World

Same as color name "Tomato":

rgb(255, 99, 71)

#ff6347

hsl(9, 100%, 64%)

Same as color name "Tomato", but 50% transparent:

rgba(255, 99, 71, 0.5)

hsla(9, 100%, 64%, 0.5)

In addition to the predefined color names, colors can be specified using RGB, HEX, HSL, or even transparent colors using RGBA or HSLA color values.

hsla(9, 100%, 64%, 0)

hsla(9, 100%, 64%, 0.2)

hsla(9, 100%, 64%, 0.4)

hsla(9, 100%, 64%, 0.6)

hsla(9, 100%, 64%, 0.8)

hsla(9, 100%, 64%, 1)

A Blue Heading

A red paragraph.

Collapsed Borders

If you want the borders to collapse into one border, add the CSS border-collapse property.

 

   

   

   

 

 

   

   

   

 

 

   

   

   

 

 

   

   

   

 

FirstnameLastnameAge
JillSmith50
EveJackson94
JohnDoe80

Cell that spans two columns

To make a cell span more than one column, use the colspan attribute.

 

   

   

 

 

   

   

   

 

 

   

   

   

 

NameAge
JillSmith43
EveJackson57

Cell that spans two rows

To make a cell span more than one row, use the rowspan attribute.

 

   

   

 

 

   

   

 

 

   

 

NameJill
Phone555-1234
555-8745

An Unordered HTML List

     

  • Coffee

    •  

  • Tea

    •  

  • Milk

 

An Ordered HTML List

     

  1. Coffee

    2.  

  2. Tea

    3.  

  3. Milk

Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus a consequat augue. Integer accumsan facilisis ornare. Nulla viverra tempus congue. Aenean vulputate nisl quis enim varius, non interdum ex porta. Duis ante odio, aliquet eget justo a, efficitur sodales sem. Donec ut nibh ac dui rutrum ullamcorper eget auctor ipsum. Sed laoreet tincidunt arcu ac rhoncus. Sed tincidunt eleifend iaculis. Praesent a erat quis dolor tempor tristique.

<p>In cursus, sem sit amet faucibus tincidunt, mauris dolor convallis erat, eget consectetur erat risus vulputate arcu. Vivamus commodo rutrum hendrerit. Etiam convallis gravida est ac sollicitudin. Aliquam fringilla arcu odio. Suspendisse potenti. Maecenas consequat bibendum vehicula. Quisque id diam dignissim, rutrum arcu non, condimentum orci. <p>

<p>Nullam eros dui, dignissim a tortor in, semper fringilla enim. Nunc quam magna, vehicula id tincidunt in, lobortis ut mauris. Donec in quam malesuada, suscipit neque vitae, facilisis tortor. Sed arcu dolor, egestas a porta quis, aliquam eu augue. Quisque molestie, urna sit amet lacinia maximus, orci justo sagittis dui, eget hendrerit felis nibh et urna. Nullam eu lacus elit. Nulla facilisi. Praesent ultricies tristique leo, tempus dignissim ante auctor eget. Pellentesque ut justo tempus lacus viverra pharetra. Suspendisse et magna ac lectus congue tempus. Integer mollis eu quam in luctus. Cras scelerisque accumsan ipsum, ac ultrices nulla eleifend nec. Etiam pretium accumsan lacus, eu rhoncus felis vestibulum non.<p>

<p>Nam commodo mi vel nibh dictum, placerat lobortis purus lobortis. Suspendisse vitae laoreet dolor. Nullam accumsan fringilla metus nec elementum. Donec dignissim sollicitudin ipsum, iaculis imperdiet elit bibendum in. Nullam commodo semper nisi, non lacinia urna pulvinar a. Aenean viverra urna erat, sit amet sollicitudin justo rutrum ac. Aenean feugiat congue felis, sed maximus lorem maximus fermentum. Aliquam non facilisis sapien, a malesuada ante. Proin condimentum odio dolor. Ut venenatis aliquet ex, vitae egestas sapien. Ut gravida porttitor erat vel volutpat.<p>

<p>Duis gravida nulla sit amet lobortis efficitur. Suspendisse sollicitudin arcu a erat lacinia, a ornare dolor venenatis. Vestibulum justo erat, pretium sit amet ligula sed, vulputate lobortis diam. Fusce imperdiet mollis feugiat. Maecenas ac mollis nibh. Nam tempor gravida orci eu commodo. Praesent congue nisi quis tincidunt porta. Vestibulum nisl nisl, vestibulum at ultricies ut, laoreet a tellus. Curabitur id risus ut magna congue porta. Sed pretium ante eget tincidunt lobortis. Duis aliquam nibh ut nunc tempor, et malesuada mauris sagittis.<p>
</div>

<div id="column2" style="float:left; margin:5;width:32%;">
<h1 style="text-align:center;font-size:40px;">Title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus a consequat augue. Integer accumsan facilisis ornare. Nulla viverra tempus congue. Aenean vulputate nisl quis enim varius, non interdum ex porta. Duis ante odio, aliquet eget justo a, efficitur sodales sem. Donec ut nibh ac dui rutrum ullamcorper eget auctor ipsum. Sed laoreet tincidunt arcu ac rhoncus. Sed tincidunt eleifend iaculis. Praesent a erat quis dolor tempor tristique.<p>

<p>In cursus, sem sit amet faucibus tincidunt, mauris dolor convallis erat, eget consectetur erat risus vulputate arcu. Vivamus commodo rutrum hendrerit. Etiam convallis gravida est ac sollicitudin. Aliquam fringilla arcu odio. Suspendisse potenti. Maecenas consequat bibendum vehicula. Quisque id diam dignissim, rutrum arcu non, condimentum orci.<p>

<p>Nullam eros dui, dignissim a tortor in, semper fringilla enim. Nunc quam magna, vehicula id tincidunt in, lobortis ut mauris. Donec in quam malesuada, suscipit neque vitae, facilisis tortor. Sed arcu dolor, egestas a porta quis, aliquam eu augue. Quisque molestie, urna sit amet lacinia maximus, orci justo sagittis dui, eget hendrerit felis nibh et urna. Nullam eu lacus elit. Nulla facilisi. Praesent ultricies tristique leo, tempus dignissim ante auctor eget. Pellentesque ut justo tempus lacus viverra pharetra. Suspendisse et magna ac lectus congue tempus. Integer mollis eu quam in luctus. Cras scelerisque accumsan ipsum, ac ultrices nulla eleifend nec. Etiam pretium accumsan lacus, eu rhoncus felis vestibulum non.<p>

<p>Nam commodo mi vel nibh dictum, placerat lobortis purus lobortis. Suspendisse vitae laoreet dolor. Nullam accumsan fringilla metus nec elementum. Donec dignissim sollicitudin ipsum, iaculis imperdiet elit bibendum in. Nullam commodo semper nisi, non lacinia urna pulvinar a. Aenean viverra urna erat, sit amet sollicitudin justo rutrum ac. Aenean feugiat congue felis, sed maximus lorem maximus fermentum. Aliquam non facilisis sapien, a malesuada ante. Proin condimentum odio dolor. Ut venenatis aliquet ex, vitae egestas sapien. Ut gravida porttitor erat vel volutpat.<p>

<p>Duis gravida nulla sit amet lobortis efficitur. Suspendisse sollicitudin arcu a erat lacinia, a ornare dolor venenatis. Vestibulum justo erat, pretium sit amet ligula sed, vulputate lobortis diam. Fusce imperdiet mollis feugiat. Maecenas ac mollis nibh. Nam tempor gravida orci eu commodo. Praesent congue nisi quis tincidunt porta. Vestibulum nisl nisl, vestibulum at ultricies ut, laoreet a tellus. Curabitur id risus ut magna congue porta. Sed pretium ante eget tincidunt lobortis. Duis aliquam nibh ut nunc tempor, et malesuada mauris sagittis.<p>
</div>

<div id="column3" style="float:left; margin:5;width:32%">
<h1 style="text-align:center;font-size:40px;">Title</h1>
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus a consequat augue. Integer accumsan facilisis ornare. Nulla viverra tempus congue. Aenean vulputate nisl quis enim varius, non interdum ex porta. Duis ante odio, aliquet eget justo a, efficitur sodales sem. Donec ut nibh ac dui rutrum ullamcorper eget auctor ipsum. Sed laoreet tincidunt arcu ac rhoncus. Sed tincidunt eleifend iaculis. Praesent a erat quis dolor tempor tristique.<p>

<p>In cursus, sem sit amet faucibus tincidunt, mauris dolor convallis erat, eget consectetur erat risus vulputate arcu. Vivamus commodo rutrum hendrerit. Etiam convallis gravida est ac sollicitudin. Aliquam fringilla arcu odio. Suspendisse potenti. Maecenas consequat bibendum vehicula. Quisque id diam dignissim, rutrum arcu non, condimentum orci.<p>

<p>Nullam eros dui, dignissim a tortor in, semper fringilla enim. Nunc quam magna, vehicula id tincidunt in, lobortis ut mauris. Donec in quam malesuada, suscipit neque vitae, facilisis tortor. Sed arcu dolor, egestas a porta quis, aliquam eu augue. Quisque molestie, urna sit amet lacinia maximus, orci justo sagittis dui, eget hendrerit felis nibh et urna. Nullam eu lacus elit. Nulla facilisi. Praesent ultricies tristique leo, tempus dignissim ante auctor eget. Pellentesque ut justo tempus lacus viverra pharetra. Suspendisse et magna ac lectus congue tempus. Integer mollis eu quam in luctus. Cras scelerisque accumsan ipsum, ac ultrices nulla eleifend nec. Etiam pretium accumsan lacus, eu rhoncus felis vestibulum non.<p>

<p>Nam commodo mi vel nibh dictum, placerat lobortis purus lobortis. Suspendisse vitae laoreet dolor. Nullam accumsan fringilla metus nec elementum. Donec dignissim sollicitudin ipsum, iaculis imperdiet elit bibendum in. Nullam commodo semper nisi, non lacinia urna pulvinar a. Aenean viverra urna erat, sit amet sollicitudin justo rutrum ac. Aenean feugiat congue felis, sed maximus lorem maximus fermentum. Aliquam non facilisis sapien, a malesuada ante. Proin condimentum odio dolor. Ut venenatis aliquet ex, vitae egestas sapien. Ut gravida porttitor erat vel volutpat.<p>

<p>Duis gravida nulla sit amet lobortis efficitur. Suspendisse sollicitudin arcu a erat lacinia, a ornare dolor venenatis. Vestibulum justo erat, pretium sit amet ligula sed, vulputate lobortis diam. Fusce imperdiet mollis feugiat. Maecenas ac mollis nibh. Nam tempor gravida orci eu commodo. Praesent congue nisi quis tincidunt porta. Vestibulum nisl nisl, vestibulum at ultricies ut, laoreet a tellus. Curabitur id risus ut magna congue porta. Sed pretium ante eget tincidunt lobortis. Duis aliquam nibh ut nunc tempor, et malesuada mauris sagittis.<p>
</div>

Jump to Chapter 4

Jump to Chapter 10

Chapter 1

This chapter explains ba bla bla

Chapter 2

This chapter explains ba bla bla

Chapter 3

This chapter explains ba bla bla

Chapter 4

This chapter explains ba bla bla

Chapter 5

This chapter explains ba bla bla

Chapter 6

This chapter explains ba bla bla

Chapter 7

This chapter explains ba bla bla

Chapter 8

This chapter explains ba bla bla

Chapter 9

This chapter explains ba bla bla

Chapter 10

This chapter explains ba bla bla

Tables

Column 1Column 2Column 3Column 4
1234
2345
3456

Progress Bar

Progress Bar

20%

40%

50%

60%

80%

100%

Recent Activity: appears in View mode CTRL + E or if in a callout

$= const value = Math.round(((dv.current().file.tasks.where(t => t.completed).length) / (dv.current().file.tasks).length || 0) * 100); "<progress value='" + value + "' max='100'></progress>" + " " + value + "%"

  • Task 1
  • Task 2
  • Task 3
  • Task 4
  • Task 5

3rd Party Support

  • [n] 3rd Party Supported open source libraries.

  • [n] Capacitor

    • [i] Capacitor is an open-source native runtime for building Web Native apps. Create cross-platform iOS, Android, and Progressive Web Apps with JavaScript, HTML, and CSS.

  • [n] CodeMirror

    • [i] CodeMirror is a code editor component for the web. It can be used in websites to implement a text input field with support for many editing features, and has a rich programming interface to allow further extension.

  • [n] DOMPurify

    • [i] DOMPurify is a DOM-only, super-fast, uber-tolerant XSS sanitizer for HTML, MathML and SVG.

  • [n] Electron

    • [i] Electron is an open-source cross-platform architecture enabling Chromium and Node.js for building desktop apps in JavaScript, HTML, and CSS.

  • [n] i18next

    • [i] i18next is an internationalization-framework written in and for JavaScript. But it’s much more than that!

  • [n] Lezer

    • [i] Lezer (the Dutch word for reader, pronounced like “laser”) provides a parser generator that outputs JavaScript modules, which can be loaded to parse code into a non-abstract syntax tree. This tree can then be used to do highlighting and basic semantic analysis.

  • [n] Lucide

    • [i] Lucide is an open-source icon library that provides 1000+ vector (svg) files for displaying icons and symbols in digital and non-digital projects. The library aims to make it easier for designers and developers to incorporate icons into their projects by providing several official packages to make it easier to use these icons in your project.

  • [n] MathJax

    • [i] A JavaScript display engine for mathematics that works in all browsers. No more setup for readers. It just works.

  • [n] Mermaid

    • [i] JavaScript based diagramming and charting tool that renders Markdown-inspired text definitions to create and modify diagrams dynamically.

  • [n] Moment.js

    • [i] Parse, validate, manipulate, and display dates and times in JavaScript.

  • [n] pdf.js

    • [i] PDF reader in JavaScript.

  • [n] PixiJS

    • [i] HTML5 creation engine, create beautiful digital content with the fastest, most flexible 2D WebGL renderer.

  • [n] Prism

    • [i] Prism is a lightweight, extensible syntax highlighter, built with modern web standards in mind. It’s used in millions of websites, including some of those you visit daily.

  • [n] rbush

    • [i] RBush is a high-performance JavaScript library for 2D spatial indexing of points and rectangles. It’s based on an optimized R-tree data structure with bulk insertion support.

  • [n] remark

    • [i] remark is an ecosystem of plugins that work with markdown as structured data, specifically ASTs (abstract syntax trees). ASTs make it easy for programs to deal with markdown. We call those programs plugins. Plugins inspect and change trees. You can use the many existing plugins or you can make your own.

  • [n] reveal.js

    • [i] reveal.js is an open source HTML presentation framework. It’s a tool that enables anyone with a web browser to create fully-featured and beautiful presentations for free.

  • [n] scrypt

    • [i] For data security, we implement industry-standard encryption protocols. Specifically, we use AES-256, the strongest encryption standard, widely employed in contexts such as online banking.

  • [n] Turndown

    • [i] Convert HTML into Markdown with JavaScript.

  • [n] Webpack

    • [i] Webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset.

  • [n] YAML

    • [i] YAML is a human-friendly data serialization language for all programming languages.

Moment.JS

  • [n] Moment.js
    • [i] Parse, validate, manipulate, and display dates and times in JavaScript.

Difference from set date to now;

  • <%+ moment("12-24", "MM-DD").diff(moment(), "days") %> - In days.
  • <%+ moment("12-24", "MM-DD").diff(moment(), "months") %> - In months.

Lists today’s date in corresponding values;

  • <%+ moment().format('[Today is] dddd')%> - Lists full day
  • <%+ moment().format('[Today is] dddd, MMMM Do YYYY, h:mm:ss a')%> - Lists day, month, date, hour, minute, and second in pm/am.
  • <%+ moment().format('[Today is] ddd, hA')%> - Lists short day, hour in pm/am.

Prism

  • [n] Prism
    • [i] Prism is a lightweight, extensible syntax highlighter, built with modern web standards in mind. It’s used in millions of websites, including some of those you visit daily.

Mermaid

  • [n] Mermaid
    • [i] JavaScript based diagramming and charting tool that renders Markdown-inspired text definitions to create and modify diagrams dynamically.

Flowchart

flowchart TD
    A@{ shape: cyl, label: "Database" }

flowchart TD
    A[Start] --> B{Is it?}
    B -->|Yes| C[OK]
    C --> D[Rethink]
    D --> B
    B ---->|No| E[End]

Sequence Diagram

sequenceDiagram
    Alice->>John: Hello John, how are you?
    John-->>Alice: Great!
    Alice-)John: See you later!

Class Diagram

classDiagram
    note "From Duck till Zebra"
    Animal <|-- Duck
    note for Duck "can fly\ncan swim\ncan dive\ncan help in debugging"
    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
    [*] --> Still
    Still --> [*]

    Still --> Moving
    Moving --> Still
    Moving --> Crash
    Crash --> [*]

Entity Relationship Diagram

erDiagram
    CUSTOMER ||--o{ ORDER : places
    CUSTOMER {
        string name
        string custNumber
        string sector
    }
    ORDER ||--|{ LINE-ITEM : contains
    ORDER {
        int orderNumber
        string deliveryAddress
    }
    LINE-ITEM {
        string productCode
        int quantity
        float pricePerUnit
    }

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

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                      :until isadded
    Functionality added                 :milestone, isadded, 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

Pie Chart

pie title Pets adopted by volunteers
"Dogs":386
"Cats":85
"Rats":15

Quadrant Chart

quadrantChart
    title Reach and engagement of campaigns
    x-axis Low Reach --> High Reach
    y-axis Low Engagement --> High Engagement
    quadrant-1 We should expand
    quadrant-2 Need to promote
    quadrant-3 Re-evaluate
    quadrant-4 May be improved
    Campaign A: [0.3, 0.6]
    Campaign B: [0.45, 0.23]
    Campaign C: [0.57, 0.69]
    Campaign D: [0.78, 0.34]
    Campaign E: [0.40, 0.34]
    Campaign F: [0.35, 0.78]

Requirement Diagram

    requirementDiagram

    requirement test_req {
    id: 1
    text: the test text.
    risk: high
    verifymethod: test
    }

    element test_entity {
    type: simulation
    }

    test_entity - satisfies -> test_req

Gitgraph / Git Diagram

gitGraph
   commit
   commit
   branch develop
   checkout develop
   commit
   commit
   checkout main
   merge develop
   commit
   commit

gitGraph:
    commit "Ashish"
    branch newbranch
    checkout newbranch
    commit id:"1111"
    commit tag:"test"
    checkout main
    commit type: HIGHLIGHT
    commit
    merge newbranch
    commit
    branch b2
    commit

C4 Diagram

am

    C4Context
      title System Context diagram for Internet Banking System
      Enterprise_Boundary(b0, "BankBoundary0") {
        Person(customerA, "Banking Customer A", "A customer of the bank, with personal bank accounts.")
        Person(customerB, "Banking Customer B")
        Person_Ext(customerC, "Banking Customer C", "desc")

        Person(customerD, "Banking Customer D", "A customer of the bank, <br/> with personal bank accounts.")

        System(SystemAA, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.")

        Enterprise_Boundary(b1, "BankBoundary") {

          SystemDb_Ext(SystemE, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")

          System_Boundary(b2, "BankBoundary2") {
            System(SystemA, "Banking System A")
            System(SystemB, "Banking System B", "A system of the bank, with personal bank accounts. next line.")
          }

          System_Ext(SystemC, "E-mail system", "The internal Microsoft Exchange e-mail system.")
          SystemDb(SystemD, "Banking System D Database", "A system of the bank, with personal bank accounts.")

          Boundary(b3, "BankBoundary3", "boundary") {
            SystemQueue(SystemF, "Banking System F Queue", "A system of the bank.")
            SystemQueue_Ext(SystemG, "Banking System G Queue", "A system of the bank, with personal bank accounts.")
          }
        }
      }

      BiRel(customerA, SystemAA, "Uses")
      BiRel(SystemAA, SystemE, "Uses")
      Rel(SystemAA, SystemC, "Sends e-mails", "SMTP")
      Rel(SystemC, customerA, "Sends e-mails to")

      UpdateElementStyle(customerA, $fontColor="red", $bgColor="grey", $borderColor="red")
      UpdateRelStyle(customerA, SystemAA, $textColor="blue", $lineColor="blue", $offsetX="5")
      UpdateRelStyle(SystemAA, SystemE, $textColor="blue", $lineColor="blue", $offsetY="-10")
      UpdateRelStyle(SystemAA, SystemC, $textColor="blue", $lineColor="blue", $offsetY="-40", $offsetX="-50")
      UpdateRelStyle(SystemC, customerA, $textColor="red", $lineColor="red", $offsetX="-50", $offsetY="20")

      UpdateLayoutConfig($c4ShapeInRow="3", $c4BoundaryInRow="1")

Mindmaps

mindmap
  root((mindmap))
    Origins
      Long history
      ::icon(fa fa-book)
      Popularisation
        British popular psychology author Tony Buzan
    Research
      On effectiveness<br/>and features
      On Automatic creation
        Uses
            Creative techniques
            Strategic planning
            Argument mapping
    Tools
      Pen and paper
      Mermaid

Timeline

timeline
    title History of Social Media Platform
    2002 : LinkedIn
    2004 : Facebook
         : Google
    2005 : Youtube
    2006 : Twitter

ZenUML

  • [!] Syntax errors saying it’s not supported.

Sankey

sankey-beta

Bio-conversion,Losses,26.862

Bio-conversion,Solid,280.322

Bio-conversion,Gas,81.144

XY Chart

xychart-beta
    title "Sales Revenue"
    x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
    y-axis "Revenue (in $)" 4000 --> 11000
    bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
    line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]

Block Diagram

block-beta
columns 1
  db(("DB"))
  blockArrowId6<["&nbsp;&nbsp;&nbsp;"]>(down)
  block:ID
    A
    B["A wide one in the middle"]
    C
  end
  space
  D
  ID --> D
  C --> D
  style B fill:#969,stroke:#333,stroke-width:4px

Packet

packet-beta
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"
107: "ACK"
108: "PSH"
109: "RST"
110: "SYN"
111: "FIN"
112-127: "Window"
128-143: "Checksum"
144-159: "Urgent Pointer"
160-191: "(Options and Padding)"
192-255: "Data (variable length)"

Kanban

kanban
  Todo
    [Create Documentation]
    docs[Create Blog about the new diagram]
  [In progress]
    id6[Create renderer so that it works in all cases. We also add som extra text here for testing purposes. And some more just for the extra flare.]
  id9[Ready for deploy]
    id8[Design grammar]@{ assigned: 'knsv' }
  id10[Ready for test]
    id4[Create parsing tests]@{ ticket: MC-2038, assigned: 'K.Sveidqvist', priority: 'High' }
    id66[last item]@{ priority: 'Very Low', assigned: 'knsv' }
  id11[Done]
    id5[define getData]
    id2[Title of diagram is more than 100 chars when user duplicates diagram with 100 char]@{ ticket: MC-2036, priority: 'Very High'}
    id3[Update DB function]@{ ticket: MC-2037, assigned: knsv, priority: 'High' }

  id12[Can't reproduce]
    id3[Weird flickering in Firefox]

Architecture

architecture-beta
    group api(cloud)[API]

    service db(database)[Database] in api
    service disk1(disk)[Storage] in api
    service disk2(disk)[Storage] in api
    service server(server)[Server] in api

    db:L -- R:server
    disk1:T -- B:server
    disk2:T -- B:db

Other Examples

CSS - Cascading Style Sheets

Templater

Alt + E - Insert template Modal

Introduction - Templater (silentvoid13.github.io) CTRL + R to refresh and trigger the commands if typed.

Returns today’s date - <% tp.date.now(“YYYY-MM-DD”) %> Returns today’s date in a more legible user friendly format - 21st July 2024 - <% tp.date.now(“Do MMMM YYYY”) %>

Returns the date of a year from today - <% tp.date.now(“YYYY-MM-DD”,“P+1Y”) %>

Returns a link to specified date - <% tp.date.now(“YYYY-MM-DD”) %> Returns a named link to a specified date - Yesterday

Returns creation date of the current file - <% tp.file.creation_date() %> Returns the date this file was modified last - <% tp.file.last_modified_date() %> Returns the folder this file is in - <% tp.file.folder() %>

Returns a daily quote from the web - <% tp.web.daily_quote() %>

Returns a specified weekday - <% tp.date.weekday(“YYYY-MM-DD”,1) %>

Dataview

SQL_Seal

Notifian

Task Board

Inline Admonitions

Obsidian Sites

Quartz4

Testing Area

Created: = this.file.ctime
Last Edited: = this.file.mtime
Description of the page: = this.description
Displaying a multi value field: = this.multivalue

Today is = date(today), and it’s = dateformat(date(now), "HH:MM").

This file title is “= this.file.name”

Last edited: = this.file.mtime

Graph View

Backlinks