Feature Checklist

General UI
Settings Menu UI
Mermaid
Bases
Tables
Clean up Code Blocks
Primary-Theme-like buttons
Custom Checkboxes
Rainbow 100% progress
Expanded Syntax Highlighting support
0 Placeholders left
Sanctum-Theme-like % on progress bars
Shiba-Inu-Theme-like file icons & tabs
Bullet list style apply to reading view mode
Sanctum-Theme-like navigation icons
Light/Dark specific canvas grid
If publishing; NEED to clean up code. Put dark/light code together.
FIX TEXT FORMATTING COLOURS / CODE
[ ]

Links

🔗 Realtime Colors - Colours

🔗 HSL Color Picker - Colours

🔗 Colour Designer - Colours

🔗 Wordmark - Fonts

🔗 EmojiCopy - Emojis

🔗 Lucide - Icons

🔗 https://www.flaticon.com/icon-fonts-most-downloaded - Icons

🔗 CSS Font Size - CSS Styling

🔗 Obsidian Formatting Syntax - Docs

🔗 ITS Theme Docs - Docs

🔗 Obsidian Hub Docs - Docs

🔗 Integral Guide - Docs

🔗 Obsidian Publish Sites - Inspiration

🔗CSS Snippets - CSS Styling

Colours

background-primary

background-primary-alt

background-secondary

background-secondary-alt

background-modifier-border

background-modifier-form-field

background-modifier-form-field-highlighted

background-modifier-box-shadow

background-modifier-success

background-modifier-error

background-modifier-error-hover

background-modifier-cover

text-accent

text-accent-hover

text-normal

text-muted

text-faint

text-error

text-error-hover

text-highlight-bg

text-highlight-bg-active

text-selection

text-on-accent

interactive-normal

interactive-hover

interactive-accent

interactive-accent-hover

interactive-success

interactive-active-thumb-bg

scrollbar-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

$B o d y$ - math

Body - highlight

Bold & Highlight

Bold and Italics

Italics & Highlight

Bold, Italics & Highlight

~~Strikethrough & Highlight~~

blog

5 + 5 = M a t h B l oc k

Text Formatting Example

Lorem Ipsum

Lorem ipsum dolor sit amet. Qui mollitia consequatur in excepturi similique Cum nihil aut repellendus veniam est voluptatem molestiae ut facere accusantium. Non voluptatem velit Aut omnis et labore beatae est nihil quos est numquam veniam ut repellendus voluptate?

Callout

Aut voluptates labore Et repellendus ut quia galisum est distinctio nemo. Non eligendi iste Vel ipsa hic exercitationem aspernatur non perferendis dolor qui obcaecati consequatur? Est sequi provident aut maxime aperiam Ea corrupti et impedit assumenda et dolores odit aut accusamus quasi Sit laudantium voluptates aut veritatis quibusdamaut quasi in harum quidem.

Sed illo dolor qui dolor impedit eos unde sequi. booleanalgebra
Aut dolor maiores ea Quis unde! obsidian
Aut explicabo dolore ad magnam reiciendis. design

Ut harum aspernatur Ut earum sed repellat nobis aut iusto sint cum perspiciatis autem quo dignissimos eligendi. Sed molestias facilis Ut nihil et perspiciatis excepturi est eveniet officiaest expedita eveniet. Ut dolore iusto Et sunt eum laborum fugiat vel impedit debitis! Sit quia autemId velit eos unde iste et voluptas quae ea tempora dolorem non laudantium veritatis. ~~Est recusandae incidunt.~~ ~~Sed aliquam voluptatem.~~

Code

Sed officia natus eum quis reprehenderit et ducimus veritatis et possimus voluptates. code

project = JIRA
AND assignee in (currentUser(), membersOF("administrators"))
AND status changed from Open to "In progress"
AND labels not in (ux)
AND reporter is not empty
AND 'Number of cohorts[Number]' = 1
AND assignee.property["name"] = "Sylvie"
OR created >= 2019-11-15
ORDER BY created DESC, updated ASC
	project in projectMatch("^JIRA$")
	 project = JIRA

`{jql} issuefunction in expression(“uuhm”, “123”)
Et quas laboriosam non perspiciatis consectetur hic vitae magnam.
Et amet molestiae aut dolor natus.
- 2nd line
Eos internos optio aut quos ipsum sed architecto dolor vel molestiae deleniti.
- Another line…

Ut mollitia eveniet aut veritatis omnis sed molestiae laudantium eum dolore unde.

Callouts

Icons from https://lucide.dev/icons/ & https://fontawesome.com/search

Callout Icons

Callout Colours

Spoiler

Folder Item1

Red

Orange

Tan

Yellow

Green

Cyan

Blue

Purple

Pink

White

Grey

Black

Callout Tables CSS

https://forum.obsidian.md/t/tables-using-callouts/100837

Some examples of use cases

Sblank 1

A Lorem ipsum dolor sit amet, consectetur adipiscing elit.

uno

due

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

Info

Example area 1

Important

example area 2

Tip

example area 3

Multi column

Sucess

Example area 1

Question

example area 2

Warning

example area 3

Tabbed

First

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

Second

Lorem, ipsum dolor sit amet consectetur, adipisicing elit. (Second) External Link > > $L A T E X$

Third

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

bullet item

checkbox

tag

Core Work list-card
- Main Goal 1
- Main Goal 1
- Main Goal 1
  - Collaboration with Jane
- Main Goal 1
Learning & System
Personal
- Personal Goal 1
- Personal Goal 2

Math Block

Supported TeX/LaTeX commands — MathJax 3.2 documentation

Code Block

5 + 5 = M a t h B l oc k

Lists

Bulleted List
- 2
  - 3
    - 4
      - 5
        
        6
        
        7
        
        8

Numbered List
Content in the 2nd listed item.
Three is the best after all…

Checkboxes

Bases

https://www.youtube.com/watch?v=Pus5BcmQVoc&t=463s

Tables

Column 1	Column 2	Column 3	Column 4
1	2	3	4
2	3	4	5
3	4	5	6

Progress Bar

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 + "%"

3rd Party Support

📌 3rd Party Supported open source libraries.

📌 Capacitor - ℹ️ 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.

Moment.JS

Moment.js
- 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

Prism
- 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

Mermaid
- 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

    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

https://hypersphere.blog/blog/sqlseal-sql-engine-for-obsidian/

Notifian

https://github.com/pericles-tpt/notifian

Task Board

https://github.com/tu2-atmanand/Task-Board

Inline Admonitions

https://github.com/scottTomaszewski/obsidian-inline-admonitions

Obsidian Sites

https://www.ssp.sh/brain/

Quartz4

https://quartz.jzhao.xyz/

Starlight

https://starlight.astro.build/

Sheets Extended

| Just                               | a   | normal       | table |
| ---------------------------------- | --- | ------------ | ----- |
| Use `<` to merge cells to the left | <   | Merged cell! | <     |
| Use `^` to merge cells up          | <   | ^            | ^     |

{
    classes: { 
        class1: { 
            "color": "cyan",
        },
        class2: {
            backgroundColor: "#555",
        }
    },
}
---
| I                 | -   | have | meta                  | data        | too! |
| ----------------- | --- | ---- | --------------------- | ----------- | ---- |
| group 1           | -   | foo  | bar ~ .class1 .class2 | baz         | test |
| group 2 ~ .class1 | -   | 1    | ^                     | 3 ~ .class2 | 4    |

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

{
    classes: { 
        class1: { 
            "color": "orange",
        },
        class2: {
            backgroundColor: "#555",
        }
    },
}
---
| Glacial Howl Legendary Bow ~ { "text-align": "center" } .class1 | <   | <      | <|
| ---------------------------------- | --- | ------------ | ----- |
| 12-24❄️  2.4⏱️  14%🎯  36%⛓️‍💥| <   | < | <    |
| 24-36💔  36%💘  48%🥶| <   | < | <    |
|  | <   |             |      |

project = EXAMPLE
AND issuetype IN (Bug, Story, Task)
AND status NOT IN (Done, Closed)
AND priority >= High
AND assignee IN (currentUser(), "jane.doe")
AND reporter != "automation-bot"
AND (
    summary ~ "login"
    OR description ~ "authentication"
    OR text ~ "SSO"
)
AND created >= startOfMonth(-3)
AND updated <= endOfWeek()
AND resolution IS EMPTY
AND fixVersion NOT IN releasedVersions()
AND affectedVersion IN unreleasedVersions()
AND labels IN (backend, security)
AND labels NOT IN (wontfix)
AND component IN ("API", "Auth Service")
AND environment IS NOT EMPTY
AND (
    due <= startOfDay(+7)
    OR due IS EMPTY
)
AND (
    status CHANGED FROM "In Progress" TO "Blocked" AFTER startOfMonth()
    OR assignee CHANGED BY currentUser()
)
AND timeoriginalestimate > 0
AND timespent <= timeoriginalestimate
AND worklogAuthor IN (currentUser())
AND issueFunction NOT IN linkedIssuesOf(
    "project = EXAMPLE AND issuetype = Epic",
    "is blocked by"
)
ORDER BY
    priority DESC,
    updated DESC,
    created ASC

JQL Support!!

project in projectMatch("^Proj$|^Cashe$") AND status in ("Open", "In Progress")
OR (priority WAS "High" AND resolution CHANGED TO "Done")
ORDER BY created DESC, updated ASC
 
-- Unquoted issue keys for testing
key in (CG-549, CG-499, CG-488, CG-483, CG-537, CG-3, CG-567, CG-714, CG-715, CG-522)
 
assignee = currentUser()
reporter != "admin"
fixVersion = latestReleasedVersion()
affectedVersion IN releasedVersions()
created >= startOfDay("-1w")
duedate < now()
labels is not empty
component IS NULL
 
request-type = "Help Desk"
approvals = approved()
"Time to Resolution" < remaining("2h")
SLA = breached()
organization in organizationDetail("Region", "APAC")
 
development[pullrequests].open > 0
development[builds].failing > 2
flagEnabled = "true"
flagEnabledRollout ~ "partial"
deploymentEnvironmentType = "production"
deploymentState = "successful"
 
issueKey IN workItemHistory()
comment ~ "crash"
project IN componentsLeadByUser()
voter = currentUser()
watcher = membersOf("developers")
 
"Epic Link" = PROJ-123
key = PROJ-456
summary ~ 'search term'
"Journey Parent" IS NOT EMPTY
hierarchy-level = 0
 
-- Complex messy query for testing
( issuekey IN portfolioChildIssuesOf("GOAL-54") OR issuekey IN portfolioChildIssuesOf("GOAL-55") OR issuekey IN portfolioChildIssuesOf("GOAL-56") OR issuekey IN portfolioChildIssuesOf("GOAL-57") OR issuekey IN portfolioChildIssuesOf("GOAL-58") OR issuekey IN portfolioChildIssuesOf("GOAL-59") OR issuekey IN portfolioChildIssuesOf("GOAL-60") OR issuekey IN portfolioChildIssuesOf("GOAL-61") OR issuekey IN portfolioChildIssuesOf("GOAL-62") OR issuekey IN portfolioChildIssuesOf("GOAL-63") OR issuekey IN portfolioChildIssuesOf("GOAL-129") OR issuekey IN ("GOAL-54","GOAL-55","GOAL-56","GOAL-57","GOAL-58","GOAL-59","GOAL-60","GOAL-61","GOAL-62","GOAL-63","GOAL-129") ) AND issuetype IN ("Strategy","Company Goal","Team Goal")

JQL Support!!

project = JDEV
AND assignee in (currentUser(), membersOF("administrators"))
AND status changed from Open to "In progress"
AND labels not in (ux)
AND reporter is not empty
AND 'Number of cohorts[Number]' = 1
AND assignee.property["name"] = "Sylvie"
OR created >= 2019-11-15
AND key = JRA-10234
ORDER BY created DESC, updated ASC

p-INK#File Icons

p-INK

Formatting & Design#Tables

Links

🔗 Realtime Colors - Colours

🔗 HSL Color Picker - Colours

🔗 Colour Designer - Colours

🔗 Wordmark - Fonts

🔗 EmojiCopy - Emojis

🔗 Lucide - Icons

🔗 https://www.flaticon.com/icon-fonts-most-downloaded - Icons

🔗 CSS Font Size - CSS Styling

🔗 Obsidian Formatting Syntax - Docs

🔗 ITS Theme Docs - Docs

🔗 Obsidian Hub Docs - Docs

🔗 Integral Guide - Docs

🔗 Obsidian Publish Sites - Inspiration

🔗CSS Snippets - CSS Styling

Colours

background-primary

background-primary-alt

background-secondary

background-secondary-alt

background-modifier-border

background-modifier-form-field

background-modifier-form-field-highlighted

background-modifier-box-shadow

background-modifier-success

background-modifier-error

background-modifier-error-hover

background-modifier-cover

text-accent

text-accent-hover

text-normal

text-muted

text-faint

text-error

text-error-hover

text-highlight-bg

text-highlight-bg-active

text-selection

text-on-accent

interactive-normal

interactive-hover

interactive-accent

interactive-accent-hover

interactive-success

interactive-active-thumb-bg

scrollbar-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

$B o d y$ - math

Body - highlight

Bold & Highlight

Bold and Italics

Italics & Highlight

Bold, Italics & Highlight

~~Strikethrough & Highlight~~

blog

5 + 5 = M a t h B l oc k

Text Formatting Example

Lorem Ipsum

Lorem ipsum dolor sit amet. Qui mollitia consequatur in excepturi similique Cum nihil aut repellendus veniam est voluptatem molestiae ut facere accusantium. Non voluptatem velit Aut omnis et labore beatae est nihil quos est numquam veniam ut repellendus voluptate?

Callout

Aut voluptates labore Et repellendus ut quia galisum est distinctio nemo. Non eligendi iste Vel ipsa hic exercitationem aspernatur non perferendis dolor qui obcaecati consequatur? Est sequi provident aut maxime aperiam Ea corrupti et impedit assumenda et dolores odit aut accusamus quasi Sit laudantium voluptates aut veritatis quibusdamaut quasi in harum quidem.

Sed illo dolor qui dolor impedit eos unde sequi. booleanalgebra
Aut dolor maiores ea Quis unde! obsidian
Aut explicabo dolore ad magnam reiciendis. design

Ut harum aspernatur Ut earum sed repellat nobis aut iusto sint cum perspiciatis autem quo dignissimos eligendi. Sed molestias facilis Ut nihil et perspiciatis excepturi est eveniet officiaest expedita eveniet. Ut dolore iusto Et sunt eum laborum fugiat vel impedit debitis! Sit quia autemId velit eos unde iste et voluptas quae ea tempora dolorem non laudantium veritatis. ~~Est recusandae incidunt.~~ ~~Sed aliquam voluptatem.~~

Code

Sed officia natus eum quis reprehenderit et ducimus veritatis et possimus voluptates. code

project = JIRA
AND assignee in (currentUser(), membersOF("administrators"))
AND status changed from Open to "In progress"
AND labels not in (ux)
AND reporter is not empty
AND 'Number of cohorts[Number]' = 1
AND assignee.property["name"] = "Sylvie"
OR created >= 2019-11-15
ORDER BY created DESC, updated ASC
	project in projectMatch("^JIRA$")
	 project = JIRA

`{jql} issuefunction in expression(“uuhm”, “123”)
Et quas laboriosam non perspiciatis consectetur hic vitae magnam.
Et amet molestiae aut dolor natus.
- 2nd line
Eos internos optio aut quos ipsum sed architecto dolor vel molestiae deleniti.
- Another line…

