Table of contents

There are plenty of themes and color schemes than can be uses with options["theme"] and options["color_scheme"]

Introduccion

Fig 1 : This is an example

We cite 1 as an example

Fig 2 : This is a test

We cite 2 as a test

Table 1 : This is an example table

We cite table 1 as an example

Table 2 : This is a test table

We cite table 2 as a test table

Demo (Click me)

Demo2

Demo3

Demo4

Demo5

Demo6

Data table (Header true, text false, style DT):

Data table (Header true, text false, style BS):

Data table (Header true, text true, style DT):

descripcion

GEnerate table data using a custom object

        ---
        title: Hello Title
        config:
         theme: base
         themeVariables:
           primaryColor: "#00ff00"
       ---
       graph LR;
         A --- B ;
         A --- E(5) ;
         B-->C[fa:fa-ban forbidden];
         B-->D(fa:fa-spinner);
         click A callback "Texto para el tooltip"
         click B href "#CanvasXpress-ParentNode-obj_3_"

        ---
        title: Hello Title
        config:
            theme: base
            themeVariables:
            primaryColor: "#00ff00"
        ---
        timeline
        title Workflow
          section Cluster Steps
            get reliable pairs : Net Metrics
            get clusters : Cluster Metrics
                         : CDLib Metrics
            clean clusters : Cluster Metrics
                           : CDLib Metrics
            prepare and randomize clusters : Nothing                    
            cluster ranking : CRank Metrics
          section Disease Steps
            disease prediction : Disease Metrics
          section Ranker Steps
            gene ranking metrics : First Ranker Metrics
                                 : First Ranker Metrics Best Genes
            geometric mean integration : Geometric integration
            gene disease ranking : Second Ranker Metrics
                                 : Second Ranker Metrics Best Genes
            get control prediction: Phen2Gene Metrics

Iframe embedded html (required first argument: path to the html file to embed (not loaded in hash_vars))

Mermaid with icons and renderize_child_template examples

Mermaid with icons example 1

---
title: Direct Disease Prediction (DDP)
config:
    theme: base
    themeVariables:
    primaryColor: "#00ff00"
    securityLevel: 'loose'
---
flowchart LR
    subgraph Gold Standard
        subgraph A["
Queries
(Disease ID - Name)
"]
            
            O4@{ icon: "fas:tag", label: "
OMIM:1
"}
            O5@{ icon: "fas:tag", label: "
OMIM:2
"}
            O6@{ icon: "fas:tag", label: "
OMIM:3
"}

            N1@{ icon: "cov:symptoms-nausea", label: "
Disease 1
"}
            N2@{ icon: "hea:deaf-outline", label: "
Disease 2
"}
            N3@{ icon: "hea:tb", label: "
Disease 3
"}

            O4 --> N1
            O5 --> N2
            O6 --> N3

        end
        subgraph B["
Diseases evidences
(Disease ID - PMID)
"]
            
            O1@{ icon: "fas:tag", label: "
OMIM:1
"}
            O2@{ icon: "fas:tag", label: "
OMIM:2
"}
            O3@{ icon: "fas:tag", label: "
OMIM:3
"}

            P1@{ icon: "aca:pubmed", label: "
PMID:44
"}
            P2@{ icon: "aca:pubmed", label: "
PMID:23
"}
            P3@{ icon: "aca:pubmed", label: "
PMID:53
"}

            O1 --> P1
            O2 --> P2
            O3 --> P3

        end
    end
          
    %FILES
    C@{ shape: doc, label: "
Embedded queries

Disease ID - vector"}
    D@{ shape: doc, label: "
Embedded corpus

PMID - vector"}
    %PROCESSES
    X@{ shape: rect, label: "
stEngine

Embedd"}
    Y@{ shape: rect, label: "
stEngine

Calculate
similarities"}
    
    A --> X
    X --> C
    C -->|"for each disease"| Y
    D -->|"all the documents"| Y
    
    subgraph Results["Textual-based
Semantic Similarity
Rankings"]
        %FILES
        E@{ shape: doc, label: "
Disease ID - PMID - Similarity

OMIM:3 -- PMID:34 -- 0.89
OMIM:3 -- PMID:53 -- 0.83
OMIM:3 -- PMID:67 -- 0.78
"}
    end
    Y --> Results
    B -->|"Get the PMID ranking
for the Disease ID"| E
    
    % NODES STYLES
    style A color:#000000, stroke:#2962FF, fill:#AFCFEE
style B color:#000000, stroke:#2962FF, fill:#AFCFEE
style C color:#000000, stroke:#2962FF, fill:#AFCFEE
style D color:#000000, stroke:#2962FF, fill:#AFCFEE
style E color:#000000, stroke:#2962FF, fill:#AFCFEE

Mermaid with icons example 2

---
title: Direct Disease Prediction (DDP)
config:
    theme: base
    themeVariables:
    primaryColor: "#00ff00"
---
flowchart LR
    subgraph A["
Diseases names and evidences
"]
        direction LR
        
            O1(("
ID1
"))
            O2(("
ID2
"))
            O3(("
ID3
"))
            style O1 color:#000000, stroke:#AFCFEE, fill:#AFCFEE
style O2 color:#000000, stroke:#AFCFEE, fill:#AFCFEE
style O3 color:#000000, stroke:#AFCFEE, fill:#AFCFEE

            P1(("
T44
"))
            P2(("
T23
"))
            P3(("
T53
"))
            style P1 color:#000000, stroke:#AFCFEE, fill:#AFCFEE
style P2 color:#000000, stroke:#AFCFEE, fill:#AFCFEE
style P3 color:#000000, stroke:#AFCFEE, fill:#AFCFEE

            N1(("
DN1
"))
            N2(("
DN2
"))
            N3(("
DN3
"))
            style N1 color:#000000, stroke:#AFCFEE, fill:#AFCFEE
style N2 color:#000000, stroke:#AFCFEE, fill:#AFCFEE
style N3 color:#000000, stroke:#AFCFEE, fill:#AFCFEE

            N1 o--o O1 o--o P1
            N2 o--o O2 o--o P2
            N3 o--o O3 o--o P3

    end
    subgraph Embeddings
        direction LR
        C@{ label: "
Embedded queries
ID1
V1
ID2
V2
ID3
V3
"}
        D@{ label: "
Embedded corpus
T49
V4
T44
V5
T53
V6
"}
    end
    Results@{label: "
Rankings
0.89
ID3
T44
0.77
ID3
T53
0.72
ID3
T49
"}

    A -->|"stEngine
Embedd
"| C
    Embeddings -->|"stEngine
Calculate
similarities
"| Results 
    A -->|"Get the PMID ranking
for the Disease ID"| Results
    
    style A color:#000000, stroke:#AFCFEE, fill:#AFCFEE
style C color:#000000, stroke:#AFCFEE, fill:#AFCFEE
style D color:#000000, stroke:#AFCFEE, fill:#AFCFEE
style Results color:#000000, stroke:#AFCFEE, fill:#AFCFEE