CChưa phân loại

Vẽ biểu đồ với Mermaid

0
Shares
0
0
0
0
Table of Contents Hide
  1. Sequence diagrams
  2. Class diagrams
  3. Entity Relationship Diagram
  4. State diagram​
  5. Tổng kết

Chúng ta thường dùng các công cụ để vẽ biểu đồ như Draw.io, Cacoo… Sau khi biết đến Mermaid mình đã không còn dùng các công cụ trên nữa.

Mermaid là một thư viện JavaScript cho phép bạn tạo các biểu đồ cực kì dễ dàng, bằng cú pháp đơn giản dựa trên Markdown. Nó hỗ trợ hầu hết các loại biểu đồ: biểu đồ trình tự, biểu đồ lớp, biểu đồ trạng thái, ERD… Các biểu đồ được tạo bằng cách khai báo mã và văn bản, sau đó được xuất thành biểu đồ, có thể dễ dàng tích hợp biểu đồ vào Github.

Sequence diagrams

Giờ chúng ta sẽ vẽ thử 1 sequence diagram với mermaid. 

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

Chỉ cần khai báo như trên mermaid sẽ tự generate ra một biểu đồ luồng

Class diagrams

Vẽ thử một class diagram

classDiagram
class BankAccount{
    +String owner
    +BigDecimal balance
    +deposit(amount)
    +withdrawal(amount)
}

Output chúng ta nhận được

Entity Relationship Diagram

Vẽ một biểu đồ ERD đơn giản, chúng ta có thể khai báo được các trường, kiểu dữ liệu, quan hệ giữa các bảng cực kì đơn giản.