Ut mollitia eveniet aut veritatis omnis sed molestiae laudantium eum dolore unde.

Callouts

Icons from https://lucide.dev/icons/ & https://fontawesome.com/search

Callout Icons

Callout Colours

Spoiler

Folder Item1

Red

Orange

Tan

Yellow

Green

Cyan

Blue

Purple

Pink

White

Grey

Black

Callout Tables CSS

https://forum.obsidian.md/t/tables-using-callouts/100837

Some examples of use cases

Sblank 1

A Lorem ipsum dolor sit amet, consectetur adipiscing elit.

uno

due

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

Info

Example area 1

Important

example area 2

Tip

example area 3

Multi column

Sucess

Example area 1

Question

example area 2

Warning

example area 3

Tabbed

First

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

Second

Lorem, ipsum dolor sit amet consectetur, adipisicing elit. (Second) External Link > > $L A T E X$

Third

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

bullet item

checkbox

tag

Core Work list-card
- Main Goal 1
- Main Goal 1
- Main Goal 1
  - Collaboration with Jane
- Main Goal 1
Learning & System
Personal
- Personal Goal 1
- Personal Goal 2

Math Block

Supported TeX/LaTeX commands — MathJax 3.2 documentation

Code Block

5 + 5 = M a t h B l oc k

Lists

Bulleted List
- 2
  - 3
    - 4
      - 5
        
        6
        
        7
        
        8

Numbered List
Content in the 2nd listed item.
Three is the best after all…

Checkboxes

Bases

https://www.youtube.com/watch?v=Pus5BcmQVoc&t=463s

Tables

Column 1	Column 2	Column 3	Column 4
1	2	3	4
2	3	4	5
3	4	5	6

Progress Bar

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 + "%"

3rd Party Support

📌 3rd Party Supported open source libraries.

📌 Capacitor - ℹ️ 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.

Moment.JS

Moment.js
- 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

Prism
- 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

Mermaid
- 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

    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

https://hypersphere.blog/blog/sqlseal-sql-engine-for-obsidian/

Notifian

https://github.com/pericles-tpt/notifian

Task Board

https://github.com/tu2-atmanand/Task-Board

Inline Admonitions

https://github.com/scottTomaszewski/obsidian-inline-admonitions

Obsidian Sites

https://www.ssp.sh/brain/

Quartz4

https://quartz.jzhao.xyz/

Starlight

https://starlight.astro.build/

Sheets Extended

| Just                               | a   | normal       | table |
| ---------------------------------- | --- | ------------ | ----- |
| Use `<` to merge cells to the left | <   | Merged cell! | <     |
| Use `^` to merge cells up          | <   | ^            | ^     |

{
    classes: { 
        class1: { 
            "color": "cyan",
        },
        class2: {
            backgroundColor: "#555",
        }
    },
}
---
| I                 | -   | have | meta                  | data        | too! |
| ----------------- | --- | ---- | --------------------- | ----------- | ---- |
| group 1           | -   | foo  | bar ~ .class1 .class2 | baz         | test |
| group 2 ~ .class1 | -   | 1    | ^                     | 3 ~ .class2 | 4    |

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

{
    classes: { 
        class1: { 
            "color": "orange",
        },
        class2: {
            backgroundColor: "#555",
        }
    },
}
---
| Glacial Howl Legendary Bow ~ { "text-align": "center" } .class1 | <   | <      | <|
| ---------------------------------- | --- | ------------ | ----- |
| 12-24❄️  2.4⏱️  14%🎯  36%⛓️‍💥| <   | < | <    |
| 24-36💔  36%💘  48%🥶| <   | < | <    |
|  | <   |             |      |

project = EXAMPLE
AND issuetype IN (Bug, Story, Task)
AND status NOT IN (Done, Closed)
AND priority >= High
AND assignee IN (currentUser(), "jane.doe")
AND reporter != "automation-bot"
AND (
    summary ~ "login"
    OR description ~ "authentication"
    OR text ~ "SSO"
)
AND created >= startOfMonth(-3)
AND updated <= endOfWeek()
AND resolution IS EMPTY
AND fixVersion NOT IN releasedVersions()
AND affectedVersion IN unreleasedVersions()
AND labels IN (backend, security)
AND labels NOT IN (wontfix)
AND component IN ("API", "Auth Service")
AND environment IS NOT EMPTY
AND (
    due <= startOfDay(+7)
    OR due IS EMPTY
)
AND (
    status CHANGED FROM "In Progress" TO "Blocked" AFTER startOfMonth()
    OR assignee CHANGED BY currentUser()
)
AND timeoriginalestimate > 0
AND timespent <= timeoriginalestimate
AND worklogAuthor IN (currentUser())
AND issueFunction NOT IN linkedIssuesOf(
    "project = EXAMPLE AND issuetype = Epic",
    "is blocked by"
)
ORDER BY
    priority DESC,
    updated DESC,
    created ASC

