✨2023#49: TSDiagram: Create diagrams with TypeScript.
Tags: webdev, javascript, typescript, node
Published: 2023-12-14 18:15:45

Hi developers 👋
[JSTools Weekly](https://jstools.substack.com/) newsletter, issue [2023#49 (New JS Tools)](https://jstools.substack.com/p/202349-tsdiagram-create-diagrams) just released.

---
 
![TSDiagram Screenshot](https://substackcdn.com/image/fetch/w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fffb94e49-7404-4c69-8bb2-85ec051c7d86_1200x628.png "TSDiagram Screenshot")
 

[source](https://tsdiagram.com/)

#### **[tsdiagram: ](https://tsdiagram.com/)**[Create diagrams and plan your code with TypeScript.](https://github.com/3rd/tsdiagram)

TSDiagram is an innovative online tool that utilizes TypeScript for rapid diagram creation. It empowers users to define data models using type aliases, interfaces, and classes, and it automatically arranges nodes efficiently. Additionally, TSDiagram automatically rearranges nodes except the one moved manually. It also preserves document status in URL and localStorage and enables SVG export for diagrams.

#### **[ai-group-tabs: ](https://github.com/MichaelYuhe/ai-group-tabs)**[Organize and group your Chrome tabs with AI](https://github.com/MichaelYuhe/ai-group-tabs)

This extension helps you organize and group your Chrome tabs by default categories. It uses OpenAI API key in popup and save in Chrome storage. It also allows you to customize categories in popup. It groups new tabs automatically and published on Chrome store.

#### **[nanotar: ](https://github.com/unjs/nanotar)**[Tiny and fast Tar utils for any JavaScript runtime!](https://github.com/unjs/nanotar)

Nanotar is a tiny and fast tar utility for any JavaScript runtime. It is written in modern TypeScript and ESM format and works in any JavaScript runtime, including Node.js (18+), Bun, Deno, Browsers and Edge Workers. It provides built-in compression and decompression support and is Web Standard Compatible.

```
import { createTar } from "nanotar";

const data = createTar(
  [
    { name: "README.md", data: "# Hello World!" },
    { name: "test", attrs: { mode: "777", mtime: 0 } },
    { name: "src/index.js", data: "console.log('wow!')" },
  ],
  { attrs: { user: "js", group: "js" } },
);

// Data is a Uint8Array view you can send or write to a file
```

#### **[pagination: ](https://github.com/rizkyalam/pagination)**[Simple Pagination Library](https://github.com/rizkyalam/pagination)

```
const peoples = [
    { name: 'Asep', age: 21, address: 'Bandung' },
    { name: 'Komar', age: 23, address: 'Jakarta' },
];

const options = {
    search: 'a',
    limit: 1,
    currentPage: 1,
    fieldName: 'peoples',
    sort: [
        ['age', 'desc'],
    ],
};

paginate(peoples, options);
```

#### **[action-table: ](https://github.com/colinaut/action-table)**[Native HTML web component for adding sorting and filtering functionality to tables](https://github.com/colinaut/action-table)

A lightweight and customizable web component that enhances static HTML tables with sorting and filtering capabilities. Unlike conventional Shadow DOM implementation, it utilizes a custom CSS stylesheet for styling, allowing users to tailor the component's appearance to their preferences.

#### **[unwrapped: ](https://github.com/middlewarehq/unwrapped)**[Spotify Wrapped for developers.](https://github.com/middlewarehq/unwrapped)

Unwrapped provides developers with a comprehensive summary of their coding activities throughout the year, including code contributions, productivity insights, repo highlights, coding habits, contribution styles, and detecting fires early.

 
![Unwrapped ,Spotify Wrapped for developers.](https://substackcdn.com/image/fetch/w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F7bd35dce-00e2-4806-a678-c568b38d3101_1263x284.png "Unwrapped Logo")

 

[source](https://github.com/middlewarehq/unwrapped)

#### **[astro-dashboard: ](https://github.com/alexwhitmore/astro-dashboard)**[An Astro dashboard](https://github.com/alexwhitmore/astro-dashboard)

An open source dashboard project using Astro with API endpoints, Tailwind, and Supabase.

 
![astro-dashboard](https://substackcdn.com/image/fetch/w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2Fa6a81689-202b-4d51-a461-4f3a23588e4a_2856x1560.png "Screenshot 2023-12-10 at 11 01 49 PM")

 

[source](https://github.com/alexwhitmore/astro-dashboard)

#### **[rich-editor-to-markdown-parser: ](https://github.com/hiro08gh/rich-editor-to-markdown-parser)**[microCMS Rich Editor response convert to markdown](https://github.com/hiro08gh/rich-editor-to-markdown-parser)

```
import parse from 'rich-editor-to-markdown-parser';

const html = '<h1>Hello World!</h1><p>This <strong>html</strong> string is 
convert
into <a href="https://exampe.com">markdown.</a></p>'

parse(html); // # Hello World!\n\nThis **html** string is ~~convert ~~into [markdown.](https://exampe.com)
```

#### **[metaline: ](https://github.com/platformatic/metaline)**[A tiny language to write mapping functions as strings](https://github.com/platformatic/metaline)

The string `where.id.in.$>#id;limit:99` generates the equivalent function of:

```
function transform (input) {
  return {
    where: {
      id: {
        in: input.map((i) => i.id)
      }
    },
    limit: 99
  }
}
```

The string `$>id.#directoryId` generates the equivalent function of:

```
function transform (input) {
  return input.map((t) => {
    return {
      id: t.directoryId
    }
  })
}
```

#### **[ChunkViz: ](https://github.com/gkamradt/ChunkViz)**[Visualize Different Text Splitting Methods](https://github.com/gkamradt/ChunkViz)

This is a tool to visualize how different text splitters chunk up text

 
![ChunkViz Preview](https://substackcdn.com/image/fetch/w_1456,c_limit,f_auto,q_auto:good,fl_progressive:steep/https%3A%2F%2Fsubstack-post-media.s3.amazonaws.com%2Fpublic%2Fimages%2F1c6e349f-a5f3-432d-b83e-4715d521c04a_1942x788.png "ChunkViz Preview")

 

[source](https://www.chunkviz.com/)

### More tools to explore:

-   **[ai-group-tabs](https://github.com/MichaelYuhe/ai-group-tabs): **Organize and group your Chrome tabs with AI

-   **[fast-ignore](https://github.com/fabiospampinato/fast-ignore): **A fast parser and processor for .gitignore files.

-   **[eslint-ts-patch](https://github.com/antfu/eslint-ts-patch): **Support loading eslint.config.mjs and eslint.config.ts as flat config files for ESLint.

-   **[eslint-plugin-format](https://github.com/antfu/eslint-plugin-format): **Format various languages with formatters in ESLint

-   **[eslint-plugin-unimport](https://github.com/antfu/eslint-plugin-unimport): **Insert imports automatically from Unimport in ESLint

-   **[eslint-processor-vue-blocks](https://github.com/antfu/eslint-processor-vue-blocks): **Create virtual files in ESLint for each Vue SFC block to lint them individually.

-   **[eslint-merge-processors](https://github.com/antfu/eslint-merge-processors): **Merge multiple ESLint processors to behave like one

-   **[vite-plugin-stylex](https://github.com/HorusGoul/vite-plugin-stylex): **Vite Plugin for StyleX

-   **[vite-plugin-clean-css](https://github.com/Mini-ghost/vite-plugin-clean-css): **Optimize CSS for production using clean-css

-   **[chrome-extension-starter](https://github.com/MichaelYuhe/chrome-extension-starter): **Chrome extension starter template with React, TypeScript, Vite and Tailwind

-   **[remix-vite-template](https://github.com/kiliman/remix-vite-template): **Remix template with Vite, Tailwind CSS, and Fly.io support

-   **[YouTubeAIExtension](https://github.com/elebumm/YouTubeAIExtension): **Chat with ANY of your favorite YouTube Videos!

-   **[http-server](https://github.com/pilcrowOnPaper/http-server): **An experimental HTTP framework

-   **[ts-check-perf](https://github.com/romeerez/ts-check-perf): **Measuring and comparing type-checking speed of TS samples

-   **[client-js](https://github.com/mistralai/client-js): **JS Client library for Mistral AI platform

-   **[disposable-email-api](https://github.com/dephraiim/disposable-email-api): **This API allows you to check if an email address is from a disposable email service.

-   **[commit-translator](https://github.com/nimod7890/commit-translator): **vscode extension for translating commit message

-   **[Js-form-data-assigner](https://github.com/RejownAhmed/Js-form-data-assigner): **This is a recursive function which generates a formData object from nested values

-   **[pragmaticversioning](https://github.com/seveibar/pragmaticversioning): **Pragmatic versioning optimizes for communicating changes to a package to package consumers, while retaining simple semantics for package maintainers.

-   **[snapp](https://github.com/urania-dev/snapp): **Yet Another Url Shortner. A simple excercise to learn Svelte, Svelte5 Runes, and Tabler.

-   **[generic-streaming](https://github.com/jherr/generic-streaming): **Streaming server actions without the AI








If you like this issue, please consider subscribing to [JSTools Weekly Newsletter](https://jstools.substack.com/).

Thank you