Tina

TinaCMS is designed to empower content creators with an intuitive and flexible editing experience, and our markdown support is no exception. Whether you're managing a simple blog or a complex documentation site, TinaCMS seamlessly integrates markdown, combining the power of structured content with the ease of real-time editing. From headings and links to images and custom syntax, TinaCMS ensures your markdown files are easy to manage and customize while maintaining complete control over your content.

Flowcharts

Use a flowchart to visualize processes, decision trees, or workflows. It’s ideal for simplifying complex systems or explaining logic visually.

flowchart TD
    A(Napoleon's Aspirations) --> B{Skills Needed?}
    B -->|"Nunchuck Skills"| C[Nunchucks Training]
    B -->|Computer Hacking Skills| D[Hacking Practice]
    B -->|Bow Hunting Skills| E[Archery Club]
    C --> F[Become a Martial Arts Master]
    D --> G[Create the Ultimate Chat Program]
    E --> H[Win a Hunting Trophy]
    F --> I{Impress Girls?}
    G --> I
    H --> I
    I -->|Yes| J[Date Deb]
    I -->|No| K[Draw Ligers]
    K --> L[Become Awesome Anyway]

Sequence Diagram

Use a sequence diagram to illustrate interactions between components or systems over time, particularly for APIs, workflows, or system interactions.

sequenceDiagram
    participant Frodo
    participant Sam
    participant Ring
    Frodo->>Sam: "We need to destroy it."
    Sam->>Ring: Carries the burden
    Ring-->>Sam: "It's too heavy!"
    Sam-->>Frodo: "I can't carry it, but I can carry you!"
    Frodo-->>Ring: Throws it into Mount Doom

Class Diagram

Use a class diagram for object-oriented system design, showing the structure of classes, attributes, and their relationships.

classDiagram
    class Jedi {
        +String name
        +String lightsaberColor
        +useForce()
    }
    class Sith {
        +String name
        +String lightsaberColor
        +useDarkSide()
    }
    Jedi <|-- Sith

State Diagram

Use a state diagram to represent different states of a system or object and transitions between those states.

stateDiagram-v2
    [*] --> TheShire
    TheShire --> Rivendell: Begin the journey
    Rivendell --> Moria: Pass through the mines
    Moria --> Gondor: Battle forces of evil
    Gondor --> Mordor: Approach Mount Doom
    Mordor --> [*]: Mission complete

Entity Relationship Diagram

Use an ER diagram to model database structures, showing entities, attributes, and relationships.

erDiagram
    AVENGER ||--o{ MISSION : participates
    MISSION ||--|{ ENEMY : targets
    AVENGER {
        string name
        string superPower
    }
    MISSION {
        int id
        string location
    }
    ENEMY {
        string name
        string weakness
    }

User Journey

Use a user journey diagram to track user interactions with your product or service and identify pain points or areas for improvement.

journey
    title Star Wars User Journey
    section Discover
      Learn the Force: 5: Luke
      Train with Yoda: 4: Luke
    section Conflict
      Face Vader: 5: Luke
      Resist the Dark Side: 5: Luke
    section Triumph
      Redeem Vader: 4: Luke
      Save the Galaxy: 5: Luke

Gantt Chart

Use a Gantt chart to visualize timelines and project schedules, tracking progress and dependencies.

gantt
    title Build the Death Star
    dateFormat  YYYY-MM-DD
    section Planning
    Acquire Funds        :done, a1, 2025-01-01, 2025-01-15
    Blueprints Approval  :active, a2, 2025-01-16, 2025-01-30
    section Construction
    Build Core Structure :b1, 2025-02-01, 2025-03-31
    Install Laser Cannon :b2, 2025-04-01, 2025-06-30

Pie Chart

Use a pie chart to represent data proportions visually, such as resource allocation or survey results.

pie
    title Avengers Assemble
    "Iron Man" : 25
    "Thor" : 20
    "Hulk" : 15
    "Captain America" : 30
    "Black Widow" : 10

Quadrant Chart

Use a quadrant chart to prioritize tasks or visualize elements across two dimensions.

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

Use a requirement diagram to track project requirements and their relationships.

    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

Use a Gitgraph diagram to visualize Git workflows and branching strategies.

gitGraph
    commit
    branch feature
    checkout feature
    commit
    branch hotfix
    checkout hotfix
    commit
    checkout main
    merge feature
    merge hotfix

C4 Diagram

Use a C4 diagram for software architecture, showing system contexts, containers, components, and code.

    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

Use a mindmap to brainstorm ideas or visually organize information hierarchically.

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

Use a timeline to show events chronologically, such as milestones or historical data.

timeline
    title Harry Potter Timeline
    1991 : Harry starts Hogwarts
    1992 : Chamber of Secrets opened
    1993 : Sirius Black escapes Azkaban
    1994 : Triwizard Tournament
    1998 : Battle of Hogwarts

Sankey Diagram

Use a Sankey diagram to show the flow of resources, energy, or data between stages.

---
config:
  sankey:
    showValues: false
---
sankey-beta

Agricultural 'waste',Bio-conversion,124.729
Bio-conversion,Liquid,0.597
Bio-conversion,Losses,26.862
Bio-conversion,Solid,280.322
Bio-conversion,Gas,81.144
Biofuel imports,Liquid,35
Biomass imports,Solid,35
Coal imports,Coal,11.606
Coal reserves,Coal,63.965
Coal,Solid,75.571
District heating,Industry,10.639
District heating,Heating and cooling - commercial,22.505
District heating,Heating and cooling - homes,46.184
Electricity grid,Over generation / exports,104.453
Electricity grid,Heating and cooling - homes,113.726
Electricity grid,H2 conversion,27.14
Electricity grid,Industry,342.165
Electricity grid,Road transport,37.797
Electricity grid,Agriculture,4.412
Electricity grid,Heating and cooling - commercial,40.858
Electricity grid,Losses,56.691
Electricity grid,Rail transport,7.863
Electricity grid,Lighting & appliances - commercial,90.008
Electricity grid,Lighting & appliances - homes,93.494
Gas imports,Ngas,40.719
Gas reserves,Ngas,82.233
Gas,Heating and cooling - commercial,0.129
Gas,Losses,1.401
Gas,Thermal generation,151.891
Gas,Agriculture,2.096
Gas,Industry,48.58
Geothermal,Electricity grid,7.013
H2 conversion,H2,20.897
H2 conversion,Losses,6.242
H2,Road transport,20.897
Hydro,Electricity grid,6.995
Liquid,Industry,121.066
Liquid,International shipping,128.69
Liquid,Road transport,135.835
Liquid,Domestic aviation,14.458
Liquid,International aviation,206.267
Liquid,Agriculture,3.64
Liquid,National navigation,33.218
Liquid,Rail transport,4.413
Marine algae,Bio-conversion,4.375
Ngas,Gas,122.952
Nuclear,Thermal generation,839.978
Oil imports,Oil,504.287
Oil reserves,Oil,107.703
Oil,Liquid,611.99
Other waste,Solid,56.587
Other waste,Bio-conversion,77.81
Pumped heat,Heating and cooling - homes,193.026
Pumped heat,Heating and cooling - commercial,70.672
Solar PV,Electricity grid,59.901
Solar Thermal,Heating and cooling - homes,19.263
Solar,Solar Thermal,19.263
Solar,Solar PV,59.901
Solid,Agriculture,0.882
Solid,Thermal generation,400.12
Solid,Industry,46.477
Thermal generation,Electricity grid,525.531
Thermal generation,Losses,787.129
Thermal generation,District heating,79.329
Tidal,Electricity grid,9.452
UK land based bioenergy,Bio-conversion,182.01
Wave,Electricity grid,19.013
Wind,Electricity grid,289.366

XY Chart

Use an XY chart to compare data points across two dimensions, such as performance vs. cost.

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]

Packet Diagram

When to use: Use a packet diagram to describe network communications and data flows.

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

Use a Kanban board to visualize work items and their statuses in workflows.

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

Architecture Diagram

Use an architecture diagram to represent high-level system components and their interactions.

flowchart LR
    User --> StarkServer[Iron Man's AI Server]
    StarkServer --> Database[Mission Logs]
    StarkServer --> AIModel[Jarvis AI]

Tina Starter

Learning about Mermaid

Flowcharts

Sequence Diagram

Class Diagram

State Diagram

Entity Relationship Diagram

User Journey

Gantt Chart

Pie Chart

Quadrant Chart

Requirement Diagram

Gitgraph (Git) Diagram

C4 Diagram

Mindmaps

Timeline

Sankey Diagram

XY Chart

Packet Diagram

Kanban

Architecture Diagram

Tina Tina Starter

Learning about Mermaid

Flowcharts

Sequence Diagram

Class Diagram

State Diagram

Entity Relationship Diagram

User Journey

Gantt Chart

Pie Chart

Quadrant Chart

Requirement Diagram

Gitgraph (Git) Diagram

C4 Diagram

Mindmaps

Timeline

Sankey Diagram

XY Chart

Packet Diagram

Kanban

Architecture Diagram

Tina Starter