JQL Support!!

project in projectMatch("^Proj$|^Cashe$") AND status in ("Open", "In Progress")
OR (priority WAS "High" AND resolution CHANGED TO "Done")
ORDER BY created DESC, updated ASC
 
-- Unquoted issue keys for testing
key in (CG-549, CG-499, CG-488, CG-483, CG-537, CG-3, CG-567, CG-714, CG-715, CG-522)
 
assignee = currentUser()
reporter != "admin"
fixVersion = latestReleasedVersion()
affectedVersion IN releasedVersions()
created >= startOfDay("-1w")
duedate < now()
labels is not empty
component IS NULL
 
request-type = "Help Desk"
approvals = approved()
"Time to Resolution" < remaining("2h")
SLA = breached()
organization in organizationDetail("Region", "APAC")
 
development[pullrequests].open > 0
development[builds].failing > 2
flagEnabled = "true"
flagEnabledRollout ~ "partial"
deploymentEnvironmentType = "production"
deploymentState = "successful"
 
issueKey IN workItemHistory()
comment ~ "crash"
project IN componentsLeadByUser()
voter = currentUser()
watcher = membersOf("developers")
 
"Epic Link" = PROJ-123
key = PROJ-456
summary ~ 'search term'
"Journey Parent" IS NOT EMPTY
hierarchy-level = 0
 
-- Complex messy query for testing
( issuekey IN portfolioChildIssuesOf("GOAL-54") OR issuekey IN portfolioChildIssuesOf("GOAL-55") OR issuekey IN portfolioChildIssuesOf("GOAL-56") OR issuekey IN portfolioChildIssuesOf("GOAL-57") OR issuekey IN portfolioChildIssuesOf("GOAL-58") OR issuekey IN portfolioChildIssuesOf("GOAL-59") OR issuekey IN portfolioChildIssuesOf("GOAL-60") OR issuekey IN portfolioChildIssuesOf("GOAL-61") OR issuekey IN portfolioChildIssuesOf("GOAL-62") OR issuekey IN portfolioChildIssuesOf("GOAL-63") OR issuekey IN portfolioChildIssuesOf("GOAL-129") OR issuekey IN ("GOAL-54","GOAL-55","GOAL-56","GOAL-57","GOAL-58","GOAL-59","GOAL-60","GOAL-61","GOAL-62","GOAL-63","GOAL-129") ) AND issuetype IN ("Strategy","Company Goal","Team Goal")

JQL Support!!

project = JDEV
AND assignee in (currentUser(), membersOF("administrators"))
AND status changed from Open to "In progress"
AND labels not in (ux)
AND reporter is not empty
AND 'Number of cohorts[Number]' = 1
AND assignee.property["name"] = "Sylvie"
OR created >= 2019-11-15
AND key = JRA-10234
ORDER BY created DESC, updated ASC

Formatting & Design#Checkboxes

Links

🔗 Realtime Colors - Colours

🔗 HSL Color Picker - Colours

🔗 Colour Designer - Colours

🔗 Wordmark - Fonts

🔗 EmojiCopy - Emojis

🔗 Lucide - Icons

🔗 https://www.flaticon.com/icon-fonts-most-downloaded - Icons

🔗 CSS Font Size - CSS Styling

🔗 Obsidian Formatting Syntax - Docs

🔗 ITS Theme Docs - Docs

🔗 Obsidian Hub Docs - Docs

🔗 Integral Guide - Docs

🔗 Obsidian Publish Sites - Inspiration

🔗CSS Snippets - CSS Styling

Colours

background-primary

background-primary-alt

background-secondary

background-secondary-alt

background-modifier-border

background-modifier-form-field

background-modifier-form-field-highlighted

background-modifier-box-shadow

background-modifier-success

background-modifier-error

background-modifier-error-hover

background-modifier-cover

text-accent

text-accent-hover

text-normal

text-muted

text-faint

text-error

text-error-hover

text-highlight-bg

text-highlight-bg-active

text-selection

text-on-accent

interactive-normal

interactive-hover

interactive-accent

interactive-accent-hover

interactive-success

interactive-active-thumb-bg

scrollbar-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

$B o d y$ - math

Body - highlight

Bold & Highlight

Bold and Italics

Italics & Highlight

Bold, Italics & Highlight

~~Strikethrough & Highlight~~

blog

5 + 5 = M a t h B l oc k

Text Formatting Example

Lorem Ipsum

Lorem ipsum dolor sit amet. Qui mollitia consequatur in excepturi similique Cum nihil aut repellendus veniam est voluptatem molestiae ut facere accusantium. Non voluptatem velit Aut omnis et labore beatae est nihil quos est numquam veniam ut repellendus voluptate?

Callout

Aut voluptates labore Et repellendus ut quia galisum est distinctio nemo. Non eligendi iste Vel ipsa hic exercitationem aspernatur non perferendis dolor qui obcaecati consequatur? Est sequi provident aut maxime aperiam Ea corrupti et impedit assumenda et dolores odit aut accusamus quasi Sit laudantium voluptates aut veritatis quibusdamaut quasi in harum quidem.

Sed illo dolor qui dolor impedit eos unde sequi. booleanalgebra
Aut dolor maiores ea Quis unde! obsidian
Aut explicabo dolore ad magnam reiciendis. design

Ut harum aspernatur Ut earum sed repellat nobis aut iusto sint cum perspiciatis autem quo dignissimos eligendi. Sed molestias facilis Ut nihil et perspiciatis excepturi est eveniet officiaest expedita eveniet. Ut dolore iusto Et sunt eum laborum fugiat vel impedit debitis! Sit quia autemId velit eos unde iste et voluptas quae ea tempora dolorem non laudantium veritatis. ~~Est recusandae incidunt.~~ ~~Sed aliquam voluptatem.~~

Code

Sed officia natus eum quis reprehenderit et ducimus veritatis et possimus voluptates. code

project = JIRA
AND assignee in (currentUser(), membersOF("administrators"))
AND status changed from Open to "In progress"
AND labels not in (ux)
AND reporter is not empty
AND 'Number of cohorts[Number]' = 1
AND assignee.property["name"] = "Sylvie"
OR created >= 2019-11-15
ORDER BY created DESC, updated ASC
	project in projectMatch("^JIRA$")
	 project = JIRA

