Posted inNote

#00223 การฝัง Mermaid Chart ลงใน Obsidian และ WordPress

Posted inNote

Obsidian


sequenceDiagram Alice->>+John: Hello John, how are you? Alice->>+John: John, can you hear me? John-->>-Alice: Hi Alice, I can hear you! John-->>-Alice: I feel great! 



Wordpress

<!-- wp:merpress/mermaidjs -->
<div class="wp-block-merpress-mermaidjs diagram-source-mermaid"><pre class="mermaid">graph TD;
    ทดสอบ-->B;
    A-->C;
    B-->D;
    C-->D;</pre></div>
<!-- /wp:merpress/mermaidjs -->


graph TD;
    ทดสอบ-->B;
    A-->C;
    B-->D;
    C-->D;

ที่ WordPress ต้องลง Merpress plugin ด้วย


graph TD;A[การวางแผน] --> B[การวิเคราะห์ความต้องการ];B --> C[การออกแบบ] 
C --> D[การพัฒนา] 
D --> E[การทดสอบ] 
E --> F[การติดตั้ง] 
F --> G[การบำรุงรักษา]

ห้ามมีวงเล็บ


graph TD
    subgraph subgraph1
        top1["top"] --> bottom1["bottom"]
    end
    outside["outside"] --> top1
    outside --> top2["top"]
    subgraph subgraph2
        top2 --> bottom2["bottom"]
    end



sankey-beta

Pumped heat,"Heating and cooling, ""homes""",193.026
Pumped heat,"Heating and cooling, ""commercial""",70.672




zenuml
    title Annotators
    @Actor Alice
    @Database Bob
    Alice->Bob: Hi Bob
    Bob->Alice: Hi Alice



graph TD;
ทดสอบ-->B;
A-->C;
B-->D;
C-->D;



zenuml;
    ทดสอบ-->B;
    A-->C;
    B-->D;
    C-->D;

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




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]




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




sequenceDiagram
    Alice->>Bob: Hello Bob, how are you ?
    Bob->>Alice: Fine, thank you. And you?
    create participant Carl
    Alice->>Carl: Hi Carl!
    create actor D as Donald
    Carl->>D: Hi!
    destroy Carl
    Alice-xCarl: We are too many
    destroy Bob
    Bob->>Alice: I agree




flowchart TD
    B["fa:fa-twitter for peace"]
    B-->C[fa:fa-ban forbidden]
    B-->D(fa:fa-spinner)
    B-->E(A fa:fa-camera-retro perhaps?)




flowchart LR
    A[Hard edge] -->|Link text| B(Round edge)
    B --> C{Decision}
    C -->|One| D[Result one]
    C -->|Two| E[Result two]
Tags: