3rd / tsdiagram Goto Github PK
View Code? Open in Web Editor NEWCreate diagrams and plan your code with TypeScript.
Home Page: https://tsdiagram.com
License: GNU General Public License v3.0
tsdiagram's Introduction
tsdiagram's People
Contributors
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
Stargazers
Watchers
Forkers
devdoshi mandarbadve dinodefend willnguyen1312 vinicius-ianni gauravp-dev linecode aramacs lsuarezj in-tech-grationtsdiagram's Issues
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.
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.
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.
Add support for enum
Quite a useful tool! Any chance you'd consider adding support for enums?
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;
};
}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.
tsdiagram.com always crashes on Firefox if mouse move on diagram
tsdiagram.com always crashes on Firefox if mouse move on diagram
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.