`{jql} issuefunction in expression(“uuhm”, “123”)
Et quas laboriosam non perspiciatis consectetur hic vitae magnam.
Et amet molestiae aut dolor natus.
- 2nd line
Eos internos optio aut quos ipsum sed architecto dolor vel molestiae deleniti.
- Another line…

Ut mollitia eveniet aut veritatis omnis sed molestiae laudantium eum dolore unde.

Callouts

Icons from https://lucide.dev/icons/ & https://fontawesome.com/search

Callout Icons

Callout Colours

Spoiler

Folder Item1

Red

Orange

Tan

Yellow

Green

Cyan

Blue

Purple

Pink

White

Grey

Black

Callout Tables CSS

https://forum.obsidian.md/t/tables-using-callouts/100837

Some examples of use cases

Sblank 1

A Lorem ipsum dolor sit amet, consectetur adipiscing elit.

uno

due

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

Info

Example area 1

Important

example area 2

Tip

example area 3

Multi column

Sucess

Example area 1

Question

example area 2

Warning

example area 3

Tabbed

First

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

Second

Lorem, ipsum dolor sit amet consectetur, adipisicing elit. (Second) External Link > > $L A T E X$

Third

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

bullet item

checkbox

tag

Core Work list-card
- Main Goal 1
- Main Goal 1
- Main Goal 1
  - Collaboration with Jane
- Main Goal 1
Learning & System
Personal
- Personal Goal 1
- Personal Goal 2

Math Block

Supported TeX/LaTeX commands — MathJax 3.2 documentation

Code Block

5 + 5 = M a t h B l oc k

Lists

Bulleted List
- 2
  - 3
    - 4
      - 5
        
        6
        
        7
        
        8

Numbered List
Content in the 2nd listed item.
Three is the best after all…

Checkboxes

Bases

https://www.youtube.com/watch?v=Pus5BcmQVoc&t=463s

Tables

Column 1	Column 2	Column 3	Column 4
1	2	3	4
2	3	4	5
3	4	5	6

Progress Bar

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 + "%"

3rd Party Support

📌 3rd Party Supported open source libraries.

📌 Capacitor - ℹ️ 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.

Moment.JS

Moment.js
- 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

Prism
- 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

Mermaid
- 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

    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

https://hypersphere.blog/blog/sqlseal-sql-engine-for-obsidian/

Notifian

https://github.com/pericles-tpt/notifian

Task Board

https://github.com/tu2-atmanand/Task-Board

Inline Admonitions

https://github.com/scottTomaszewski/obsidian-inline-admonitions

Obsidian Sites

https://www.ssp.sh/brain/

Quartz4

https://quartz.jzhao.xyz/

Starlight

https://starlight.astro.build/

Sheets Extended

| Just                               | a   | normal       | table |
| ---------------------------------- | --- | ------------ | ----- |
| Use `<` to merge cells to the left | <   | Merged cell! | <     |
| Use `^` to merge cells up          | <   | ^            | ^     |

{
    classes: { 
        class1: { 
            "color": "cyan",
        },
        class2: {
            backgroundColor: "#555",
        }
    },
}
---
| I                 | -   | have | meta                  | data        | too! |
| ----------------- | --- | ---- | --------------------- | ----------- | ---- |
| group 1           | -   | foo  | bar ~ .class1 .class2 | baz         | test |
| group 2 ~ .class1 | -   | 1    | ^                     | 3 ~ .class2 | 4    |

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

{
    classes: { 
        class1: { 
            "color": "orange",
        },
        class2: {
            backgroundColor: "#555",
        }
    },
}
---
| Glacial Howl Legendary Bow ~ { "text-align": "center" } .class1 | <   | <      | <|
| ---------------------------------- | --- | ------------ | ----- |
| 12-24❄️  2.4⏱️  14%🎯  36%⛓️‍💥| <   | < | <    |
| 24-36💔  36%💘  48%🥶| <   | < | <    |
|  | <   |             |      |

project = EXAMPLE
AND issuetype IN (Bug, Story, Task)
AND status NOT IN (Done, Closed)
AND priority >= High
AND assignee IN (currentUser(), "jane.doe")
AND reporter != "automation-bot"
AND (
    summary ~ "login"
    OR description ~ "authentication"
    OR text ~ "SSO"
)
AND created >= startOfMonth(-3)
AND updated <= endOfWeek()
AND resolution IS EMPTY
AND fixVersion NOT IN releasedVersions()
AND affectedVersion IN unreleasedVersions()
AND labels IN (backend, security)
AND labels NOT IN (wontfix)
AND component IN ("API", "Auth Service")
AND environment IS NOT EMPTY
AND (
    due <= startOfDay(+7)
    OR due IS EMPTY
)
AND (
    status CHANGED FROM "In Progress" TO "Blocked" AFTER startOfMonth()
    OR assignee CHANGED BY currentUser()
)
AND timeoriginalestimate > 0
AND timespent <= timeoriginalestimate
AND worklogAuthor IN (currentUser())
AND issueFunction NOT IN linkedIssuesOf(
    "project = EXAMPLE AND issuetype = Epic",
    "is blocked by"
)
ORDER BY
    priority DESC,
    updated DESC,
    created ASC

JQL Support!!

project in projectMatch("^Proj$|^Cashe$") AND status in ("Open", "In Progress")
OR (priority WAS "High" AND resolution CHANGED TO "Done")
ORDER BY created DESC, updated ASC
 
-- Unquoted issue keys for testing
key in (CG-549, CG-499, CG-488, CG-483, CG-537, CG-3, CG-567, CG-714, CG-715, CG-522)
 
assignee = currentUser()
reporter != "admin"
fixVersion = latestReleasedVersion()
affectedVersion IN releasedVersions()
created >= startOfDay("-1w")
duedate < now()
labels is not empty
component IS NULL
 
request-type = "Help Desk"
approvals = approved()
"Time to Resolution" < remaining("2h")
SLA = breached()
organization in organizationDetail("Region", "APAC")
 
development[pullrequests].open > 0
development[builds].failing > 2
flagEnabled = "true"
flagEnabledRollout ~ "partial"
deploymentEnvironmentType = "production"
deploymentState = "successful"
 
issueKey IN workItemHistory()
comment ~ "crash"
project IN componentsLeadByUser()
voter = currentUser()
watcher = membersOf("developers")
 
"Epic Link" = PROJ-123
key = PROJ-456
summary ~ 'search term'
"Journey Parent" IS NOT EMPTY
hierarchy-level = 0
 
-- Complex messy query for testing
( issuekey IN portfolioChildIssuesOf("GOAL-54") OR issuekey IN portfolioChildIssuesOf("GOAL-55") OR issuekey IN portfolioChildIssuesOf("GOAL-56") OR issuekey IN portfolioChildIssuesOf("GOAL-57") OR issuekey IN portfolioChildIssuesOf("GOAL-58") OR issuekey IN portfolioChildIssuesOf("GOAL-59") OR issuekey IN portfolioChildIssuesOf("GOAL-60") OR issuekey IN portfolioChildIssuesOf("GOAL-61") OR issuekey IN portfolioChildIssuesOf("GOAL-62") OR issuekey IN portfolioChildIssuesOf("GOAL-63") OR issuekey IN portfolioChildIssuesOf("GOAL-129") OR issuekey IN ("GOAL-54","GOAL-55","GOAL-56","GOAL-57","GOAL-58","GOAL-59","GOAL-60","GOAL-61","GOAL-62","GOAL-63","GOAL-129") ) AND issuetype IN ("Strategy","Company Goal","Team Goal")

JQL Support!!

project = JDEV
AND assignee in (currentUser(), membersOF("administrators"))
AND status changed from Open to "In progress"
AND labels not in (ux)
AND reporter is not empty
AND 'Number of cohorts[Number]' = 1
AND assignee.property["name"] = "Sylvie"
OR created >= 2019-11-15
AND key = JRA-10234
ORDER BY created DESC, updated ASC

Formatting & Design#Header 1

Links

🔗 Realtime Colors - Colours

🔗 HSL Color Picker - Colours

🔗 Colour Designer - Colours

🔗 Wordmark - Fonts

🔗 EmojiCopy - Emojis

🔗 Lucide - Icons

🔗 https://www.flaticon.com/icon-fonts-most-downloaded - Icons

🔗 CSS Font Size - CSS Styling

🔗 Obsidian Formatting Syntax - Docs

🔗 ITS Theme Docs - Docs

🔗 Obsidian Hub Docs - Docs

🔗 Integral Guide - Docs

🔗 Obsidian Publish Sites - Inspiration

🔗CSS Snippets - CSS Styling

Colours

background-primary

background-primary-alt

background-secondary

background-secondary-alt

background-modifier-border

background-modifier-form-field

background-modifier-form-field-highlighted

background-modifier-box-shadow

background-modifier-success

background-modifier-error

background-modifier-error-hover

background-modifier-cover

text-accent

text-accent-hover

text-normal

text-muted

text-faint

text-error

text-error-hover

text-highlight-bg

text-highlight-bg-active

text-selection

text-on-accent

interactive-normal

interactive-hover

interactive-accent

interactive-accent-hover

interactive-success

interactive-active-thumb-bg

scrollbar-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

$B o d y$ - math

Body - highlight

Bold & Highlight

Bold and Italics

Italics & Highlight

Bold, Italics & Highlight

~~Strikethrough & Highlight~~

blog

5 + 5 = M a t h B l oc k

Text Formatting Example

Lorem Ipsum

Lorem ipsum dolor sit amet. Qui mollitia consequatur in excepturi similique Cum nihil aut repellendus veniam est voluptatem molestiae ut facere accusantium. Non voluptatem velit Aut omnis et labore beatae est nihil quos est numquam veniam ut repellendus voluptate?

Callout

Aut voluptates labore Et repellendus ut quia galisum est distinctio nemo. Non eligendi iste Vel ipsa hic exercitationem aspernatur non perferendis dolor qui obcaecati consequatur? Est sequi provident aut maxime aperiam Ea corrupti et impedit assumenda et dolores odit aut accusamus quasi Sit laudantium voluptates aut veritatis quibusdamaut quasi in harum quidem.

Sed illo dolor qui dolor impedit eos unde sequi. booleanalgebra
Aut dolor maiores ea Quis unde! obsidian
Aut explicabo dolore ad magnam reiciendis. design

Ut harum aspernatur Ut earum sed repellat nobis aut iusto sint cum perspiciatis autem quo dignissimos eligendi. Sed molestias facilis Ut nihil et perspiciatis excepturi est eveniet officiaest expedita eveniet. Ut dolore iusto Et sunt eum laborum fugiat vel impedit debitis! Sit quia autemId velit eos unde iste et voluptas quae ea tempora dolorem non laudantium veritatis. ~~Est recusandae incidunt.~~ ~~Sed aliquam voluptatem.~~

Code

Sed officia natus eum quis reprehenderit et ducimus veritatis et possimus voluptates. code

project = JIRA
AND assignee in (currentUser(), membersOF("administrators"))
AND status changed from Open to "In progress"
AND labels not in (ux)
AND reporter is not empty
AND 'Number of cohorts[Number]' = 1
AND assignee.property["name"] = "Sylvie"
OR created >= 2019-11-15
ORDER BY created DESC, updated ASC
	project in projectMatch("^JIRA$")
	 project = JIRA

`{jql} issuefunction in expression(“uuhm”, “123”)
Et quas laboriosam non perspiciatis consectetur hic vitae magnam.
Et amet molestiae aut dolor natus.
- 2nd line
Eos internos optio aut quos ipsum sed architecto dolor vel molestiae deleniti.
- Another line…

Ut mollitia eveniet aut veritatis omnis sed molestiae laudantium eum dolore unde.

Callouts

Icons from https://lucide.dev/icons/ & https://fontawesome.com/search

Callout Icons

Callout Colours

Spoiler

Folder Item1

Red

Orange

Tan

Yellow

Green

Cyan

Blue

Purple

Pink

White

Grey

Black

Callout Tables CSS

https://forum.obsidian.md/t/tables-using-callouts/100837

Some examples of use cases

Sblank 1

A Lorem ipsum dolor sit amet, consectetur adipiscing elit.

uno

due

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

Info

Example area 1

Important

example area 2

Tip

example area 3

Multi column

Sucess

Example area 1

Question

example area 2

Warning

example area 3

Tabbed

First

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

Second

Lorem, ipsum dolor sit amet consectetur, adipisicing elit. (Second) External Link > > $L A T E X$

Third

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

bullet item

checkbox

tag

Core Work list-card
- Main Goal 1
- Main Goal 1
- Main Goal 1
  - Collaboration with Jane
- Main Goal 1
Learning & System
Personal
- Personal Goal 1
- Personal Goal 2

Math Block

Supported TeX/LaTeX commands — MathJax 3.2 documentation

Code Block

5 + 5 = M a t h B l oc k

Lists

Bulleted List
- 2
  - 3
    - 4
      - 5
        
        6
        
        7
        
        8

Numbered List
Content in the 2nd listed item.
Three is the best after all…

Checkboxes

Bases

https://www.youtube.com/watch?v=Pus5BcmQVoc&t=463s

Tables

Column 1	Column 2	Column 3	Column 4
1	2	3	4
2	3	4	5
3	4	5	6

Progress Bar

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 + "%"

3rd Party Support

📌 3rd Party Supported open source libraries.

📌 Capacitor - ℹ️ 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.

Moment.JS

Moment.js
- 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

Prism
- 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

Mermaid
- 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

    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

https://hypersphere.blog/blog/sqlseal-sql-engine-for-obsidian/

Notifian

https://github.com/pericles-tpt/notifian

Task Board

https://github.com/tu2-atmanand/Task-Board

Inline Admonitions

https://github.com/scottTomaszewski/obsidian-inline-admonitions

Obsidian Sites

https://www.ssp.sh/brain/

Quartz4