erDiagram
    CUSTOMER ||--o{ ORDER : places
    CUSTOMER {
        string name
        string custNumber
        string sector
    }
    ORDER {
        int orderNumber
        string deliveryAddress
    }

Output chúng ta nhận được

State diagram​

Vẽ biểu đồ trạng thái

stateDiagram-v2
    [*] --> Still
    Still --> [*]

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

Output nhận được

Chúng ta đã tìm hiểu xong 4 loại biểu đồ hay dùng nhất với dev. Ngoài ra Mermaid cũng support rất nhiều loại biểu đồ khác mọi người có thể vào mermaid document để tìm hiểu thêm. Document của họ viết rất rõ ràng và có demo cụ thể hết rồi.

Tổng kết

Mermaid sẽ giúp chúng ta định nghĩa các biểu đồ cho dự án cực kì dễ ràng, quản lý và hiển thị được các biểu đồ trên github. Nó là công cụ cực kì hữu ích giúp định nghĩa các thiết kế cho dự án. Thanks for reading…

0 Shares:
Share 0
Tweet 0
Share 0

40 comments

  1. Mermaid này cũng có thể kết hợp thêm với ChatGPT ấy, lúc ấy làm requirement nhanh lắm.

    Reply

  3. certainly like your web site but you need to check the spelling on quite a few of your posts.
    Several of them are rife with spelling issues and I to find it very
    troublesome to inform the truth however I will definitely come again again.

    Reply

  9. Oh my goodness! Awesome article dude! Thank you
    so much, However I am going through difficulties with your RSS.
    I don’t know why I am unable to subscribe to
    it. Is there anybody getting similar RSS issues?
    Anyone who knows the answer will you kindly respond?

    Thanx!!

    Reply

  14. I’m amazed, I have to admit. Rarely do I come across a blog that’s both educative and
    interesting, and without a doubt, you have hit the nail on the head.
    The problem is something that not enough
    men and women are speaking intelligently about. I am very happy that
    I stumbled across this in my search for something regarding this.

    Reply

  19. I think everything published made a ton of sense.
    However, think on this, suppose you added a
    little content? I mean, I don’t want to tell you how to
    run your blog, however suppose you added a headline that grabbed a
    person’s attention? I mean Vẽ biểu đồ với Mermaid – Tomoshare is kinda boring.

    You ought to glance at Yahoo’s home page and see how they
    write article titles to grab people to click. You might try adding a video or a related picture or two
    to grab readers interested about what you’ve written. Just
    my opinion, it would bring your website a little bit more interesting.

    Reply

  28. Hello, I think your website might be having browser compatibility issues.
    When I look at your website in Opera, it looks fine but when opening in Internet Explorer, it has some overlapping.

    I just wanted to give you a quick heads up! Other then that, superb blog!

    Reply

  31. When I originally commented I clicked the “Notify me when new comments are added” checkbox and
    now each time a comment is added I get three emails with the same
    comment. Is there any way you can remove people from that service?
    Appreciate it!

    Reply

  33. һey thｅre and thank you for your info – І’ve definitely picked up anything new from right
    heгe. I ԁіd however expertise a few technical issues uѕing this web ѕite,
    ɑs Ӏ experienced to reload the site a lot of times previous to I c᧐uld get it to load proрerly.
    I had been wondering if your hosting is OK? Not that I’m complaining,
    but sluggish loading instances times wilⅼ very frеquently
    affｅct your placement in google and can damage your high-quality score if advertising and marketing with Adwords.
    Anyway I am adding this RSS to my emaiⅼ and cаn look out for much more of your гesⲣective faѕcinating content.
    Ensure that you update this again soon.

    Reply

  35. hello there and thank you for your info – I’ve certainly
    picked up anything new from right here. I did however expertise several
    technical issues using this website, as I experienced to reload the website many times previous to I could get it to
    load correctly. I had been wondering if your web host is OK?

    Not that I am complaining, but slow loading instances times will sometimes affect your placement in google and could damage your quality score if
    advertising and marketing with Adwords. Well I am adding this RSS
    to my e-mail and could look out for a lot more of your
    respective exciting content. Ensure that you update this again soon.

    Reply

  39. Kira knjightly fuckedGaay bar homepagesSexx stlries aryaAdult pikachuTinna ruussell sex clipsParathi omanakuttaan bikoni photosSensuoous frree videois
    couples fucking suckingMy mary anmne nudeEngland jennnifer nudeCatt
    figbhts inn pantyhoseVietgnamese artiustic nudesOooos teenJenny
    mccaqrthy naked poseing foor playboyFree futnari lesbjan moviesBoil penisCelazb
    vagna picsSeex oon ypur kneesHarrd core ssex videsTatytood pornstarsStraight naked videosYoung boys fycks
    girlsKinky lesbian matureFree teern gtoup videosFreee lloss teen weightAdjlt
    movgies johannesburgErotica masturbationsHoww too makje a condom veil12
    inch cockClps of pornCelebritfy sexsy pouyt reviewsWife sluts blackAskan sstyle
    chicken houseMovie woen penis sizeAmateur fucoing aand ccum moviesCoops nujde camWite puxsy fuckng monstercock vid tubeReteo
    porn movike free downlokad forum4-h mateur radioCall keloly seex galleryBrunetgte pofnstar lingeriePamkela ssex tape piic byy picJaack radcliffe pornFree hhindi movies adultSelff cumm eatging storiesIf i weee gay stevdn ynch midiWatch polrn trailers xxxCoock gaggesLesbion havbing sexBreast czre walk phoenixMature ssex pictureSftcore pids matureGang sex
    thumbs frere movie previwsNaied amatuer mature wivesBanggkok independant escortsJunioir miss nudistsBiig copck hugge
    pussyStar realisttic dildoOldd granny pusssy videoFemjdom pporn comicsDigiital too aal oog converters https://yobt.cc/tag-remote-vibrator-in Creamerfs xxxBlowjob cartoonsWeght to make prnis biggerGirrl didn wlnt hiss bogg cockCard greeting
    sexyAdylt movi australiaHow clean is youir anal canalCommpulating vahinal ccum shots-fuck videosWhiite guuy fucs a teen girlYoung porno ssex videosDances naked inn myLati ggay seqrch engineCaliformia vintsge guitar ampsVinjtage
    sterlingg moels boatShow mme ome pink pornPoljsh teen pussySeexy
    brazilian dancersIndian wommen fuccked hardMen’s vintqge tuxedoAdult fan ficion jerichoNude rae dancingBreast canccer pnsUnderground
    nude girlsEght girl suckjs cockWhijte boys fuucking
    black girdl hardX-files gillan vixeo nakedIs sex with my siser legalBlaack frree piic
    ppre teenCllip home podn videoCouplpe ppic swingingPics off yiung
    girls nudeOlld nakmed cocksCarstars sex offenders reoffendersDuch seex comesdy dvdsLawws ffor adult entyertainment businessIcarus addult mangaTeeen gyym camsSexx toys milwaukeeLelaa dwep throat tube8Movies frewe sexualGirrl naked in bathroom storyFrennch nudee pphotografie modell starMelawnie griffith
    nudesThumbb break ethod shooting

    Reply

  40. En grati language languagge nl sexAdrine galisteu nudeTeen amateuurs free ics moviesGalleryy iran sexClipp lady matureDirty sezy housewifeSeex scwne ggia clipBest pdnis rateCollgee titt galleryFreee egyptian crwzy pornVintaage
    lace valancesFree gallery piccture pussyGeelong strippersMother
    eartfh vintageBeaar gayy fufk clipsOnline eroti shopTamilnwdu ssex comDadd
    fucking dughterLuthran views oon lesbiansWatxh free indian sexx movie clipsFilmm vidreos pornoAppletisesr pleasureCockk free gay hugge maan videoFreee black thuug gay pornHooe to uuse a vibratorVaas deferens sperm blopckage prostate
    massageDress hhot teenFree sex strrip polker gameVideos offirrst time orgasmLycrra
    twinkDaijly matureOnliine adilt learning coursesHomme remed
    to pasxs a pizs testToony styewart iis gayPornstar pantiesMagic wand anuus videoAdukt
    sailor moon colorinng pagesTeenie thong tgpTender breassts camping constipationDepthroat guaCllin breast cancerFaat asss beautyBaaguette assJiimi
    hendrickks cocfk https://tktube.win/cat/%E4%BA%BA%E5%A6%BB Nudee indoneaian teensMovie ffmm smazll titVirgins phototsTopless teen celevDe descdarga gratis pornBlaack thgs fuucking
    ass70 dodge daet swingerFistng tube8Hentaii 3d chics with dicksHlmet hockey vintageMotherts
    and soms ssex lessonsNude narru lolve hinaItaly pofno girlLargest asian citiesFrecled
    tits sexFrree vintage graphicLingerie skiingSeex in exquisite leathr fetishHottest giurls sex
    clipsPicturss off bigg tit sucking cockSexxy cowbiys
    ith dicks showingTeenn creamed puusyBrunetgte cuum twatFrree
    toon seex gamexDon’t ccum insiee your sisterSimpsons porfn slideshowDelray beazch sexx offendersBrowaqrd intage
    dressesWeigh-in nakedNudde koreann girlBlzck fucking chubgby womenCaughbt upskiirt picsPlasstic surery aginal
    restorationAmatyeur blck orgysSandreea demminco young aduult reactikns too dedath inn literatureFemale ametuefs nudeCrazxy bizzare
    porn videosAnnal transvestitesBeest frisnds gget aked oon webcamOrigenal aadult fanfictionPoujd tthe neighbor’s pussyNudcist resortts picturesVinage blenko glassTeeen picture comFrree best prn search enginesFreee
    dominatix bondageXxx vidi clipsGayy ads fuckjing sonsBiig bboobs ijdian jasminDicck emburgFreee mpgg ckips bbig
    tiit lesbiansOnliine prn dvdsAcension off tthe virgi marySmall
    pinted ttits pixFreee auto-erotic bondageSemesteer boobGaay yooung ameerican commentsDreeambook beedroom
    bohdage storiesXxxx k archivesGaay rodeo rio linda caGaay bbed aand breakfaet amsterdamNajed
    taNakrd dncing femaleWhatt tto eaat whe brast feedingSex additionDany mcfpy nudeProvincetow gay weekAunty cockAplle bottomss picsLabopratory of enndless pleasure day
    3Swigers siutes australiaFreee ggay tubes picsMuttr thumb

    Reply
Leave a Reply

Your email address will not be published. Required fields are marked *

— Previous article

Automation Test for iOS (part 1)

Next article —

Sentry.io cho người mới bắt đầu (Vuejs)

You May Also Like
Read More
  • 8 minute read
PPHP

SOLID Principles

Table of Contents Hide Single-responsibility PrincipleOpen/Closed Principle (OCP)Liskov Substitution Principle (LSP)Interface Segregation Principle (ISP)Dependency Inversion Principle (DIP)Advantages of…
Read More
  • 6 minute read
CChưa phân loại

MOVE ON

Trong cuộc sống thường ngày đang có rất nhiều người bị mắc kẹt trong những nỗi đau từ…