3rd / tsdiagram

Create diagrams and plan your code with TypeScript.

TSDiagram

TSDiagram is an online tool that helps you draft diagrams quickly by using TypeScript.
👉 https://tsdiagram.com

Features

• Lets you define your data models through top-level type aliases, interfaces, and classes.
• Automatically layouts the nodes in an efficient way.
• ...but if you move one of the nodes manually, it will only auto-layout the other ones.
• Persists the document state in the URL and localStorage.
• Export your diagrams as SVG.

Roadmap

• Function call representation
• Customizable TypeScript context (lib, etc.)
• Bring your own storage (different vendors)

---

This project is not just a diagramming tool, but also the foundation for a greater code visualization project. Imagine flagging types and functions in your code editor and see how they are connected, and how data flows through them. That's the end goal, so we'll swap the TS compiler with Tree-sitter in the process.

---

Test links

• Default example
• Interfaces
• Type aliases
• Interfaces and classes extends & implements

Special thanks <3

• TypeScript
• React Flow
• Monaco
• elkjs
• dom-to-svg

tsdiagram's Issues

Add support for enum

Quite a useful tool! Any chance you'd consider adding support for enums?

Suggestion: Visualize `extends`

Lets say we have these interfaces:

interface User {
    id: string
    name: string
}

interface ExtendedUser extends User {
    address: string
}

It will result in:

I'm not quite sure what the optimal visualization would be. Maybe list the original properties too or somehow reference the extended interface. At least there should be a connection.

Not an issue, an idea

As hard vim user myself, I'd love to use this project with vim navigation keys. What you think about this feature. Maybe a thing that we could activate in the preferences.

Suggestion: Visualize optional properties

It would be great if optional (?) properties were represented in the diagram, it would make it even better for documentation as the required ones would be easy to identify.

tsdiagram.com always crashes on Firefox if mouse move on diagram

tsdiagram.com always crashes on Firefox if mouse move on diagram

Feature request: allow split to be changed to horizontal

Most people are using wide landscape displays, but not everybody hits the "full screen" button; I use the wide screen to have two portrait-orientation windows side-by-side.

Having two narrow panes running the full height of the window is difficult to use for me, and usually involves a lot of dragging the divider back and forth; I'd love to be able to set a preference to have two full-width panes, one above the other.

Exports broken on Firefox

The default diagram, when exported, is a broken mess on Firefox. It looks like the issue is the export, not the SVG rendering; the same exported diagram is also broken when loaded into Chrome.

Suggestion: support visualizing discriminated unions.

In the following example, it would be really nice if there was a visible connection between Shape and Circle/Square.

https://tsdiagram.com/#/N4IgJg9gxgrgtgUwHYBcDOIBcBtUBLMLcBAMwEMYAbFEAGhBTxUoSIBFSLq6Q0IYATlFaYQAHVQBPAA4IABAGUAFmVlyAvBLkAfOQGE8Qllt0KAjjDICEAbgkSUM+QaPz1c4FrkBrPEjCYcgDkUIZQLEF2SHJyAmRgeDBogUjwAEYIAlEAvvZSauaW1hoeXr7+gUFoFlYIkV4A7gQoSinpmTl5jgUQiACSKAhwJZ7RcmgqsoHKqrYSuUgg2QC69LAC1qhs0PDIKH2EomCcVDTZQA

vs code extension support?

I using the vscode-ts-umi plugin but it's not up to the task.
https://marketplace.visualstudio.com/items?itemName=myxvisual.vscode-ts-uml

Suggestion: Support namespace

Hi, I believe it would be highly beneficial to include support for namespaces in your tools.

In my case, I am using PHP Laravel and employing a package to generate TypeScript types with ValueObjects. The package utilizes my PHP namespaces to create these types.

My file looks like this:

generated.d.ts