https://quartz.jzhao.xyz/

Starlight

https://starlight.astro.build/

Sheets Extended

| Just                               | a   | normal       | table |
| ---------------------------------- | --- | ------------ | ----- |
| Use `<` to merge cells to the left | <   | Merged cell! | <     |
| Use `^` to merge cells up          | <   | ^            | ^     |

{
    classes: { 
        class1: { 
            "color": "cyan",
        },
        class2: {
            backgroundColor: "#555",
        }
    },
}
---
| I                 | -   | have | meta                  | data        | too! |
| ----------------- | --- | ---- | --------------------- | ----------- | ---- |
| group 1           | -   | foo  | bar ~ .class1 .class2 | baz         | test |
| group 2 ~ .class1 | -   | 1    | ^                     | 3 ~ .class2 | 4    |

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

{
    classes: { 
        class1: { 
            "color": "orange",
        },
        class2: {
            backgroundColor: "#555",
        }
    },
}
---
| Glacial Howl Legendary Bow ~ { "text-align": "center" } .class1 | <   | <      | <|
| ---------------------------------- | --- | ------------ | ----- |
| 12-24❄️  2.4⏱️  14%🎯  36%⛓️‍💥| <   | < | <    |
| 24-36💔  36%💘  48%🥶| <   | < | <    |
|  | <   |             |      |

project = EXAMPLE
AND issuetype IN (Bug, Story, Task)
AND status NOT IN (Done, Closed)
AND priority >= High
AND assignee IN (currentUser(), "jane.doe")
AND reporter != "automation-bot"
AND (
    summary ~ "login"
    OR description ~ "authentication"
    OR text ~ "SSO"
)
AND created >= startOfMonth(-3)
AND updated <= endOfWeek()
AND resolution IS EMPTY
AND fixVersion NOT IN releasedVersions()
AND affectedVersion IN unreleasedVersions()
AND labels IN (backend, security)
AND labels NOT IN (wontfix)
AND component IN ("API", "Auth Service")
AND environment IS NOT EMPTY
AND (
    due <= startOfDay(+7)
    OR due IS EMPTY
)
AND (
    status CHANGED FROM "In Progress" TO "Blocked" AFTER startOfMonth()
    OR assignee CHANGED BY currentUser()
)
AND timeoriginalestimate > 0
AND timespent <= timeoriginalestimate
AND worklogAuthor IN (currentUser())
AND issueFunction NOT IN linkedIssuesOf(
    "project = EXAMPLE AND issuetype = Epic",
    "is blocked by"
)
ORDER BY
    priority DESC,
    updated DESC,
    created ASC

JQL Support!!

project in projectMatch("^Proj$|^Cashe$") AND status in ("Open", "In Progress")
OR (priority WAS "High" AND resolution CHANGED TO "Done")
ORDER BY created DESC, updated ASC
 
-- Unquoted issue keys for testing
key in (CG-549, CG-499, CG-488, CG-483, CG-537, CG-3, CG-567, CG-714, CG-715, CG-522)
 
assignee = currentUser()
reporter != "admin"
fixVersion = latestReleasedVersion()
affectedVersion IN releasedVersions()
created >= startOfDay("-1w")
duedate < now()
labels is not empty
component IS NULL
 
request-type = "Help Desk"
approvals = approved()
"Time to Resolution" < remaining("2h")
SLA = breached()
organization in organizationDetail("Region", "APAC")
 
development[pullrequests].open > 0
development[builds].failing > 2
flagEnabled = "true"
flagEnabledRollout ~ "partial"
deploymentEnvironmentType = "production"
deploymentState = "successful"
 
issueKey IN workItemHistory()
comment ~ "crash"
project IN componentsLeadByUser()
voter = currentUser()
watcher = membersOf("developers")
 
"Epic Link" = PROJ-123
key = PROJ-456
summary ~ 'search term'
"Journey Parent" IS NOT EMPTY
hierarchy-level = 0
 
-- Complex messy query for testing
( issuekey IN portfolioChildIssuesOf("GOAL-54") OR issuekey IN portfolioChildIssuesOf("GOAL-55") OR issuekey IN portfolioChildIssuesOf("GOAL-56") OR issuekey IN portfolioChildIssuesOf("GOAL-57") OR issuekey IN portfolioChildIssuesOf("GOAL-58") OR issuekey IN portfolioChildIssuesOf("GOAL-59") OR issuekey IN portfolioChildIssuesOf("GOAL-60") OR issuekey IN portfolioChildIssuesOf("GOAL-61") OR issuekey IN portfolioChildIssuesOf("GOAL-62") OR issuekey IN portfolioChildIssuesOf("GOAL-63") OR issuekey IN portfolioChildIssuesOf("GOAL-129") OR issuekey IN ("GOAL-54","GOAL-55","GOAL-56","GOAL-57","GOAL-58","GOAL-59","GOAL-60","GOAL-61","GOAL-62","GOAL-63","GOAL-129") ) AND issuetype IN ("Strategy","Company Goal","Team Goal")

JQL Support!!

project = JDEV
AND assignee in (currentUser(), membersOF("administrators"))
AND status changed from Open to "In progress"
AND labels not in (ux)
AND reporter is not empty
AND 'Number of cohorts[Number]' = 1
AND assignee.property["name"] = "Sylvie"
OR created >= 2019-11-15
AND key = JRA-10234
ORDER BY created DESC, updated ASC

Formatting & Design#Progress Bar

Links

🔗 Realtime Colors - Colours

🔗 HSL Color Picker - Colours

🔗 Colour Designer - Colours

🔗 Wordmark - Fonts

🔗 EmojiCopy - Emojis

🔗 Lucide - Icons

🔗 https://www.flaticon.com/icon-fonts-most-downloaded - Icons

🔗 CSS Font Size - CSS Styling

🔗 Obsidian Formatting Syntax - Docs

🔗 ITS Theme Docs - Docs

🔗 Obsidian Hub Docs - Docs

🔗 Integral Guide - Docs

🔗 Obsidian Publish Sites - Inspiration

🔗CSS Snippets - CSS Styling

Colours

background-primary

background-primary-alt

background-secondary

background-secondary-alt

background-modifier-border

background-modifier-form-field

background-modifier-form-field-highlighted

background-modifier-box-shadow

background-modifier-success

background-modifier-error

background-modifier-error-hover

background-modifier-cover

text-accent

text-accent-hover

text-normal

text-muted

text-faint

text-error

text-error-hover

text-highlight-bg

text-highlight-bg-active

text-selection

text-on-accent

interactive-normal

interactive-hover

interactive-accent

interactive-accent-hover

interactive-success

interactive-active-thumb-bg

scrollbar-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

$B o d y$ - math

Body - highlight

Bold & Highlight

Bold and Italics

Italics & Highlight

Bold, Italics & Highlight

~~Strikethrough & Highlight~~

blog

5 + 5 = M a t h B l oc k

Text Formatting Example

Lorem Ipsum

Lorem ipsum dolor sit amet. Qui mollitia consequatur in excepturi similique Cum nihil aut repellendus veniam est voluptatem molestiae ut facere accusantium. Non voluptatem velit Aut omnis et labore beatae est nihil quos est numquam veniam ut repellendus voluptate?

Callout

Aut voluptates labore Et repellendus ut quia galisum est distinctio nemo. Non eligendi iste Vel ipsa hic exercitationem aspernatur non perferendis dolor qui obcaecati consequatur? Est sequi provident aut maxime aperiam Ea corrupti et impedit assumenda et dolores odit aut accusamus quasi Sit laudantium voluptates aut veritatis quibusdamaut quasi in harum quidem.

Sed illo dolor qui dolor impedit eos unde sequi. booleanalgebra
Aut dolor maiores ea Quis unde! obsidian
Aut explicabo dolore ad magnam reiciendis. design

Ut harum aspernatur Ut earum sed repellat nobis aut iusto sint cum perspiciatis autem quo dignissimos eligendi. Sed molestias facilis Ut nihil et perspiciatis excepturi est eveniet officiaest expedita eveniet. Ut dolore iusto Et sunt eum laborum fugiat vel impedit debitis! Sit quia autemId velit eos unde iste et voluptas quae ea tempora dolorem non laudantium veritatis. ~~Est recusandae incidunt.~~ ~~Sed aliquam voluptatem.~~

Code

Sed officia natus eum quis reprehenderit et ducimus veritatis et possimus voluptates. code

project = JIRA
AND assignee in (currentUser(), membersOF("administrators"))
AND status changed from Open to "In progress"
AND labels not in (ux)
AND reporter is not empty
AND 'Number of cohorts[Number]' = 1
AND assignee.property["name"] = "Sylvie"
OR created >= 2019-11-15
ORDER BY created DESC, updated ASC
	project in projectMatch("^JIRA$")
	 project = JIRA

