June 24, 2024

D2 Declarative diagramming

Playing with d2lang for diagramming.

Seems to be a nice thing, but has some space for improvement. 
Best application (in my opinion) - sequence diagrams, works like a charm. For everything else - still draw.io. Anyway, looks promising and fun to play, hopefully will get developed and grow applicable to more cases.

D2lang for databases - eh. Foreign key connections being declared, but rendered implicit; also note, that multiple constraints for a field are not processed properly (compare "bridge" table to any other):




The code:



orders: {
    shape: sql_table
    id: int {constraint: primary_key}
    customer_id: str {constraint: foreign_key}
    product_id: str {constraint: foreign_key}
    branch_id: str {constraint: foreign_key}
    country_code: str
}


invoices: {
    shape: sql_table
    id: str
    invoice_dt: datetime
    country_code: str
    customer_id: str {constraint: foreign_key}
    product_id: str {constraint: foreign_key}
    branch_id: str {constraint: foreign_key}
}


bridge: {
    shape: sql_table
    order_id: str {constraint: primary_key, foreign_key}
    invoice_id: str {constraint: primary_key, foreign_key}
    country_code: str {constraint: P}
}




orders.id -- bridge.order_id
invoices.id -- bridge.invoice_id

---

For an architecture diagrams of complexity a bit higher than two rectangles - render is clumsy. For someone probably might work, but to me draw.io still is the best. Did not bother to finish it, as adding other parts does not seem to improve the appearance:



The code:



vars: {
    webApp: {
        Flask App {
            direction: right
            Endpoints Server <->  User State
        }
        direction: down
        Auth {
            shape: circle
        }
    }


    userGroup: {
        users: {
            shape: person
            style.multiple: true
        }
        browser: {
            label: web browser
        }
        users <-> browser
    }
}


Azure: {


    direction: down


    PAWEL: {
        label: App1
        ...${webApp}
    }


    Lookup: {
        label: App2
        ...${WebApp}
    }


    APIplatform: {
        label: API Platform
        Auth: {
            shape: circle
        }
        API: {
            label: API endpoints
        }
    }




    PAWEL -> APIplatform.Auth: authorization
    Lookup -> APIplatform.Auth: authorization


    PAWEL.Flask App <-> APIplatform.API: serving
    Lookup.Flask App <-> APIplatform.API: serving




}


experts: {
    label: Experts
    ...${userGroup}
}


salesmen: {
    label: Sales people
    ...${userGroup}
}




direction: left


experts.browser -> Azure.PAWEL.Auth: authorization
salesmen.browser -> Azure.Lookup.Auth: authorization


experts.browser <-> Azure.PAWEL.Flask App: using the tool
salesmen.browser <-> Azure.Lookup.Flask App: using the tool