declare namespace App.Application.DataTransfertObjects.MediaLibrary {
    export type ImageAttributesData = {
        src: string;
        srcset: string;
        loadingAttributeValue: string;
        conversion: string;
        width: string;
        height: string;
    };
}
declare namespace App.Application.DataTransfertObjects.Permission {
    export type PermissionData = {
        id?: number;
        uuid?: string;
        name: string;
        description: string | null;
        module: string | null;
        guard_name?: string;
        roles?: Array<App.Application.DataTransfertObjects.Role.RoleData>;
    };
}
declare namespace App.Application.DataTransfertObjects.Profile {
    export type UserProfileImageData = {
        profile_image: any;
    };
    export type UserUpdateProfileData = {
        id: number;
        email?: string;
        password?: string;
        password_confirmation?: string;
    };
}
declare namespace App.Application.DataTransfertObjects.Role {
    export type RoleData = {
        id?: number;
        uuid?: string;
        name: string;
        description: string | null;
        module: string | null;
        guard_name: string;
        permissions?: Array<App.Application.DataTransfertObjects.Permission.PermissionData> | null;
    };
}
declare namespace App.Application.DataTransfertObjects.User {
    export type UserData = {
        id?: number | null;
        uuid?: string | null;
        deleted_at?: any | string | null;
        created_at?: any | string | null;
        updated_at?: any | string | null;
    };
}
declare namespace App.Application.DataTransfertObjects.User.Authentication {
    export type UserLoginEmailData = {
        email: string;
        password: string;
        remember: boolean;
    };
    export type UserLoginTagNumberData = {
        tag_number: string;
    };
    export type UserRegistrationData = {
        gateway_type: string;
        credentials: Array<any>;
        remember_token: boolean;
    };
}
declare namespace App.Application.Services.Frontend.Administration.Action {
    export type ActionData = {
        type: App.Application.Services.Frontend.Administration.Action.ActionTypeEnum;
        properties: { [key: string]: any };
    };
    export type ActionTypeEnum = "link" | "modal" | "custom";
}
declare namespace App.Application.Services.Frontend.Administration.Form {
    export type FormActionTypeEnum = "submit" | "reset" | "custom";
    export type FormActionData = {
        type: App.Application.Services.Frontend.Administration.Form.FormActionTypeEnum;
        label: string;
        parameters: { [key: string]: any };
        class: string;
        color: App.Application.Services.Frontend.Quasar.Shared.Enums.ColorEnum;
    };
    export type FormColumnData = {
        component: App.Application.Services.Frontend.Component.ComponentData;
        class: string;
    };
    export type FormData = {
        url: string;
        inputs: { [key: string]: any };
        visitOptions: App.Application.Services.Frontend.Shared.Inertia.InertiaVisitOptionsData;
        actions: Array<App.Application.Services.Frontend.Component.ComponentData>;
        elements: Array<App.Application.Services.Frontend.Administration.Form.FormRowData>;
        title: string;
        description?: string | null;
    };
    export type FormRowData = {
        columns: Array<App.Application.Services.Frontend.Administration.Form.FormColumnData>;
        class: string;
    };
}
declare namespace App.Application.Services.Frontend.Administration.Page {
    export type PageData = {
        title: string;
        sections: Array<App.Application.Services.Frontend.Administration.Page.Section.SectionData> | null;
        actions: Array<App.Application.Services.Frontend.Administration.Action.ActionData> | null;
    };
}
declare namespace App.Application.Services.Frontend.Administration.Page.Section {
    export type SectionData = {
        components: Array<App.Application.Services.Frontend.Component.ComponentData>;
        title?: string | null;
        subtitle?: string | null;
        description?: string | null;
    };
}
declare namespace App.Application.Services.Frontend.Component {
    export type ComponentCodex = {
        name: string;
        path: string;
    };
    export type ComponentEnum =
        | "ThemeTableTable"
        | "Form"
        | "FormInputText"
        | "FormInputSelect"
        | "FormInputOption"
        | "FormAction";
    export type ComponentData = {
        name: App.Application.Services.Frontend.Component.ComponentEnum;
        properties: { [key: string]: any };
    };
}
declare namespace App.Application.Services.Frontend.Quasar.Actions.Link {
    export type LinkData = {
        label: string;
        endpoint: App.Application.Services.Frontend.Shared.EndpointData;
        color: App.Application.Services.Frontend.Quasar.Shared.Enums.ColorEnum;
        icon?: string | null;
        size: App.Application.Services.Frontend.Quasar.Shared.Enums.SizeEnum;
    };
}
declare namespace App.Application.Services.Frontend.Quasar.Form.Inputs.Option {
    export type InputOptionData = {
        label: string;
        value: any;
        description: string;
    };
    export type InputOptionGroupData = {
        name: string;
        options: Array<App.Application.Services.Frontend.Quasar.Form.Inputs.Option.InputOptionData>;
        type: App.Application.Services.Frontend.Quasar.Form.Inputs.Option.InputOptionTypeEnum;
        inline: boolean;
    };
    export type InputOptionTypeEnum = "radio" | "checkbox" | "toggle";
}
declare namespace App.Application.Services.Frontend.Quasar.Form.Inputs.Select {
    export type InputSelectData = {
        name: string;
        label: string;
        description: string;
        default: string;
        multiple: boolean;
    };
}
declare namespace App.Application.Services.Frontend.Quasar.Form.Inputs.Text {
    export type InputTextMaskEnum =
        | "date"
        | "datetime"
        | "time"
        | "fulltime"
        | "phone"
        | "card";
    export type InputTextTypeEnum =
        | "text"
        | "password"
        | "textarea"
        | "email"
        | "search"
        | "tel"
        | "file"
        | "number"
        | "url"
        | "time"
        | "date";
    export type InputTextData = {
        name: string;
        type: App.Application.Services.Frontend.Quasar.Form.Inputs.Text.InputTextTypeEnum;
        label: string;
        description: string;
        canGrow: boolean;
        mask?: App.Application.Services.Frontend.Quasar.Form.Inputs.Text.InputTextMaskEnum | null;
    };
}
declare namespace App.Application.Services.Frontend.Quasar.Shared.Enums {
    export type ColorEnum =
        | "primary"
        | "secondary"
        | "accent"
        | "dark"
        | "positive"
        | "negative"
        | "info"
        | "warning";
    export type SizeEnum = "xs" | "sm" | "md" | "lg" | "xl";
}
declare namespace App.Application.Services.Frontend.Quasar.Table {
    export type QTableColumnAlignEnum = "left" | "right" | "center";
    export type QTableColumnData = {
        name: string;
        label: string;
        field: string;
        sortable?: boolean;
        align: App.Application.Services.Frontend.Quasar.Table.QTableColumnAlignEnum;
        required?: boolean;
    };
    export type QTableData = {
        uniqueKey: string;
        title: string;
        columns: Array<App.Application.Services.Frontend.Quasar.Table.QTableColumnData>;
        rows: Array<{ [key: string]: any }>;
        showable: boolean;
        showableEndpoint: string | null;
        actions?: Array<App.Application.Services.Frontend.Administration.Action.ActionData> | null;
    };
}
declare namespace App.Application.Services.Frontend.Shared {
    export type EndpointData = {
        httpMethod: App.Application.Services.Frontend.Shared.Enums.HttpMethodEnum;
        endpoint: string;
        parameters: { [key: string]: string };
        external: boolean;
    };
}
declare namespace App.Application.Services.Frontend.Shared.Enums {
    export type HttpMethodEnum = "get" | "post" | "put" | "patch" | "delete";
}
declare namespace App.Application.Services.Frontend.Shared.Inertia {
    export type InertiaVisitOptionsData = {
        method: App.Application.Services.Frontend.Shared.Enums.HttpMethodEnum;
        replace: boolean;
        preserveState: boolean;
        preserveScroll: boolean;
        only: Array<string>;
        errorBag: string | null;
        forceFormData: boolean;
    };
}