`{jql} issuefunction in expression(“uuhm”, “123”)
Et quas laboriosam non perspiciatis consectetur hic vitae magnam.
Et amet molestiae aut dolor natus.
- 2nd line
Eos internos optio aut quos ipsum sed architecto dolor vel molestiae deleniti.
- Another line…

Ut mollitia eveniet aut veritatis omnis sed molestiae laudantium eum dolore unde.

Callouts

Icons from https://lucide.dev/icons/ & https://fontawesome.com/search

Callout Icons

Callout Colours

Spoiler

Folder Item1

Red

Orange

Tan

Yellow

Green

Cyan

Blue

Purple

Pink

White

Grey

Black

Callout Tables CSS

https://forum.obsidian.md/t/tables-using-callouts/100837

Some examples of use cases

Sblank 1

A Lorem ipsum dolor sit amet, consectetur adipiscing elit.

uno

due

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

Info

Example area 1

Important

example area 2

Tip

example area 3

Multi column

Sucess

Example area 1

Question

example area 2

Warning

example area 3

Tabbed

First

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

Second

Lorem, ipsum dolor sit amet consectetur, adipisicing elit. (Second) External Link > > $L A T E X$

Third

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

bullet item

checkbox

tag

Core Work list-card
- Main Goal 1
- Main Goal 1
- Main Goal 1
  - Collaboration with Jane
- Main Goal 1
Learning & System
Personal
- Personal Goal 1
- Personal Goal 2

Math Block

Supported TeX/LaTeX commands — MathJax 3.2 documentation

Code Block

5 + 5 = M a t h B l oc k

Lists

Bulleted List
- 2
  - 3
    - 4
      - 5
        
        6
        
        7
        
        8

Numbered List
Content in the 2nd listed item.
Three is the best after all…

Checkboxes

Bases

https://www.youtube.com/watch?v=Pus5BcmQVoc&t=463s

Tables

Column 1	Column 2	Column 3	Column 4
1	2	3	4
2	3	4	5
3	4	5	6

Progress Bar

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 + "%"

3rd Party Support

📌 3rd Party Supported open source libraries.

📌 Capacitor - ℹ️ 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.

Moment.JS

Moment.js
- 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

Prism
- 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

Mermaid
- 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

    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

https://hypersphere.blog/blog/sqlseal-sql-engine-for-obsidian/

Notifian

https://github.com/pericles-tpt/notifian

Task Board

https://github.com/tu2-atmanand/Task-Board

Inline Admonitions

https://github.com/scottTomaszewski/obsidian-inline-admonitions

Obsidian Sites

https://www.ssp.sh/brain/

Quartz4

https://quartz.jzhao.xyz/

Starlight

https://starlight.astro.build/

Sheets Extended

| Just                               | a   | normal       | table |
| ---------------------------------- | --- | ------------ | ----- |
| Use `<` to merge cells to the left | <   | Merged cell! | <     |
| Use `^` to merge cells up          | <   | ^            | ^     |

{
    classes: { 
        class1: { 
            "color": "cyan",
        },
        class2: {
            backgroundColor: "#555",
        }
    },
}
---
| I                 | -   | have | meta                  | data        | too! |
| ----------------- | --- | ---- | --------------------- | ----------- | ---- |
| group 1           | -   | foo  | bar ~ .class1 .class2 | baz         | test |
| group 2 ~ .class1 | -   | 1    | ^                     | 3 ~ .class2 | 4    |

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

{
    classes: { 
        class1: { 
            "color": "orange",
        },
        class2: {
            backgroundColor: "#555",
        }
    },
}
---
| Glacial Howl Legendary Bow ~ { "text-align": "center" } .class1 | <   | <      | <|
| ---------------------------------- | --- | ------------ | ----- |
| 12-24❄️  2.4⏱️  14%🎯  36%⛓️‍💥| <   | < | <    |
| 24-36💔  36%💘  48%🥶| <   | < | <    |
|  | <   |             |      |

project = EXAMPLE
AND issuetype IN (Bug, Story, Task)
AND status NOT IN (Done, Closed)
AND priority >= High
AND assignee IN (currentUser(), "jane.doe")
AND reporter != "automation-bot"
AND (
    summary ~ "login"
    OR description ~ "authentication"
    OR text ~ "SSO"
)
AND created >= startOfMonth(-3)
AND updated <= endOfWeek()
AND resolution IS EMPTY
AND fixVersion NOT IN releasedVersions()
AND affectedVersion IN unreleasedVersions()
AND labels IN (backend, security)
AND labels NOT IN (wontfix)
AND component IN ("API", "Auth Service")
AND environment IS NOT EMPTY
AND (
    due <= startOfDay(+7)
    OR due IS EMPTY
)
AND (
    status CHANGED FROM "In Progress" TO "Blocked" AFTER startOfMonth()
    OR assignee CHANGED BY currentUser()
)
AND timeoriginalestimate > 0
AND timespent <= timeoriginalestimate
AND worklogAuthor IN (currentUser())
AND issueFunction NOT IN linkedIssuesOf(
    "project = EXAMPLE AND issuetype = Epic",
    "is blocked by"
)
ORDER BY
    priority DESC,
    updated DESC,
    created ASC

JQL Support!!

project in projectMatch("^Proj$|^Cashe$") AND status in ("Open", "In Progress")
OR (priority WAS "High" AND resolution CHANGED TO "Done")
ORDER BY created DESC, updated ASC
 
-- Unquoted issue keys for testing
key in (CG-549, CG-499, CG-488, CG-483, CG-537, CG-3, CG-567, CG-714, CG-715, CG-522)
 
assignee = currentUser()
reporter != "admin"
fixVersion = latestReleasedVersion()
affectedVersion IN releasedVersions()
created >= startOfDay("-1w")
duedate < now()
labels is not empty
component IS NULL
 
request-type = "Help Desk"
approvals = approved()
"Time to Resolution" < remaining("2h")
SLA = breached()
organization in organizationDetail("Region", "APAC")
 
development[pullrequests].open > 0
development[builds].failing > 2
flagEnabled = "true"
flagEnabledRollout ~ "partial"
deploymentEnvironmentType = "production"
deploymentState = "successful"
 
issueKey IN workItemHistory()
comment ~ "crash"
project IN componentsLeadByUser()
voter = currentUser()
watcher = membersOf("developers")
 
"Epic Link" = PROJ-123
key = PROJ-456
summary ~ 'search term'
"Journey Parent" IS NOT EMPTY
hierarchy-level = 0
 
-- Complex messy query for testing
( issuekey IN portfolioChildIssuesOf("GOAL-54") OR issuekey IN portfolioChildIssuesOf("GOAL-55") OR issuekey IN portfolioChildIssuesOf("GOAL-56") OR issuekey IN portfolioChildIssuesOf("GOAL-57") OR issuekey IN portfolioChildIssuesOf("GOAL-58") OR issuekey IN portfolioChildIssuesOf("GOAL-59") OR issuekey IN portfolioChildIssuesOf("GOAL-60") OR issuekey IN portfolioChildIssuesOf("GOAL-61") OR issuekey IN portfolioChildIssuesOf("GOAL-62") OR issuekey IN portfolioChildIssuesOf("GOAL-63") OR issuekey IN portfolioChildIssuesOf("GOAL-129") OR issuekey IN ("GOAL-54","GOAL-55","GOAL-56","GOAL-57","GOAL-58","GOAL-59","GOAL-60","GOAL-61","GOAL-62","GOAL-63","GOAL-129") ) AND issuetype IN ("Strategy","Company Goal","Team Goal")

JQL Support!!

project = JDEV
AND assignee in (currentUser(), membersOF("administrators"))
AND status changed from Open to "In progress"
AND labels not in (ux)
AND reporter is not empty
AND 'Number of cohorts[Number]' = 1
AND assignee.property["name"] = "Sylvie"
OR created >= 2019-11-15
AND key = JRA-10234
ORDER BY created DESC, updated ASC

Formatting & Design#Text Formatting

Links

🔗 Realtime Colors - Colours

🔗 HSL Color Picker - Colours

🔗 Colour Designer - Colours

🔗 Wordmark - Fonts

🔗 EmojiCopy - Emojis

🔗 Lucide - Icons

🔗 https://www.flaticon.com/icon-fonts-most-downloaded - Icons

🔗 CSS Font Size - CSS Styling

🔗 Obsidian Formatting Syntax - Docs

🔗 ITS Theme Docs - Docs

🔗 Obsidian Hub Docs - Docs

🔗 Integral Guide - Docs

🔗 Obsidian Publish Sites - Inspiration

🔗CSS Snippets - CSS Styling

Colours

background-primary

background-primary-alt

background-secondary

background-secondary-alt

background-modifier-border

background-modifier-form-field

background-modifier-form-field-highlighted

background-modifier-box-shadow

background-modifier-success

background-modifier-error

background-modifier-error-hover

background-modifier-cover

text-accent

text-accent-hover

text-normal

text-muted

text-faint

text-error

text-error-hover

text-highlight-bg

text-highlight-bg-active

text-selection

text-on-accent

interactive-normal

interactive-hover

interactive-accent

interactive-accent-hover

interactive-success

interactive-active-thumb-bg

scrollbar-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

$B o d y$ - math

Body - highlight

Bold & Highlight

Bold and Italics

Italics & Highlight

Bold, Italics & Highlight

~~Strikethrough & Highlight~~

blog

5 + 5 = M a t h B l oc k

Text Formatting Example

Lorem Ipsum

Lorem ipsum dolor sit amet. Qui mollitia consequatur in excepturi similique Cum nihil aut repellendus veniam est voluptatem molestiae ut facere accusantium. Non voluptatem velit Aut omnis et labore beatae est nihil quos est numquam veniam ut repellendus voluptate?

Callout

Aut voluptates labore Et repellendus ut quia galisum est distinctio nemo. Non eligendi iste Vel ipsa hic exercitationem aspernatur non perferendis dolor qui obcaecati consequatur? Est sequi provident aut maxime aperiam Ea corrupti et impedit assumenda et dolores odit aut accusamus quasi Sit laudantium voluptates aut veritatis quibusdamaut quasi in harum quidem.

Sed illo dolor qui dolor impedit eos unde sequi. booleanalgebra
Aut dolor maiores ea Quis unde! obsidian
Aut explicabo dolore ad magnam reiciendis. design

Ut harum aspernatur Ut earum sed repellat nobis aut iusto sint cum perspiciatis autem quo dignissimos eligendi. Sed molestias facilis Ut nihil et perspiciatis excepturi est eveniet officiaest expedita eveniet. Ut dolore iusto Et sunt eum laborum fugiat vel impedit debitis! Sit quia autemId velit eos unde iste et voluptas quae ea tempora dolorem non laudantium veritatis. ~~Est recusandae incidunt.~~ ~~Sed aliquam voluptatem.~~

Code

Sed officia natus eum quis reprehenderit et ducimus veritatis et possimus voluptates. code

project = JIRA
AND assignee in (currentUser(), membersOF("administrators"))
AND status changed from Open to "In progress"
AND labels not in (ux)
AND reporter is not empty
AND 'Number of cohorts[Number]' = 1
AND assignee.property["name"] = "Sylvie"
OR created >= 2019-11-15
ORDER BY created DESC, updated ASC
	project in projectMatch("^JIRA$")
	 project = JIRA

`{jql} issuefunction in expression(“uuhm”, “123”)
Et quas laboriosam non perspiciatis consectetur hic vitae magnam.
Et amet molestiae aut dolor natus.
- 2nd line
Eos internos optio aut quos ipsum sed architecto dolor vel molestiae deleniti.
- Another line…

