npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

zenstack-markdown

v0.2.3

Published

Generate markdown doc from ZModel schema file of ZenStack with Mermaid ERD

Downloads

836

Readme

ZenStack Markdown Plugin

ZenStack Markdown Plugin is a standard plugin of ZenStack to generate markdown from the ZModel schema with Mermaid ERD diagram.

Do you know the Mermaid's official SaaS product, MermaidChart, is powered by ZenStack?😉

Example

Post

erDiagram
"Post" {
  String id PK
  DateTime createdAt
  DateTime updatedAt
  String title
  Boolean published
  String authorId FK
}
"Post" }o--|| "User": author
  • The author of the post can perform all operations on their posts.
  • Any authenticated user can read published posts.

User

erDiagram
"User" {
  String id PK
  String name  "?"
  String email
  DateTime emailVerified  "?"
  String password
  String image  "?"
}
"User" ||--o{ "Post": posts
  • Anyone can create and read user profiles.
  • Only the user themselves can update or delete their own profile.

Setup

npm i -D zenstack-markdown

add the plugin in your ZModel schema file

plugin zenstackmd {
    provider = 'zenstack-markdown'
}

You could generate more meaningful doc using AI
- Setting OPENAI_API_KEY of OpenAI in .env
- Or setting XAI_API_KEY by obtaining a free Grok API Key from https://x.ai

run zenstack generate

npx zenstack generate

you will see the schema.md generated in the same folder of your ZModel schema file.

Options

| Name | Type | Description | Required | Default | | -------- | ------- | ------------------------------------------------- | -------- | --------- | | output | String | Output file path (relative to the path of ZModel) | No | schema.md | | disabled | Boolean | Whether to run this plugin | No | false |

example:

plugin zenstackmd {
    provider = 'zenstack-markdown'
    output = 'docs/schema.md'
    disabled = true
}

You can also disable it using env variable

DISABLE_ZENSTACK_MD=true

Local Development

Install

npm install

Build

npm run build

After build, the plugin will be generated in dist folder. Then you can use it in your existing ZModel schema by setting the provider this dist folder

plugin zenstackmd {
    provider = '.../zenstack-markdown/dist'
}

provider could either by the absolute path or relative path to the running zenstack module.

Run Sample

simply run npm run dev to see a more complicated result schema.md generated from schema.zmodel

Show Mermaid Diagrams in Markdown

  • GitHub

    Supported by default

  • VSCode

    Install this extension Markdown Preview Mermaid Support

  • Other Unsupported Places

    Install the mermaid-cli:

    npm install -g @mermaid-js/mermaid-cli

    Transform the markdown file with mermaid diagrams

    mmdc -i schema.md -o schema-svg.md

    The mermaid-cli will find the mermaid diagrams, create SVG files from them and refer to those in the markdown output.