Ut mollitia eveniet aut veritatis omnis sed molestiae laudantium eum dolore unde.

Callouts

Icons from https://lucide.dev/icons/ & https://fontawesome.com/search

Callout Icons

Callout Colours

Spoiler

Folder Item1

Red

Orange

Tan

Yellow

Green

Cyan

Blue

Purple

Pink

White

Grey

Black

Callout Tables CSS

https://forum.obsidian.md/t/tables-using-callouts/100837

Some examples of use cases

Sblank 1

A Lorem ipsum dolor sit amet, consectetur adipiscing elit.

uno

due

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

Info

Example area 1

Important

example area 2

Tip

example area 3

Multi column

Sucess

Example area 1

Question

example area 2

Warning

example area 3

Tabbed

First

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

Second

Lorem, ipsum dolor sit amet consectetur, adipisicing elit. (Second) External Link > > $L A T E X$

Third

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

bullet item

checkbox

tag

Core Work list-card
- Main Goal 1
- Main Goal 1
- Main Goal 1
  - Collaboration with Jane
- Main Goal 1
Learning & System
Personal
- Personal Goal 1
- Personal Goal 2

Math Block

Supported TeX/LaTeX commands — MathJax 3.2 documentation

Code Block

5 + 5 = M a t h B l oc k

Lists

Bulleted List
- 2
  - 3
    - 4
      - 5
        
        6
        
        7
        
        8

Numbered List
Content in the 2nd listed item.
Three is the best after all…

Checkboxes

Bases

https://www.youtube.com/watch?v=Pus5BcmQVoc&t=463s

Tables

Column 1	Column 2	Column 3	Column 4
1	2	3	4
2	3	4	5
3	4	5	6

Progress Bar

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 + "%"

3rd Party Support

📌 3rd Party Supported open source libraries.

📌 Capacitor - ℹ️ 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.

Moment.JS

Moment.js
- 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

Prism
- 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

Mermaid
- 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

    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

https://hypersphere.blog/blog/sqlseal-sql-engine-for-obsidian/

Notifian

https://github.com/pericles-tpt/notifian

Task Board

https://github.com/tu2-atmanand/Task-Board

Inline Admonitions

https://github.com/scottTomaszewski/obsidian-inline-admonitions

Obsidian Sites

https://www.ssp.sh/brain/

Quartz4

https://quartz.jzhao.xyz/

Starlight

https://starlight.astro.build/

Sheets Extended

| Just                               | a   | normal       | table |
| ---------------------------------- | --- | ------------ | ----- |
| Use `<` to merge cells to the left | <   | Merged cell! | <     |
| Use `^` to merge cells up          | <   | ^            | ^     |

{
    classes: { 
        class1: { 
            "color": "cyan",
        },
        class2: {
            backgroundColor: "#555",
        }
    },
}
---
| I                 | -   | have | meta                  | data        | too! |
| ----------------- | --- | ---- | --------------------- | ----------- | ---- |
| group 1           | -   | foo  | bar ~ .class1 .class2 | baz         | test |
| group 2 ~ .class1 | -   | 1    | ^                     | 3 ~ .class2 | 4    |

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

{
    classes: { 
        class1: { 
            "color": "orange",
        },
        class2: {
            backgroundColor: "#555",
        }
    },
}
---
| Glacial Howl Legendary Bow ~ { "text-align": "center" } .class1 | <   | <      | <|
| ---------------------------------- | --- | ------------ | ----- |
| 12-24❄️  2.4⏱️  14%🎯  36%⛓️‍💥| <   | < | <    |
| 24-36💔  36%💘  48%🥶| <   | < | <    |
|  | <   |             |      |

project = EXAMPLE
AND issuetype IN (Bug, Story, Task)
AND status NOT IN (Done, Closed)
AND priority >= High
AND assignee IN (currentUser(), "jane.doe")
AND reporter != "automation-bot"
AND (
    summary ~ "login"
    OR description ~ "authentication"
    OR text ~ "SSO"
)
AND created >= startOfMonth(-3)
AND updated <= endOfWeek()
AND resolution IS EMPTY
AND fixVersion NOT IN releasedVersions()
AND affectedVersion IN unreleasedVersions()
AND labels IN (backend, security)
AND labels NOT IN (wontfix)
AND component IN ("API", "Auth Service")
AND environment IS NOT EMPTY
AND (
    due <= startOfDay(+7)
    OR due IS EMPTY
)
AND (
    status CHANGED FROM "In Progress" TO "Blocked" AFTER startOfMonth()
    OR assignee CHANGED BY currentUser()
)
AND timeoriginalestimate > 0
AND timespent <= timeoriginalestimate
AND worklogAuthor IN (currentUser())
AND issueFunction NOT IN linkedIssuesOf(
    "project = EXAMPLE AND issuetype = Epic",
    "is blocked by"
)
ORDER BY
    priority DESC,
    updated DESC,
    created ASC

JQL Support!!

project in projectMatch("^Proj$|^Cashe$") AND status in ("Open", "In Progress")
OR (priority WAS "High" AND resolution CHANGED TO "Done")
ORDER BY created DESC, updated ASC
 
-- Unquoted issue keys for testing
key in (CG-549, CG-499, CG-488, CG-483, CG-537, CG-3, CG-567, CG-714, CG-715, CG-522)
 
assignee = currentUser()
reporter != "admin"
fixVersion = latestReleasedVersion()
affectedVersion IN releasedVersions()
created >= startOfDay("-1w")
duedate < now()
labels is not empty
component IS NULL
 
request-type = "Help Desk"
approvals = approved()
"Time to Resolution" < remaining("2h")
SLA = breached()
organization in organizationDetail("Region", "APAC")
 
development[pullrequests].open > 0
development[builds].failing > 2
flagEnabled = "true"
flagEnabledRollout ~ "partial"
deploymentEnvironmentType = "production"
deploymentState = "successful"
 
issueKey IN workItemHistory()
comment ~ "crash"
project IN componentsLeadByUser()
voter = currentUser()
watcher = membersOf("developers")
 
"Epic Link" = PROJ-123
key = PROJ-456
summary ~ 'search term'
"Journey Parent" IS NOT EMPTY
hierarchy-level = 0
 
-- Complex messy query for testing
( issuekey IN portfolioChildIssuesOf("GOAL-54") OR issuekey IN portfolioChildIssuesOf("GOAL-55") OR issuekey IN portfolioChildIssuesOf("GOAL-56") OR issuekey IN portfolioChildIssuesOf("GOAL-57") OR issuekey IN portfolioChildIssuesOf("GOAL-58") OR issuekey IN portfolioChildIssuesOf("GOAL-59") OR issuekey IN portfolioChildIssuesOf("GOAL-60") OR issuekey IN portfolioChildIssuesOf("GOAL-61") OR issuekey IN portfolioChildIssuesOf("GOAL-62") OR issuekey IN portfolioChildIssuesOf("GOAL-63") OR issuekey IN portfolioChildIssuesOf("GOAL-129") OR issuekey IN ("GOAL-54","GOAL-55","GOAL-56","GOAL-57","GOAL-58","GOAL-59","GOAL-60","GOAL-61","GOAL-62","GOAL-63","GOAL-129") ) AND issuetype IN ("Strategy","Company Goal","Team Goal")

JQL Support!!

project = JDEV
AND assignee in (currentUser(), membersOF("administrators"))
AND status changed from Open to "In progress"
AND labels not in (ux)
AND reporter is not empty
AND 'Number of cohorts[Number]' = 1
AND assignee.property["name"] = "Sylvie"
OR created >= 2019-11-15
AND key = JRA-10234
ORDER BY created DESC, updated ASC

Formatting & Design#Lorem Ipsum

Links

🔗 Realtime Colors - Colours

🔗 HSL Color Picker - Colours

🔗 Colour Designer - Colours

🔗 Wordmark - Fonts

🔗 EmojiCopy - Emojis

🔗 Lucide - Icons

🔗 https://www.flaticon.com/icon-fonts-most-downloaded - Icons

🔗 CSS Font Size - CSS Styling

🔗 Obsidian Formatting Syntax - Docs

🔗 ITS Theme Docs - Docs

🔗 Obsidian Hub Docs - Docs

🔗 Integral Guide - Docs

🔗 Obsidian Publish Sites - Inspiration

🔗CSS Snippets - CSS Styling

Colours

background-primary

background-primary-alt

background-secondary

background-secondary-alt

background-modifier-border

background-modifier-form-field

background-modifier-form-field-highlighted

background-modifier-box-shadow

background-modifier-success

background-modifier-error

background-modifier-error-hover

background-modifier-cover

text-accent

text-accent-hover

text-normal

text-muted

text-faint

text-error

text-error-hover

text-highlight-bg

text-highlight-bg-active

text-selection

text-on-accent

interactive-normal

interactive-hover

interactive-accent

interactive-accent-hover

interactive-success

interactive-active-thumb-bg

scrollbar-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

$B o d y$ - math

Body - highlight

Bold & Highlight

Bold and Italics

Italics & Highlight

Bold, Italics & Highlight

~~Strikethrough & Highlight~~

blog

5 + 5 = M a t h B l oc k

Text Formatting Example

Lorem Ipsum

Lorem ipsum dolor sit amet. Qui mollitia consequatur in excepturi similique Cum nihil aut repellendus veniam est voluptatem molestiae ut facere accusantium. Non voluptatem velit Aut omnis et labore beatae est nihil quos est numquam veniam ut repellendus voluptate?

Callout

Aut voluptates labore Et repellendus ut quia galisum est distinctio nemo. Non eligendi iste Vel ipsa hic exercitationem aspernatur non perferendis dolor qui obcaecati consequatur? Est sequi provident aut maxime aperiam Ea corrupti et impedit assumenda et dolores odit aut accusamus quasi Sit laudantium voluptates aut veritatis quibusdamaut quasi in harum quidem.

Sed illo dolor qui dolor impedit eos unde sequi. booleanalgebra
Aut dolor maiores ea Quis unde! obsidian
Aut explicabo dolore ad magnam reiciendis. design

Ut harum aspernatur Ut earum sed repellat nobis aut iusto sint cum perspiciatis autem quo dignissimos eligendi. Sed molestias facilis Ut nihil et perspiciatis excepturi est eveniet officiaest expedita eveniet. Ut dolore iusto Et sunt eum laborum fugiat vel impedit debitis! Sit quia autemId velit eos unde iste et voluptas quae ea tempora dolorem non laudantium veritatis. ~~Est recusandae incidunt.~~ ~~Sed aliquam voluptatem.~~

Code

Sed officia natus eum quis reprehenderit et ducimus veritatis et possimus voluptates. code

project = JIRA
AND assignee in (currentUser(), membersOF("administrators"))
AND status changed from Open to "In progress"
AND labels not in (ux)
AND reporter is not empty
AND 'Number of cohorts[Number]' = 1
AND assignee.property["name"] = "Sylvie"
OR created >= 2019-11-15
ORDER BY created DESC, updated ASC
	project in projectMatch("^JIRA$")
	 project = JIRA

`{jql} issuefunction in expression(“uuhm”, “123”)
Et quas laboriosam non perspiciatis consectetur hic vitae magnam.
Et amet molestiae aut dolor natus.
- 2nd line
Eos internos optio aut quos ipsum sed architecto dolor vel molestiae deleniti.
- Another line…

Ut mollitia eveniet aut veritatis omnis sed molestiae laudantium eum dolore unde.

Callouts

Icons from https://lucide.dev/icons/ & https://fontawesome.com/search

Callout Icons

Callout Colours

Spoiler

Folder Item1

Red

Orange

Tan

Yellow

Green

Cyan

Blue

Purple

Pink

White

Grey

Black

Callout Tables CSS

https://forum.obsidian.md/t/tables-using-callouts/100837

Some examples of use cases

Sblank 1

A Lorem ipsum dolor sit amet, consectetur adipiscing elit.

uno

due

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

Info

Example area 1

Important

example area 2

Tip

example area 3

Multi column

Sucess

Example area 1

Question

example area 2

Warning

example area 3

Tabbed

First

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

Second

Lorem, ipsum dolor sit amet consectetur, adipisicing elit. (Second) External Link > > $L A T E X$

Third

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

bullet item

checkbox

tag

Core Work list-card
- Main Goal 1
- Main Goal 1
- Main Goal 1
  - Collaboration with Jane
- Main Goal 1
Learning & System
Personal
- Personal Goal 1
- Personal Goal 2

Math Block

Supported TeX/LaTeX commands — MathJax 3.2 documentation

Code Block

5 + 5 = M a t h B l oc k

Lists

Bulleted List
- 2
  - 3
    - 4
      - 5
        
        6
        
        7
        
        8

Numbered List
Content in the 2nd listed item.
Three is the best after all…

Checkboxes

Bases

https://www.youtube.com/watch?v=Pus5BcmQVoc&t=463s

Tables

Column 1	Column 2	Column 3	Column 4
1	2	3	4
2	3	4	5
3	4	5	6

Progress Bar

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 + "%"

3rd Party Support

📌 3rd Party Supported open source libraries.

📌 Capacitor - ℹ️ 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.

Moment.JS

Moment.js
- 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

Prism
- 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

Mermaid
- 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

    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

https://hypersphere.blog/blog/sqlseal-sql-engine-for-obsidian/

Notifian

https://github.com/pericles-tpt/notifian

Task Board

https://github.com/tu2-atmanand/Task-Board

Inline Admonitions

https://github.com/scottTomaszewski/obsidian-inline-admonitions

Obsidian Sites

https://www.ssp.sh/brain/

Quartz4

https://quartz.jzhao.xyz/

Starlight

https://starlight.astro.build/

Sheets Extended

| Just                               | a   | normal       | table |
| ---------------------------------- | --- | ------------ | ----- |
| Use `<` to merge cells to the left | <   | Merged cell! | <     |
| Use `^` to merge cells up          | <   | ^            | ^     |

{
    classes: { 
        class1: { 
            "color": "cyan",
        },
        class2: {
            backgroundColor: "#555",
        }
    },
}
---
| I                 | -   | have | meta                  | data        | too! |
| ----------------- | --- | ---- | --------------------- | ----------- | ---- |
| group 1           | -   | foo  | bar ~ .class1 .class2 | baz         | test |
| group 2 ~ .class1 | -   | 1    | ^                     | 3 ~ .class2 | 4    |

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

{
    classes: { 
        class1: { 
            "color": "orange",
        },
        class2: {
            backgroundColor: "#555",
        }
    },
}
---
| Glacial Howl Legendary Bow ~ { "text-align": "center" } .class1 | <   | <      | <|
| ---------------------------------- | --- | ------------ | ----- |
| 12-24❄️  2.4⏱️  14%🎯  36%⛓️‍💥| <   | < | <    |
| 24-36💔  36%💘  48%🥶| <   | < | <    |
|  | <   |             |      |

project = EXAMPLE
AND issuetype IN (Bug, Story, Task)
AND status NOT IN (Done, Closed)
AND priority >= High
AND assignee IN (currentUser(), "jane.doe")
AND reporter != "automation-bot"
AND (
    summary ~ "login"
    OR description ~ "authentication"
    OR text ~ "SSO"
)
AND created >= startOfMonth(-3)
AND updated <= endOfWeek()
AND resolution IS EMPTY
AND fixVersion NOT IN releasedVersions()
AND affectedVersion IN unreleasedVersions()
AND labels IN (backend, security)
AND labels NOT IN (wontfix)
AND component IN ("API", "Auth Service")
AND environment IS NOT EMPTY
AND (
    due <= startOfDay(+7)
    OR due IS EMPTY
)
AND (
    status CHANGED FROM "In Progress" TO "Blocked" AFTER startOfMonth()
    OR assignee CHANGED BY currentUser()
)
AND timeoriginalestimate > 0
AND timespent <= timeoriginalestimate
AND worklogAuthor IN (currentUser())
AND issueFunction NOT IN linkedIssuesOf(
    "project = EXAMPLE AND issuetype = Epic",
    "is blocked by"
)
ORDER BY
    priority DESC,
    updated DESC,
    created ASC

JQL Support!!

project in projectMatch("^Proj$|^Cashe$") AND status in ("Open", "In Progress")
OR (priority WAS "High" AND resolution CHANGED TO "Done")
ORDER BY created DESC, updated ASC
 
-- Unquoted issue keys for testing
key in (CG-549, CG-499, CG-488, CG-483, CG-537, CG-3, CG-567, CG-714, CG-715, CG-522)
 
assignee = currentUser()
reporter != "admin"
fixVersion = latestReleasedVersion()
affectedVersion IN releasedVersions()
created >= startOfDay("-1w")
duedate < now()
labels is not empty
component IS NULL
 
request-type = "Help Desk"
approvals = approved()
"Time to Resolution" < remaining("2h")
SLA = breached()
organization in organizationDetail("Region", "APAC")
 
development[pullrequests].open > 0
development[builds].failing > 2
flagEnabled = "true"
flagEnabledRollout ~ "partial"
deploymentEnvironmentType = "production"
deploymentState = "successful"
 
issueKey IN workItemHistory()
comment ~ "crash"
project IN componentsLeadByUser()
voter = currentUser()
watcher = membersOf("developers")
 
"Epic Link" = PROJ-123
key = PROJ-456
summary ~ 'search term'
"Journey Parent" IS NOT EMPTY
hierarchy-level = 0
 
-- Complex messy query for testing
( issuekey IN portfolioChildIssuesOf("GOAL-54") OR issuekey IN portfolioChildIssuesOf("GOAL-55") OR issuekey IN portfolioChildIssuesOf("GOAL-56") OR issuekey IN portfolioChildIssuesOf("GOAL-57") OR issuekey IN portfolioChildIssuesOf("GOAL-58") OR issuekey IN portfolioChildIssuesOf("GOAL-59") OR issuekey IN portfolioChildIssuesOf("GOAL-60") OR issuekey IN portfolioChildIssuesOf("GOAL-61") OR issuekey IN portfolioChildIssuesOf("GOAL-62") OR issuekey IN portfolioChildIssuesOf("GOAL-63") OR issuekey IN portfolioChildIssuesOf("GOAL-129") OR issuekey IN ("GOAL-54","GOAL-55","GOAL-56","GOAL-57","GOAL-58","GOAL-59","GOAL-60","GOAL-61","GOAL-62","GOAL-63","GOAL-129") ) AND issuetype IN ("Strategy","Company Goal","Team Goal")

JQL Support!!

project = JDEV
AND assignee in (currentUser(), membersOF("administrators"))
AND status changed from Open to "In progress"
AND labels not in (ux)
AND reporter is not empty
AND 'Number of cohorts[Number]' = 1
AND assignee.property["name"] = "Sylvie"
OR created >= 2019-11-15
AND key = JRA-10234
ORDER BY created DESC, updated ASC

varku.dev

Open varku.dev in new tab

Feature Checklist

Colours

Header 1

Header 2

Header 3

Header 4

Header 5

Header 6

Text Formatting

Text Formatting Example

Lorem Ipsum

Code

Callouts

Callout Icons

Callout Colours

Callout Tables CSS

MCL

Core Work list-card

Learning & System

Personal

Math Block

Lists

Checkboxes

Bases

Tables

Progress Bar

3rd Party Support

Moment.JS

Prism

Mermaid

Flowchart

Sequence Diagram

Class Diagram

State Diagram

Entity Relationship Diagram

User Journey

Gantt

Pie Chart

Quadrant Chart

Requirement Diagram

Gitgraph / Git Diagram

C4 Diagram

Mindmaps

Timeline

ZenUML

Sankey

XY Chart

Block Diagram

Packet

Kanban

Architecture

Other Examples

CSS - Cascading Style Sheets

Templater

Dataview

SQL_Seal

Notifian

Task Board

Inline Admonitions

Obsidian Sites

Quartz4

Starlight

Sheets Extended

Testing Area

Colours

Header 1

Header 2

Header 3

Header 4

Header 5

Header 6

Text Formatting

Text Formatting Example

Lorem Ipsum

Code

Callouts

Callout Icons

Callout Colours

Callout Tables CSS

MCL